O'Reilly logo

Using Google App Engine by Charles Severance

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Specifying Styles Using CSS

When the browser reads and renders HTML, it has a set of built-in formatting rules for visually presenting various tags. For example, text within an anchor tag, <a>, is underlined and colored blue or purple (depending on whether the link has already been visited). The overall document is rendered in a Times Roman font.

Most of these default style choices date back to the early 1990s—and frankly, they’re downright ugly. Before CSS, we would be tempted to add <font> and other tags throughout the HTML to override the default styles of the browsers. This clutter makes the HTML increasingly complex, hard to read, hard to maintain, and far less parsable for screen readers.

CSS gives us a lot of control over the look and feel of the document with little or no changes to the HTML, as shown in Figure 2-9.

Improving layout using CSS

Figure 2-9. Improving layout using CSS

Next, we’ll look at ways to change the styling of our document with no changes to the HTML. In the rest of the chapter, we’ll transform the presentation of our HTML from nasty to classy, all without making any changes to our HTML.

Styling Tags with CSS

The syntax of a CSS rule is very different from the syntax of HTML markup. This is an example of a CSS rule:

body {
  font-family: arial, sans-serif;
}

Each CSS rules starts with a selector. The selector determines which part of the document this particular rule affects. The selector ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required