Adding style with CSS
Where are we?
You know what the structure of 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 page’s goals
Let’s look at how you can make your pages more attractive. By the end of this page, you should:
- Understand the elements of font styling.
- Be able to style text.
- Be able to change background colors.
- Know that 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:
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:
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:
Figure 3. Sans serif typeface
You can see that it doesn’t have those decorations.
Serif fonts can improve readability, because they provide an extra horizontal line through the text. However, this only works at large font sizes. At smaller sizes, the serifs can make these fonts difficult to read on a computer screen.
Many Web pages uses 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.
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. 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. The horizontal space is proportional to the actual width of the underlying character.
Serif fonts can be proportional. Compare the widths of the “i” and the “m” in Figure 2.
Figure 2 (again). Serif typeface
There are also “cursive” and “fantasy” typefaces. Here are some examples.
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 a 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 lots of ways of specifying font size: points, ems, and others. In this lesson, we’ll use pixels. A pixel is a dot on your screen.
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, the most important being italic and underlining. Some people like to use small caps for headings:
Figure 6. Small caps
Color
Color is a complex topic. We’ll talk more about it in the lesson 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:
Figure 7. Color sample
Colors have names and codes. The names won’t always work, so we’ll use the codes. Find a color you like, and cut-and-paste the color code. We’ll see how you can use the codes in a moment.
Styling fonts
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:
Figure 9. Page rendered
You can see the page.
Let me 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:
Figure 11. Styled page rendered
You can see the page.
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.
Let’s look at 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. That is, the <body> is the container of the <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 it 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. This is 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 noted 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.
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.
That’s what I did with this 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 named the class important_note.
Now I have two styles for <p> tags: regular style, and important_note 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>
Exercise: Style a joke
Make a page that looks like this:
Hints:
- I used the color gold from the color chart.
- I used only
<h1>and<p>in the<body>.
- I defined a class called
attributionfor the last line.
Upload your solution to your server. Put the URL below.
You can see my solution, but try it yourself before you look at the source code!
(Log in to enter your solution to this exercise.)
Font variants in CSS
Several different CSS properties set font variants.
font-style: italic;
No prizes for guessing what that does.
font-variant: small-caps;
Lowercase characters use the shape of uppercase characters, but at a smaller size. An interesting effect.
font-weight: bold;
I wonder what that does? Hmm… You can also use
bolderandlighter.
text-decoration: line-through;
Puts a
line through the text.
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):
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.
You can check my solution. Do the exercise yourself first, then compare your HTML code with mine.
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 usability by changing the readability of text.
But there are aesthetic aspects to fonts as well. Aesthetics is about the moods that fonts evoke.
Generally, you want to match the mood evoked by the font to the mood you want the content to evoke. Here are some headings for pages advertising different events.
Figure 12. Font moods
You can see which fonts match which events.
Overriding
Consider what the page looks like when it isn’t styled. Here it is again:
Figure 9 (again). Page rendered
The page’s background color is white. Why? That’s the default. Unless you override it, the browser will use the default.
The text is black. Why? That’s the default. Unless you override it, the browser will use the default.
So there are always style rules. If you don’t give style rules yourself, the browser uses the defaults. If you add CSS rules, your rules override the default.
Going deeper
The article Text spacing in CSS explains how to control the whitespace around letters, words, and lines.
The article Safe typefaces 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
On this page, 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?
Feeling overwhelmed?
