• skip to content
• contact
• style master site

style master css tutorial

More text properties

<< 5. page appearance | 7. class selectors >>

Justification

The text-align property controls the justification of text. It can take one of the following values, which hopefully should be pretty self explanatory to anyone who has ever used a word processor.

• left
• right
• center
• justify

Italicization

Here's another very straightforward property that I'm sure you can work out how to use in no time. The property is actually called font-style and the value you want to set it to is italic.

Have you been saving and checking in the browser as you go?

The letter-spacing property

Along with the basics we've seen so far, CSS also gives you properties that can suddenly make plain text appear quite stylish indeed. One that I like to use in particular for headings is letter-spacing. This property takes the same sorts of length values we saw for the font-size property. For letter-spacing though, instead of ems, I prefer to use pixels.

Check the effect in your browser: nice isn't it?

The text-decoration property

Now, what about level 2 headings - we haven't done anything to them yet. How about we keep it simple and just underline them. We do this using the text-decoration property. This can take any of the following values. Note that these aren't mutually exclusive: for example these's no reason why text can't be both underlined and overlined. If you ever use more than one value just separate them out using spaces.

• underline
• overline
• line-through
• blink
• none

OK, that's all the heading levels styled. Let's have a look at paragraphs.

Making text look clean

Stylish looking web sites do a couple of things to create their special appearance. Some of these are not always the 100% best solution in terms of accessibility, but this is a trade-off that will almost always be on your mind as a web designer. Use the following couple of techniques at your discretion.

One thing I like to do to really clean up the appearance of text is to fully justify it - so that each line stretches to fill the entire block - as text normally does in a book, a magazine or a newspaper. Try this effect and see whether you like it.

Did you work it out?

The line-height property

Look at the text in a browser window now. I think you'll agree it's a little difficult to read. The lines of text are very wide at the moment. That will change when we do the page layout in a little while, and this will have a very noticeable effect. But we're going to do something now as well that will also improve readability.

The line-height property, for those of you familiar with old typesetting terminology, is the equivalent of leading. It allows you to put more (or less for that matter) space between the lines of text than is the default for the font. You can use the usual length values that you've seen before for font-size and letter-spacing. If I'm using ems for font-size I like to also use ems for line-height. This way as the user's preferred font size increases the drawn font size and the space between the lines will increase proportionally to one another.

Once you're done check it out in the browser. Even on the too-wide page, it looks a lot better doesn't it? Be sure to watch what happens too as you increase and decrease the preferred font size. Of course, you'll want to experiment and develop your own preferences, but I find this combination (a font-size of .8em and a line-height of 1.7em) works really well.

Next we're going to style the footer at the bottom of our page, learning a new selector in the process.

<< 5. page appearance | 7. class selectors >>