A Beginner’s Palette of Styling Options
We’ve looked at some examples of styles that can be applied to your web pages through CSS, but the examples we’ve seen have been a mixed bag (and deliberately so). There are so many more from which you can pick and choose — too many possibilities, in fact, for us to be able to list them all here. However, this section lists some of the basic properties and values with which you might like to experiment. Feel free to try any of these in your CSS file. Note that we’ll be adding to this list in subsequent chapters; it’s by no means exhaustive!
color, background-color
As we’ve seen, both of these properties can take color keywords (e.g. red
, blue
, or green
) or hexadecimal color specifications such as #ff0000
.
font-family
This property takes a list of font names, containing any fonts you choose in order of preference. Be sure to provide options that users are likely to have on their computers (e.g. Arial, Verdana, etc.). This list should end using one of the “generic” CSS fonts such as serif
or sans-serif
, which any browser that supports CSS will recognize.
font-size
This property can be any one of the following:
font size keywords
-
xx-small
-
x-small
-
small
-
medium
-
large
-
x-large
-
xx-large
relative font sizes
-
a percentage (e.g.
140%
) -
em units (e.g.
1.2em
;1em
is equal to the height of the M font character)
fixed font sizes
-
pixels (e.g.
20px
) -
points (e.g.
12pt
, as you may be used to using in Microsoft Word)
Fixed font sizes are not always a great idea, as they cannot easily be scaled up or down to suit the reader’s needs. Relative font sizes are definitely the preferred option.
font-weight
bold or normal
font-style
normal or italic
text-decoration
none, underline
, overline
, or line-through
Tip: Backing It Up!
Before you experiment using the CSS properties above, it might be an idea to make a backup of your CSS file, just in case you run into difficulties. Remember that you can download all the examples used in this chapter from the code archive if you accidentally mangle your CSS file. If this happens, don’t worry! It’s all part of the learning process, and you can be sure that no animals will be harmed in the process.
Recap: the Style Story so Far
Let’s allow ourselves a moment to reflect. Our site now boasts a CSS file using a selection of attractive styles. We’re in the enviable position of being able to change the site at a whim by altering just that one CSS file. Let’s try styling some more of the elements on our web pages.
Changing the Emphasis
- Open
about.html
in your text editor. - Find the paragraph about meeting up in a local pub and add an emphasis element as shown here:
<p>And when we're not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p> - Save the page, then view it in your web browser; it should appear as shown below. As you can see, emphasis elements appear in italics by default. We’re going to use CSS to change that default style.
- Open
style1.css
(if you haven’t already opened it for editing) and add the following rule below the others:em {
font-style: normal;
text-transform: uppercase;
} -
Save the CSS file, then refresh your browser’s view of the About Us page. Does your page look like the figure below?
Now, whenever you add an em
element to any web page of your site (assuming that page is linked to style1.css
), the emphasized text will appear in capital letters, not italics. But this raises an interesting point: when should you override a browser’s default style for one of your own choosing? Presumably, the default styles that browsers use were selected carefully; how can you be sure that redefining the styles is a good idea? Aren’t italics a suitable style for emphasis? They probably are. As they say in the Spider-Man film, “With great power comes great responsibility,” so be sure to exercise caution. Just because you can change a default style doesn’t always mean you should.
Perhaps a compromise is in order. Let’s change the emphasis so that it’s still italic, but also appears in uppercase letters. All we need to do is remove the font-style
declaration; the em
element will then revert to its default italicized appearance, as depicted below:
em {
text-transform: uppercase;
}
Tip: Emphasis or Italics?
You might well be asking yourself, “If I want an italic font, can’t I use an italic element?” In fact, HTML provides an i
element for just this purpose, but its use isn’t recommended. Why not? Well, marking text as i
says nothing about its meaning; i
only communicates how it should be presented on the screen. Such elements are referred to as presentational HTML elements, and they should be avoided. Likewise, the b
element (for bold), another old HTML element, should not be used. The preferred option is to use strong
or, if you just want to display headings in bold, use CSS.
Why is this important? It might not seem a big deal as you look at the italicized text in your web browser. But imagine if you were blind, and you used software that read web pages aloud to you, instead of displaying them on the screen. This program (called a screen reader) might read text marked up with an em
element using slight emphasis, and text marked up with strong
in a more powerful voice (though this, of course, depends on the screen reader being used). But what would it do with text marked up with i
or b
? Well, these elements say nothing about the meaning of the text, so it would not treat them in any special way — thus potentially losing the meaning that you were trying to convey. A search engine (e.g. Google, Yahoo) may also place more importance on a user’s search terms that appear within a strong
element than a b
element (although the search engine companies never give anything solid away about how their search algorithms work!).
One other presentational tag that you might see others use, but should never copy, is the u
element. Wrap this around some text and needless underlining occurs that only serves to confuse users. This is because in web pages, underlined text normally signifies a link — which the u
element most definitely isn’t!