applying varying styled text

Question

when i write a paragraph i would like the text to look like this:

is it something that i have to do in css? i want similar formatting.

Answer 1

You could do this by having a few different styles:

CSS:

 .level0 { font-weight: normal; }
 .level1 { font-weight: bold; }
 .level2 { font-weight: bold; font-size: 1.1em; }
 .level3 { font-weight: bold; font-size: 1.2em; }
 //etc...

Html:

<div>
  <a href="#" class="level0">Tag1</a> 
  <a href="#" class="level3">Tag2</a>
  //etc..
</div>

When you render the section out server-side, just plug in the appropriate level numbers to stick in your answers, e.g. top 3 get level10, next 3 get level9, and so on...just some algorithm looks good to you.

Answer 2

For something like this, a minimum and maximum font-size is specified, then a range is associated with the terms (less important to most important). When the terms are written to the page, you combine the values to get the actual font size, somewhere between the minimum and maximum size.

The final output looks something like this:

<ul id='tags'>
   <li style="font-size: 12px"><a href="/tags/normal-term">Normal Term</a></li>
   <li style="font-size: 8px"><a href="/tags/small-term">Small Term</a></li>
   ....
</ul>

And then the CSS looks like this:

#tags { line-height: 16px /* Max font size */ }
#lags li { display: inline; margin-right: 10px}