CSS Tutorial - Chapter 6: Text formatting

Now that we've established what CSS is and how to use it on our pages, we'll start looking at what we can do with it. Since the most basic part of the majority of web pages is their textual content, I will start by detailing the most commonly used methods (note: not all methods) for formatting and changing the appearance of text.

Choosing the font

The first thing we often want to decide is whether to go with the default font of the browser or set our own. The best way to set our own font is by using the font-family property. One clever thing about font-family is that it allows us to set a list of several fonts in one declaration. This is so that the browser will have something to fall back on if the first font isn't found in the visitors computer, and provides an excellent way to accomodate for example both PC and Mac settings.

For example, Helvetica is a common Mac equivalent of the Arial font on a Windows PC. To cover both in the body of our document, we could set it up like this:

body{ font-family: Arial, Helvetica, sans-serif; }

You'll notice I also added the general font family type "sans-serif" at the end, as a "last resort" option so the browser at least gets the general idea of what we want in case neither of the two other named fonts are found.

Setting a font size

Setting the font size is taken care of, quite logically, by the font-size property. Web font sizes and their different units can be a bit of a jungle though since they come in both pixels (px), points (pt), percent (%) and something called em's (em). I will talk more about this in a separate chapter, but for now we'll just settle for adding a font size of 14 screen pixels to our previous body declaration:

  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;

Font style - Italic text

To show the text italicized ("leaning" to the right) we would use the font-style property. Font-style can also be set to "oblique" which is a very similar style to italic, but not as widely supported.

We probably would never want all the text in our body to be shown as italic, so let's create a class for that instead:

  font-style: italic;

This class can then be applied to any element we would like to display italic text, like in this little HTML example below:

Let's print some <span class="italicize">italic text!</span>

Also, to "reset" an already italic setting, you can use font-style: normal;

Font weight - Bold text

To make our text bold, the font-weight property is used. Just like font-style had other options than the "italic", font-weight also has options besides just "bold" such as "bolder", "lighter", or a series of specific number values to achieve exactly the effect we want. It is however mostly just used to set things "bold" like in this new class example:

  font-weight: bold;

As with the example for font-style, font-weight also has a "normal" resetting option.

Text colors

Text color in CSS can be set either in English predefined names such as "red", "green" or "blue", but they can also be more precisely defined through either something known as "hex values", or as "rgb values" for Red, Green and Blue.

Hex values is really only the hexadecimal (a 16 based number system) equivalent to RGB. If you want to learn more about hex numbers I must refer you to Google, since that is way outside of our scope here. To conclude the text color section, let's just whip up this quick example on the different ways of setting colors:

.redText{ color: red; }

.blueText{ color: #0000ff; }

.greenText{ color: rgb(0, 255, 0); }

Remember to be careful with setting too crazy color variations though, since such changes can more easily annoy than add anything of value. Keep in mind that intense red colors should for example be avoided in plain text since they have come to be synonymous with warning or error messages, just as blue is often expected to be a link.

Text decorations - Underline, Blink etc

The last thing we're going to touch on is the text-decoration property. It is mostly used to "underline" text in the way that most web links are. It can also be used to "overline" or "line-through" the text, and even make it "blink" but these are all much less common and rarely if ever used.

The following little class demonstrates the underline function:

  text-decoration: underline;

If you want neither of the text-decoration options, "none" is used to reset this value.

More chapters are on their way but they are unfortunately not finished yet.

< Previous: The CSS file

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl