Adding style with CSS

Where are we?

You know what the structure of a Web page is, and how to use some simple tags to add content. But the pages you’ve created so far are, well, plain. Time to fix that.

This page is about typography, the way that text looks.

This lesson’s goals

By the end of this lesson, you should:

  • Understand the elements of font styling.
  • Be able to style text.
  • Be able to change background colors.
  • Know how typography affects the mood of text.

Elements of fonts

Most people use the word “font” in an imprecise way, without understanding all the different things that go together to make up a font. That’s OK, but when you do Web work, it helps to understand the pieces.

The font of a character depends on its typeface, weight, variation, color, and other things. Let’s look at the main properties.

Typeface

Typeface is what many people mean when they talk about fonts. Typeface is the basic shape of a character. The shape is modified with bolding, underlining, and other things, to create fonts.

Here are some common typefaces on a Windows PC:

Typefaces

Figure 1. Typefaces

One way typefaces differ is whether they are serif or sans serif. Times New Roman is a serif typeface. Let’s zoom in on a word:

Serif typeface

Figure 2. Serif typeface

You can see that there are decorations on the characters. The decorations are called serifs.

Arial is a sans serif typeface. “Sans” means “without.” Let’s zoom in on a word:

Sans serif typeface

Figure 3. Sans serif typeface

You can see that it doesn’t have those decorations.

Serif fonts can improve readability, because they give your eyes extra horizontal lines through the text. However, this only works at medium to large font sizes. At smaller sizes, the serifs can make these fonts difficult to read on a computer screen.

Many Web pages use sans serif fonts for regular body text. Serif fonts, if used at all, are reserved for headings.

So one way typefaces differ is whether they are serif or sans serif.

Another way they differ is whether they are fixed or proportional.

Fixed vs. proportional

Figure 4. Fixed vs. proportional

On the top line, each character takes the same amount of horizontal space. The “l” and the “o” in “love,” for example, have the same width. The typeface has serifs on the l to make it wider. This is a fixed typeface, or fixed space typeface.

On the bottom line, the “l” in “love” takes less horizontal space than the “o.” This is a proportional typeface.

Serif fonts can be proportional. Compare the widths of the “i” and the “m” in Figure 2.

Serif typeface

Figure 2 (again). Serif typeface

There are also “cursive” and “fantasy” typefaces. Here are some examples.

Cursive and fantasy typefaces

Figure 5. Cursive and fantasy typefaces

You wouldn’t use them for large blocks of text. They’re for headings and other things you want to draw attention to.

The typefaces in Figure 1 are for Windows. Macs and Linux machines don’t always have the same typefaces. So if you use Windows typefaces on a Web page, the page might not look right on a Mac. We’ll see how to deal with this later.

It’s not worth being picky about the correct use of the words “font” and “typeface,” because most people don’t know or care about the difference. I use the term “font” mostly, even when I’m talking about typefaces. I only use “typeface” when I need to be precise.

Size

There are many ways of specifying font size: points, ems, and others. We’ll use pixels; it’s the simplest thing to do. A pixel is a dot on your screen. We’ll talk more about pixels later.

I find 14 pixels to be a good base size.

Here’s some text in different sizes.

Font size: 10px.

Font size: 14px.

Font size: 18px.

Font size: 24px.

Font size: 48px.

Weight

Weight refers to how bold the font is. Most people stick to two choices: bold and normal.

Variations

There are other font variations. Some people like to use small caps for headings:

Small caps

Figure 6. Small caps

Color

Color is a complex topic. We’ll talk more about it in the chapter on images. For now, just know that there are some common color codes you can use on the Web.

You can see a color chart. Here’s a sample:

Color sample

Figure 7. Color sample

Colors have names and codes. The names won’t always work, so we’ll use the codes. You could try to work out the codes yourself. But most people find a color they like on a color chart, and copy-and-paste the color code.

Styling fonts

