Just as we have seen CSS change the layout and appearance of elements in the elements of your webpage, it can also be used to change the layout and appearance of the text which makes up the content of your pages. font- and text- are separate CSS spaces, but because they are almost always used together in some way we have merged them into one tutorial. Because the amount of alterations you can make to your text is so large, we'll focus on some of the most useful and commonly used in this tutorial, and let you experiment with the rest if you want to make even more changes.

The attribute you will probably use most is color which is used to change the color of the font. You specify the color in any of the three ways (name, hex and RGB) you would specify a background color, which changes the color of the text. Here's a quick example:

<p style="color:red;">Example red text</p>

The second most common attribute you will be using is font-size which, as the name implies, changed the size of the text in the element. You can specify the size either as a percentage, a fixed pixel size or in "em" units, which are designed to display fonts at a consistent size across different displays. For example:

<p style="font-size: 110%">110% Font Size</p>
<p style="font-size: 14px">14px Font Size</p>
<p style="font-size: 0.8em">0.8em Font Size</p>

Using "em" measures for font-size should give you the most results, however the "em" measures are unique in that their display size is relative to the display size of the element which contains the element you are declaring the size for - so a paragraph with 0.8em text in a div with 1.5em text will display at a different size to so a paragraph with 0.8em text in a div with 1.2em text. There is also some inconsistencies across browsers, so be sure to test your pages across all major browsers if you are going to use "em" sizes for your declarations.

font-family allows you to specify the fonts the browser will use to specify the font the browser will use to render the text in the element on your page. Be careful - hard to read fonts will quickly turn users away from your website. The fonts will be chosen in the order they are specified if installed on the user's computer, and you should add one of sans-serif, serif or monospace as a generic font to fallback on:

p{ font-family: verdana, arial, sans-serif; }

This line of CSS will affect elements of type <p> and attempt to display their text is Verdana, then Arial, then a generic sans-serif font if neither are installed. Our recommendation on the font family would be to use these fonts (serif and monospace fonts can be hard to read, but useful in places), and possible Lucida Grande/Lucida Sans Unicode. If you really want to use different fonts and ensure that you can use them, CSS3 includes a @font-face directive which will let you use any (licensed) font on any browser which supports the CSS spec, giving you true cross browser fonts.

Fonts can have styling added to them with the font-weight and font-style properties. font-weight is specified either as a number between 100 (thinnest) and 900 (thickest) or as bold and bolder. font-style can be specified as either italic or oblique. Here are some examples:

<p style="font-weight:600;">Some bold text</p>
<p style="font-style:italic;">Some italic text</p>
<p style="font-style:oblique;">Some oblique text</p>

The text- properties in CSS are quite extensive (Here's a full list in the spec), so we'll just take a look at two of the most useful ones - text-decoration and text-align. We've looked at these in a way before: text-decoration was mentioned in our tutorial on links, and text-align has similar properties to the align attribute we looked at the in the HTML tutorials.

text-decoration can take five different properties: none, underline, overline, line-through (replaces the deprecated <strike>tag) and blink which is not supported by all browsers, and is frustrating for users so should be avoided. Here's the examples:

<p style="text-decoration: overline;">Overline</p>
<p style="text-decoration: underline;">Underline</p>
<p style="text-decoration: line-through;">Line-through</p>
<p style="text-decoration: blink;">Blink</p>

text-align can be set to left, right, center or justify, with left being the default. For examples of how these work, have a look at out HTML Paragraphs Tutorial. The effect is the same, but specified as a CSS property instead of a tag attribute.

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.