Text formatting with CSS (part 1/2)

• In pixels: it is a very precise method to define text size. You can decide exactly how many pixels the text should measure.
  So if want your text to be 16 pixels big, you have to write:
  
  font-size:16px;
  
  The letters will be 16 pixels high, as shown in this picture:
  
  
  
  
  
  Just below is an example of how to use font-size (I didn't put the xHTML file that goes with it, I estimated you could handle it at this point ):
  
  Code: CSS

  1 2 3 4 5 6 7 8

  p { font-size: 14px; /* 14 pixel paragraphs */ } h1 { font-size: 22px; /* 22 pixel titles */ }

  
  
  Try it!
  
  
  If you can't stand pixels, be aware that you can also indicate size in centimeters (i.e: "2cm") and in millimeters (i.e: "14mm"). 1 inch is 2.5 centimeters, or 25 millimeters.
  
  Specifying text size in pixels, centimeters or millimeters is quite precise, I admit it. However, it is advised to define a relative size (you will see how to do this in a minute) so the size of the text can adapt to one's personal choices (some people prefer having enlarged text, other prefer small text, and so forth...)
• By giving a relative value: in other words, writing "big", "very big", "small", "tiny" (well, it's almost like that ) Here is the list of the different values you can put in:
  
  
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  
  Here is a CSS code which uses relative values :
  
  Code: CSS

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  .tiny { font-size: xx-small; } .verysmall { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium; } .big { font-size: large; } .verybig { font-size: x-large; } .huge { font-size: xx-large; }

  
  
  Try it!
  
  
  
  The size of the text might not be exactly the same depending on your browser... but it's not that big of a deal, since in any case, you can be sure that "xx-small" means very small text and that "xx-big" corresponds to huge text. And that's all you'll need to know
  
  I advise you to use this method rather than pixels for indicating text size. Your website will automatically be way more "adaptable" to each one of your visitor's configuration.
• In em: it is an other way to indicate the relative text size. I agree on the fact that it isn't the simplest method to understand, but once you've tested it a little, it really gets easy to use.
  All you have to do is to indicate the text size you wish to have compared with the font's normal size. Let me explain. "1em" means "normal size", which means that "1" is the EMphasis factor. If you put a number higher than 1 (generally a decimal number) like "1.3em", the text will thus have a size 1.3 time bigger than normal. It works the same way for reducing the size: "0.8em" and your text will be 0.8 time smaller.
  Personally, it's the method I use the most often for text sizing (therefore, most of my font-size are in "em").
  
  
  Be careful: do not put a comma instead of a dot, if you are used to doing that. Indeed, "1.4em" would be correct, whereas "1,4em" wouldn't!
  
  
  Code: CSS

  1 2 3 4 5 6 7 8

  .em_little { font-size: 0.7em; } .em_big { font-size: 1.3em; }

  
  
  Try it!
  
  
• With a percentage that's easy. If you indicate "100%", then the text will have a "normal" size. If you put "130%", the text will be sized at 130% of its normal size. It looks a lot like the "em" technique (it's somehow the same thing), after all just choose the one you prefer

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

1
2
3
4
5
6
7
8
9

h1
{
   font-family: "Arial Black", Arial, Verdana, serif; /* Let's try to put a priority on Arial Black */
}
p
{
   /* I think the Comic Sans Ms font makes paragraphs nice and smooth to read */ 
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}

Simple alignments

• left: is the default setting.
• center
• right
• justify Justifying text allows the text to fill in any blank spaces at the end of lines. For instance, news paper text is always justified.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

h1
{
   text-align: center; /* The text will be centered */
   font-family: "Arial Black", Arial, Verdana, serif; /* Nothing better than a good old title put in Arial font ;) */
}
blockquote
{
   text-align: justify; /* The quote will be justified */
}
.signature
{
   text-align: right; /* So that my signature will be aligned to the right */
   font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
   font-size: 80%;
}

1
2
3
4
5
6
7

<h1>The sage's word</h1>

<p>Once, a great sage said :</p>

<blockquote><p>Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque. Donec id elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis lectus. Praesent facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo wisi id dui. Maecenas mattis. Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum aliquam. Vivamus dictum quam id tellus. Maecenas in quam sit amet risus semper auctor. Integer leo dui, malesuada eu, fermentum at, vehicula at, nisl. Pellentesque hendrerit. Proin ut libero. Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a orci id metus pretium lobortis. Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget rhoncus purus erat ac quam.</p></blockquote>

<p class="signature">Signed M@teo21</p>

Indentation

Indented text

1
2
3
4
5
6

p
{
   text-indent: 30px; /* The paragraphs will start at 30 pixels to the right of the left margin */
   text-align: justify; /* They will be justified */
   font-size: large; /* Let's get a little crazy and make the text bigger :D */
}

• word-spacing: space between words (in pixels).
• letter-spacing: space between letters (in pixels).