You’ve seen how fonts vary, with different typefaces, weight, size, color, and so on. How do you actually get those effects on the screen?

Here’s a page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A page</title>
  </head>
  <body>
    <h1>A page</h1>
    <p>This is a page.</p>
    <p>It is <strong>not</strong> a dog.</p>
    <h2>This is subheading.</h2>
    <p>That subheading is not a dog, either.</p>
  </body>
</html>

Figure 8. A page with no styling

It looks like this is my browser:

Page rendered

Figure 9. Page rendered

You can see the page in your browser.

Let’s add some new stuff to the <head> of the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A page</title>
    <style type="text/css">
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #F5F5DC;
      }
      h1 {
        color: #660000;
      }
      h2 {
        color: #006600;
      }
      p.important_note {
        color: red;
        font-weight: bold;
        font-variant: small-caps;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>A page</h1>
    <p>This is a page.</p>
    <p>It is <strong>not</strong> a dog.</p>
    <h2>This is subheading.</h2>
    <p class="important_note">That subheading is not a dog, either.</p>
  </body>
</html>

Figure 10. Styled page

It looks like this:

Styled page rendered

Figure 11. Styled page rendered

You can see the page in your browser.

Lines 6 to 24 tell the browser that I want to change the way the page looks. The technology for this is called CSS, for cascading style sheets. Lines 7 to 23 are called a style sheet.

A style sheet uses rules. The syntax of the rules is not the same as HTML tags. The official standards for CSS are separate from the official standards for HTML.

Here’s the first rule:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   background-color: #F5F5DC;
}

This part:

body {

is a selector. It tells the browser what the rule applies to.

This rule applies to the <body> tag, which includes all of the content of the page. The <body> is the container of the page’s <h1>, <h2>, and <p> tags. Rules applied to containers apply to their contents as well.

font-family changes the typeface:

font-family: Arial, Helvetica, sans-serif;

Recall that different computers have different typefaces installed. Arial is a standard Windows typeface. But what if the user has a Linux machine? There’s a good chance that the computer won’t have Arial.

In that case, the browser goes down the list, and chooses the first typeface that is installed on the machine. So, the browser will look for Arial first. If that isn’t on the computer, the browser will look for Helvetica. That’s a standard Mac typeface. If the browser can’t find that either, it will look for sans-serif. This isn’t an actual typeface, but instead tells the browser “use the system’s default sans serif typeface, whatever it is.”

If a typeface name contains spaces, you need to put quotes around it, like this:

font-family: "Trebuchet MS", Helvetica, sans-serif;

Here’s that rule again:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   background-color: #F5F5DC;
}

We’ve talked about the first bit, the font-family.

The next style is:

font-size: 14px;

This sets the page’s default font size to 14 pixels. Some tags will adjust this. <h1> will choose something bigger, for example.

The last style in the body rule is:

background-color: #F5F5DC;

This sets the background color on the page. Where did that strange code come from, the #F5F5DC? I started by looking at the color chart. I found a color I wanted – beige – and wrote down its color code. Then I used the code as the background-color.

