Using CSS to Enhance Your Pages

Basic HTML is easy to write, but it creates pages that are dull. Modern browsers support cascading style sheets (CSS) elements, which allow you to specify how to display a particular tag. Entire books have been written about CSS, but the basic ideas are reasonably simple. You can define a style, which is a set of formatting rules, and attach it to various elements in your pages. An example will help clear things up.

Creating a Local Style

Figure 1.6 illustrates a Web page with some features that are not available in normal HTML.

Figure 1.6: I used CSS to define the special styles shown on this page.

The H2 tag does not normally generate blue text, but I added a style to the text to make it blue. The code for the blue headline looks like this:

<h2 style = "color:blue">
This H2 has a custom style turning it blue
</h2>

I added a style attribute to the <h2> tag. This style attribute has a number of options that can be set. The color option allows you to assign a color to a style. The object which uses that style will appear in that color.

There are many other style options available. The larger paragraph in Figure 1.6 uses a number of other style elements. The code for that paragraph appears below:

<p style = "color:red;
            background-color: yellow;
            font-family: 'comic sans ms';
            font-size: 20pt;
            border-width: 10px;
            border-style: groove;
            border-color: green">

This paragraph has a custom style. The custom style adds
characteristics such as background color and border that aren't
ordinarily available in HTML. Also, the font size can be specified in points by specifying pt in
the font size.
</p>

You can see that this paragraph tag has a more complex style attribute with a number of elements. Each element has a name and a value separated by a colon; the elements are separated by semicolons. A list of the most commonly used style elements is shown in Table 1.2.

Table 1.2: COMMON CSS ELEMENTS
Element	Description	Possible values
Color	Foreground color	Valid color names (blue), hex color values (0000FF)
Background-color	Background color	Valid color names, hex color values
Font-family	Font to show	Font name must be installed on client computer
Font size	Size of font	Can be described in pixels (px), points (pt), centimeters (cm), or inches (in)
Border-width	Size of border	Usually measured in pixels (px), centimeters(cm) or inches (in)
Border-style	How border will be drawn	Some choices are groove, double, ridge, solid, inset, outset
Border-color	Color of border	Valid color names (blue), hex color values (0000FF)

Page-Level Styles

Although it is sometimes convenient to attach a style directly to an HTML element, sometimes you wish to modify a number of elements in a particular page. You can specify the default styles of several of your elements by adding a style to your document. Figure 1.7 shows a page using a page-level style.

Figure 1.7: The H1 style has been defined for the entire page, as well as two kinds of paragraph styles.

You can apply CSS styles to any HTML entity you wish. In practice, many Web authors prefer to use the span and div elements for custom CSS work. The span tag has basically no characteristics of its own. This makes it very predictable, because the CSS style will define essentially everything about the text within the span element. The div element is similar. It is sometimes used in place of span as a "generic" element suitable for adding CSS to. The div element acts like a paragraph in most instances, and the span element can work inside a paragraph.

With page-level styles, you use a <style></style> segment in your document header to specify how each listed tag should be displayed. The code for the pageStyle.html page illustrates how a page-level style sheet can be created.

<html>
<head>
<style type = "text/css">
h1 {
  text-align:center;
  color:green;
  border-color:red;
  border-style:double;
  border-size: 3px
}

p {
  background-color: yellow;
  font-family: monospace
}
p.cursive {
  background-color: yellow;
  font-family: cursive
}

</style>


<title>Page-Level Styles</title>
</head>
<body>
<h1>Page-Level Styles</h1>
<h1>This is an h1 element</h1>

<p>This is a paragraph</p>

<p class = cursive>
This is a cursive paragraph
</p>
</body>
</html>

If you look at the main body of the page, you'll see that it looks pretty much like normal HTML code (because it is). The interesting part of this page is the code between the <style> and </style> tags. This code describes how the various tags should be displayed. Your opening tag should read <style type = "text/css"> to specify you're using an ordinary style sheet. Inside the style element, you list each tag you wish to define. After the tag name, encase the various stylistic elements in a pair of braces ({}). The style elements are listed just like in the style attribute. Each element consists of a name/value pair. A colon(:) separates the name and value, and each pair is separated by a semicolon(;).

TRICK

Like most HTML programming, the style element is not picky about where you have spaces or carriage returns. However, judicious use of these "white space" elements can make your code much easier to read and modify. Notice how I lined up each element so they were easy to read, and how I lined up the closing brace(}) directly under the HTML element's name, so I could easily see how the various parts of code are related. You'll see the same kind of attention to indentation throughout your programming career.

Notice the second paragraph element, which looks like this:

p.cursive {
  background-color: yellow;
  font-family: cursive
}

By adding a period and another name (in this case, .cursive) to the HTML element's name, I was able to create a second type of paragraph tag. You can create as many variations of a tag as you wish. This is especially handy if you want to have varying text styles. You might want to have one kind of paragraph for quotes, for example, and another type for ordinary text. To use the special form of the tag, just use the class attribute in the HTML, as I did in the following text:

<p class = cursive>
This is a cursive paragraph
</p>

External Style Sheets

Most Web browsers support a third kind of style sheet, called the external style sheet. Figure 1.8 illustrates a page using an external style sheet.

Figure 1.8: External style sheets look just like other styles to the user, but they have advantages for the programmer.

The user cannot tell what type of style sheet was used without looking at the code. Although the external style example looks much like the page-level style sheet program, the underlying code is different. Here is the code for externStyle.html:

<html>
<head>
<link rel="stylesheet"
      type="text/css"
      href = "externStyle.css">


<title>External Styles</title>
</head>
<body>
<h1>External Styles</h1>
<h1>This is an h1 element</h1>

<p>This is a paragraph</p>

<p class = cursive>
This is a cursive paragraph
</p>
</body>
</html>

The main code is identical to that in the pageLevel program, but notice that the style sheet is not embedded directly into the document. Instead, the style is stored in another file called externStyle.css. The contents of this file are the exact same style rules used in the earlier page.

h1 {
  text-align:center;
  color:green;
  border-color:red;
  border-style:double;
  border-size: 3px
}

p {
  background-color: yellow;
  font-family: monospace
}

p.cursive {
  background-color: yellow;
  font-family: cursive
}

When you have the CSS rules stored in a separate file, you can use the link tag to import the CSS rules. The advantage of this approach is you can re-use one set of CSS rules for many pages.

IN THE REAL WORLD

External style sheets are very useful when you are working on a project that must be consistent across many pages. Most sites go through several iterations, and it could be a real pain to change the font color in 20 pages every time the client wants to try some new variation. If all your style rules are stored in one CSS document and all your pages refer to that document, you only have to change the style rules one time, and you've automatically changed the appearance of every page that uses that set of rules.