CSS – Text Formatting In CSS (Part 1/2)

CSS – Text Formatting In CSS (Part 1/2)

Now we’ve reached a chapter that should interest you

No, formatting your text doesn’t have anything to do with erasing all the contents of your hard drive. It is simply modifying the appearance of the text. Reassure yourself, your hard drive will still be full at the end of the chapter

There are no particular surprises, we are still doing CSS and we will be re-using what we learnt in the previous chapter. So I hope that you have re-read and understand how to use a .css file.

This time we will be seeing a lot more of how to program a .css file to make your web site : we will change the size of the text, change the font etc… There is a load of things to discover, so to avoid making you fall to sleep in front of your screen I’ve decided to split this chapter into 2 parts

Text Size

But I already know how to change the size of the text ! You told us how to do that in the last chapter !

In fact, in the previous chapter I gave you an example without any explanations, just to illustrate how CSS works. In reality there are several ways to modify the size of the text.

What you already know, is that the CSS property that allows us to change the size of the text is font-size. Nothing changes there. However there are several ways of giving the size of the text :

• 
  

  In pixels : This is a very precise way to give the text size. It’s up to you to say how many pixels the letters should use, you write :
  text-size: 16px;

  
  

  The letters will have a size of 16 pixels as shown on the image below :

  
  

  

  
  

  Here’s an example of the code (I’m not putting the XHTML code to go with it, you can do it yourselves now ) :

  
  
  
  

  
  

  
  
  
  
  
  

  1

  p {

  
  

  
  
  
  
  
  

  2	font-size: 14px; /* Paragraphs are 14 pixels */

  
  

  
  
  
  
  
  

  3

  }

  
  

  
  
  
  
  
  

  4

  
  

  
  
  
  
  
  

  5

  h1 {

  
  

  
  
  
  
  
  

  6	font-size: 22px; /* Titles are 22 pixels */

  
  

  
  
  
  
  
  

  7

  }

  
  

  If you don’t like pixels, you should know that it’s possible to put a size in centimetres (2cm for example) and in millimetres (14mm for example).

  
  

  Giving a text size in pixels, centimetres & millimetres is very useful and precise. I agree. However it would be nice to give a related size (like we will see) so that the size of the text adapts itself to everybody’s needs (some prefer it bigger, others smaller etc…)

  
  
• 
  

  Give A Related Value : this is practically just writing big, very big, small, very small. Here’s a list of the different values you can use from the smallest to biggest :

  
  
  
  
  • xx-small
    
  • x-small
    
  • small
    
  • medium
    
  • large
    
  • x-large
    
  • xx-large
  
  

  Here is an example of a CSS using all these values :

  
  
  
  

  
  

  
  
  
  
  
  

  1

  .mini {

  
  

  
  
  
  
  
  

  2	font-size: xx-small;

  
  

  
  
  
  
  
  

  3

  }

  
  

  
  
  
  
  
  

  4

  
  

  
  
  
  
  
  

  5	.very-small {

  
  

  
  
  
  
  
  

  6	font-size: x-small;

  
  

  
  
  
  
  
  

  7

  }

  
  

  
  
  
  
  
  

  8

  
  

  
  
  
  
  
  

  9

  .small {

  
  

  
  
  
  
  
  

  10	font-size: small;

  
  

  
  
  
  
  
  

  11

  }

  
  

  
  
  
  
  
  

  12

  
  

  
  
  
  
  
  

  13	.average {

  
  

  
  
  
  
  
  

  14	font-size: medium;

  
  

  
  
  
  
  
  

  15

  }

  
  

  
  
  
  
  
  

  16

  
  

  
  
  
  
  
  

  17

  .big {

  
  

  
  
  
  
  
  

  18	font-size: large;

  
  

  
  
  
  
  
  

  19

  }

  
  

  
  
  
  
  
  

  20

  
  

  
  
  
  
  
  

  21	.very-big {

  
  

  
  
  
  
  
  

  22	font-size: x-large;

  
  

  
  
  
  
  
  

  23

  }

  
  

  
  
  
  
  
  

  24

  
  

  
  
  
  
  
  

  25

  .giant {

  
  

  
  
  
  
  
  

  26	font-size: xx-large;

  
  

  
  
  
  
  
  

  27

  }

  
  

  The size of the text won’t be exactly the same in different browsers… but it doesn’t matter, because in any case xx-small will be really small text and xx-large will be giant text. That’s all you need to know

  
  

  I encourage you to use this method to indicate the size of your text rather than using pixels. Your site will be more adaptable to the different configurations of your visitors.

  
  
• 
  

  In em : Another way to give the size of your text using a relative size. It’s a bit more complicated to understand, I agree, but after a few tests you’ll have no problems and you’ll realise that it truly is a great way to indicate the size of your text.
  We need to give the size of the text compared to the default size of it. I’ll explain : 1em is the standard size. If you put a bigger number (generally a decimal number) like 1.3em, the text will be 1.3 times bigger. The same for making it smaller : 0.8em will make your text 0.8 times smaller.
  Personally, it’s the method that I use most often to give the text size (most of my font-size are in em).

  
  

  Here’s an example :

  
  
  
  

  
  

  
  
  
  
  
  

  1	.small-em{

  
  

  
  
  
  
  
  

  2	font-size: 0.7em;

  
  

  
  
  
  
  
  

  3

  }

  
  

  
  
  
  
  
  

  4

  
  

  
  
  
  
  
  

  5

  .big-em {

  
  

  
  
  
  
  
  

  6	font-size: 1.3em;

  
  

  
  
  
  
  
  

  7

  }

  
  