Let’s look at the stylesheet again:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A page</title>
    <style type="text/css">
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #F5F5DC;
      }
      h1 {
        color: #660000;
      }
      h2 {
        color: #006600;
      }
      p.important_note {
        color: red;
        font-weight: bold;
        font-variant: small-caps;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>A page</h1>
    <p>This is a page.</p>
    <p>It is <strong>not</strong> a dog.</p>
    <h2>This is subheading.</h2>
    <p class="important_note">That subheading is not a dog, either.</p>
  </body>
</html>

Figure 10 (again). Styled page

We covered the body rule in lines 7 to 11. It was a long discussion, because everything was new.

The next rule is:

h1 {
   color: #660000;
}

The rule applies to all <h1> tags on the page. It leaves everything alone (typeface, weight, etc.), except for the color. 660000 is a dark red that I like for headers, so I used it here.

The next rule is:

h2 {
   color: #006600;
}

Like the previous one, it just changes a tag’s color, this time to a dark green. All of the <h2>s on the page will be dark green.

The last rule is a little different. Sometimes you want to give text on a page a special look. For example, you might want all <p> text to look the same, except when you want to draw the user’s attention to something special. Maybe you want text like “On sale! Today only!” to stand out.

Here’s the rule:

p.important_note {
   color: red;
   font-weight: bold;
   font-variant: small-caps;
   font-style: italic;
}

The period (.) after the p creates a CSS class. A class is a rule that I can apply selectively. I can use it on some <p>s, and not others.

The class is named important_note. I made up that name. I could have called it read_me_now, or something else.

Now I have two styles for <p> tags: the regular style, and the important_note style. I choose when I want to use one with the class attribute of the <p> tag. For instance:

<p>It is <strong>not</strong> a dog.</p>
<p class="important_note">That subheading is not a dog, either.</p>

The first paragraph uses the regular style. The second applies the important_note class.

You can also define classes like this:

.important_note {
   color: red;
   font-weight: bold;
   font-variant: small-caps;
   font-style: italic;
}

The p is gone from the selector. You can apply this class to any tag. E.g.:

<h2 class="important_note">Warning! Cat detected!</h2>

Renata
Renata

All of the style rules are inside these lines:

<style type="text/css">
...
</style>

Do I have to include those?

Kieran
Kieran

Yes. <style> is an HTML tag. It tells the browser that you’re going to be adding some style rules. Don’t forget the </style> tag.

Exercise: Style a joke

Make a page that looks like this:

Styled dog joke

Hints:

  • I used the color gold from the color chart.
  • I used only <h1> and <p> in the <body>.
  • I defined a class called attribution for the last line.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Font types in CSS

Several different CSS properties set font types. Sometimes you use font-style:

font-style: italic;

No prizes for guessing what that does.

Sometimes you use font-variant:

font-variant: small-caps;

Lowercase characters use the shape of uppercase characters, but at a smaller size. An interesting effect.

Sometimes you use font-weight:

font-weight: bold;

I wonder what that does? Hmm… You can also use bolder and lighter.

Sometimes you use text-decoration:

text-decoration: line-through;

Puts a line through the text.

When I want to, say, put a line through some text, I often forget whether I need to use text-decoration, font-variant, or something else. I look it up. A good place to start is the SitePoint reference.

Text alignment

Left alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Right alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Center alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


There’s only one property here:

text-align: left;

... or right or center. That’s it. For example:

h1 {
   text-align: center;
}

... would center all <h1>s.

Here’s another example:

p.aside {
   text-align: right;
}

This creates a class called aside. Use it like this:

<p class="aside">Dogs are cool!</p>

Here’s how it renders:

Dogs are cool!

Exercise: Report template

Make a Web page that’s a template for company reports. Here’s a screenshot (made narrow to fit):

Report template

Figure 1. Report template

The typeface is Verdana. The color for the background is #FFFFCC. The heading colors are #660000 and #006600. The font is 14px high.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Aesthetics

We’ve looked at the many different ways you can control typography. They affect how readable the text is.

But there are aesthetic aspects to fonts as well. Aesthetics is about the moods that fonts evoke. At least that’s how I’ll use the term.

Match the mood of a font to the text. Here are some headings for pages advertising different events.

Font moods

Figure 12. Font moods

You can see which fonts match which events.

Going deeper

  • Text spacing in CSS. This article explains how to control the whitespace around letters, words, and lines.
  • Safe typefaces. This article lists typefaces that are available on Windows, Macs, and Linux machines. It explains that you can create graphics to include unusual fonts in your Web pages.

Summary

In this lesson, you learned about fonts, and how to style them with CSS. You learned to use classes to apply different styles to different page elements.

What now?

There are a lot of options with CSS. You can do almost anything!


How to...

Lessons

User login

Log in problems? Try here


Dogs