Learn HTML and CSS: An Absolute Beginner’s Guide Article

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.

    Using emphasis to set type to italics by default

  • 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?

    Changing the emphasis to capitalized text from italics

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;                
}

Emphasis displayed as uppercase italics

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!

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.