• 
  

  In Percentages : That’s easy. If you put 100%, the text will be normal size. If you put 130%, the text will be 130% of the normal size. It is a lot like em (in fact it’s more or less the same). After, it’s just a question of taste.

Well, as you can see there is enough choice
Almost to the point where you get lost…

As I said before pixels are good for being precise, but aren’t "recommended" because a size that’s too small (or too big) could bother certain visitors.
Personally I find that the em (or %) method is the most practical : it adapts itself automatically to the preference of the visitors.

Fonts

Ah…Fonts…Now we’re getting to something a bit more delicate

In effect, the problem is that for a font to be shown correctly, every one of your visitors needs to have it. If a visitor doesn’t have your font, his browser will use a default font which may not look anything like what you want.

You will say "everybody has Times New Roman" and "Arial"…and yet, on Mac it’s "Time" instead of "Times New Roman".
But if you’re planning on using the latest gothic font for a Heavy Metal site, you might want to rethink your ideas

Right, so what do we do ?

The CSS property which allows us to indicate a font is font-family. You indicate the name of the font like this :
font-family: font;

However, to avoid problems with the visitor not having your font, you have to put several font names, separated by commas :
font-family: font1, font2, font3, font4;

The browser will first try the first font. If it can’t be found the browser will try the second one. If that can’t be found the browser carries on to the next one etc… In general, right at the end you put serif, which is a standard font (and won’t be used if any of the other fonts are available).

Well, what are the most common fonts that we are allowed to use ?
Here’s a list of fonts that work on most navigators and that you can use without any worries :

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

So, if I write :
font-family: Impact, "Arial Black", Arial, Verdana, serif;
…it means : Use Impact, or if it doesn’t exist use Arial Black, if not use Arial else Verdana & if none of them exist use the standard font (serif).
Generally it is good to indicate 3 or 4 fonts (+ serif) to be sure that at least one of them is on the visitor’s computer.

If the name of the font contains spaces, you must surround it with speech marks, as I have done with Arial Black.

Right, I’ll do a small CSS example to show you :

1

h1 {

2	font-family: "Arial Black", Arial, Verdana, serif; /* We'll try to use Arial Black as a priority */

3

}

4

5

p {

6	/* Comic Sans MS is nice in paragraphs I find */

7	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;

8

}

Alignment

Simple Alignments

CSS allows us to align text just as we are used to it : left, centre, right and justified.

It’s easy. We just use the property text-align, then we indicate the desired alignment :

• left : the text will be aligned to the left (the default setting)
  
• center : the text will be centred
  
• right : the text will be aligned to the right
  
• justify : the text will be justified. Justified text takes the whole width of the allowed space without leaving any empty spaces at the end of lines. Newspaper articles, for example, are justified.

Look at the different alignments in this example :

1

h1 {

2	text-align: center; /* put the text in the centre */

3	font-family: "Arial Black", Arial, Verdana, serif; /*A title in Arial Black is preferable :O) */

4

}

5

6	blockquote {

7	text-align: justify;

8

}

9

10	.signature {

11	text-align: right; /* Align the signature to the right */

12	font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;

13	font-size: 0.8em;

14

}

Don’t forget that you still need an XHTML file to read this. This time I’ll be nice and give you the code I’m using to test this example. You should know as well that you can see any pages’ html code by doing View=>Page Source in your browser.
So, here’s the code I’m using to test the CSS :

1	<h1>The speech of the monkeyh1>

2

3	<p>One day, a monkey said :p>

4

5	<blockquote>

6

<p>

7

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.

8

p>

9	blockquote>

10

11	<p class="signature">Signed by : Danielp>

Just recopy this code into a HTML file and make sure it’s linked to the CSS to try it.

You can’t modify the alignment of text in an inline tag (like span, a, em, strong…). The alignment only works on block tags (p, div, blockquote, h1, h2…), which is kind of normal really as you can’t align a few words in the middle of paragraph !
It’s the whole paragraph that you want to align.

Indenting

What is indenting ? It is simply moving the text across in one direction or another. It allows us, for example, to start the first line of a paragraph a bit more to the right which (I find) makes reading the text easier. It’s something that you’ll find in most books.
Here’s an example of an indented paragraph :

To do this we use the property text-indent. We also need to indicate the size of the indentation : we can do this is centimetres, millimetres, pixels…
Well, I think that the best way is using pixels ^^. Look at this example to see how to use text-indent :

1

p {

2	text-indent: 30px; /* Paragraphs will start 30px to the right */

3	text-align: justify; /* They will be justified */

4	font-size: large; /* Make the text big */

5

}

The advantage of CSS is that you can say once & for all I want my paragraphs to be indented 30 pixels to the right, and each time you write a new paragraph, it will automatically indent itself.
Before XHTML (at the time of HTML), this kind of thing was impossible, or very difficult and repetitive. Now it’s child’s play

There are two similar properties that I don’t think I’ll need to explain :

• word-spacing : the gap between words (in pixels)
  
• letter-spacing : the gap between letters (in pixels)

And half of the chapter is done.

As soon as you feel you’ve understood this you can carry on to the second part