Cascading Style Sheets Tutorial

For this tutorial, we will produce the same Archaeology Tours page layout as the HTML tags tutorial, but we will substitute style properties for tag attributes. We will use the Style Editor to create a <STYLE> block, and then insert it at the top of the document.

Cascading Style Sheets can be quite complex and there are a number of browser compatibility issues involved with their use. This tutorial covers the basics. It is intended as an introduction to style sheet terminology and methodology, and an opportunity to gain some hands-on experience with the HomeSite Style Editor.

Before you begin, you might want to acquaint yourself with HomeSite's Style Editor. It is described in "Formatting Pages with Cascading Style Sheets".


Tip

For best results, preview your work in Internet Explorer, version 4.0 or greater.


What are Cascading Style Sheets?

Cascading Style Sheets evolved as a response to the explosion of Internet content and the demand for a technology to help people create and maintain Web sites with a lot of pages and complex page layouts. They enable you to specify a format for page elements such as paragraphs and tables, and then specify where these formats apply.

You can create a style block (also called embedded styles) in a single HTML page to apply the formats to a single block of HTML code; or you can create a separate .css file and apply its formats across multiple documents in a Web site. At whatever level you specify styles, the styles "cascade" down to apply to all lower levels as well. For example, a style block in the <HEAD> section applies to the whole HTML document; a style block in a <TABLE> tag applies to the entire contents of the table. When there's more than one style block, the "local" style rules; in the above example, the table styles would override the head styles for the contents of the table.

You could set a single style for each page element, but the real power of styles is that you can use a class to create and apply a virtually unlimited library of design ideas. A class is a subset of a page element; for example, you could define subsets of the paragraph tag for introductory text, important notes, and contact information, and define a different style for each.

Why use style sheets?

Using style sheets is a lot more work than using tag attributes-for a single page. But for a quality Web site with many pages, styles is the only viable option. That's a bold statement, so let's enumerate the reasons to use stylesheets.

Using styles to set font faces, colors, alignment, and other attributes ensures a consistent look and feel throughout the Web site, even with multiple contributors. This makes it easier for visitors to find what they are looking for.

Another advantage of formatting pages with style sheets is that it reduces the amount of code required to format each page, so the pages can be downloaded and read by the browser more quickly.

An additional and powerful capability is the use of scripts to manipulate styles and other document objects. The combination of styles, scripting, and HTML is known as Dynamic HTML (DHTML). If you want to work with DHTML, there are many print and Web references available on the subject.

Finally, style sheets are a Web designer's dream because they allow you to make rapid and dramatic changes to all HTML elements in a Web site. You can reference a style sheet by adding a single attribute to the <HEAD> tag and, by doing so, immediately change the look of the entire page. This means you can quickly and easily preview text, color, and layout designs-a great help when prototyping and redesigning sites. Imagine the alternative: changing every formatting tag (for example <FONT> and <P ALIGN = "CENTER">) in every page!

However, there are a number of browser inconsistencies that limit the full and unrestricted implementation of Cascading Style Sheets, as well as scripts and certain HTML elements. To prove it, just take a look at the completed tour_style.htm file in Netscape Navigator. You need to be aware of how best to use these technologies in your site. It comes down to deciding which browsers and which browser versions you will support, and then informing yourself about cross-browser design strategies.

As we complete the tutorial, keep in mind that as great as style sheets can be, they do have some restrictions.

Style syntax

The basic coding requirements for styles are:

These requirements apply to both embedded styles and separate stylesheet files. To use embedded styles, see "Creating a style block". To use a stylesheet file, create the file and then add the following right before the </HEAD> tag:

<link rel="STYLESHEET" type="text/css" href="[path to stylesheet]">
Example: <link rel="STYLESHEET" type="text/css" href="/css/news.css">

The Style Editor automatically formats the style code correctly, but if you edit styles manually, you need to follow these syntax requirements. The Style Editor's color-coding feature makes it easy to identify the various style elements.

Creating a style block

To keep things simple, we will use embedded styles instead of creating and referencing a separate style sheet file. To embed styles you need to add a style tag to a page. Start by opening the file /tutorial files/tour2.htm and reviewing the HTML code. Notice that most of the attribute code from tour.htm has been removed, leaving just the structural elements-<BODY>, <P>, <H1>, <TABLE>, <UL>-and some content. Removing the formatting attributes and tags is an essential first step.

To make the code easier to follow, the stripped attributes are shown in code comments (<!-- -->) above each tag on the page. The browser skips these comments when rendering the page, so they do not affect the page formatting.

Click the Browse tab to see what the page looks like at this point.

We will begin by entering a <STYLE> block in the <HEAD> section of the document, so the styles will apply to the whole HTML page. We could also add a style block in the <BODY> section to affect only a portion of the page, for example a frame in a frameset. Then we will open the Style Editor and work our way through the page code, inserting new style rules once they are completed.

To add a style block to a document:

  1. Type <STYLE></STYLE> tags just above the </HEAD> tag in the tour2.htm file.
  2. Click the Style Editor button on the Tools toolbar.

HomeSite uses the TopStyle Lite CSS editor (versions 2.1 or 2.5) from Bradbury Software. It has a specialized user interface to simplify creating and editing style sheets. It uses the terms selector and properties. A selector is a tag, for example <P>; and a property is a tag attribute, for example ALIGN="CENTER".

As a general procedure, to convert tag-based formatting to styles, we will choose a selector (tag) in the Style Editor and add properties (tag attributes).


Note

For more information about TopStyle features and CSS, see the TopStyle online Help.


Defining formatting styles

We are now ready to create our style rules.

BODY style

To add BODY properties:

  1. In TopStyle, click the New Selector button on the toolbar to open the New Selector dialog.

  2. Select BODY from the HTML Element list and click OK.
  3. Click background-image on the Style Inspector Properties tab.
  4. Open the drop-down Value list and click Select URL.
  5. Double-click the file \tutorial files\image1.jpg to add it to the BODY selector.
  6. Scroll down the Property tab to the Color property and select Navy from the drop-down Value list.

This completes the style for the BODY tag. We do not need to change anything in the <BODY> tag in the document.

Bold style, with class!

Standard HTML uses tags such as <B>, <EM>, and <STRONG> to highlight text. With styles, you set special formatting for words (or characters) by enclosing them in the <SPAN></SPAN> tag and applying styles. For formatting paragraphs and larger content blocks, use the <DIV></DIV> tag.


Note

<SPAN> and <DIV> tags are not compliant with HTML version 3.2 and earlier.


We might want to use bold formatting in different situations, not just for a specific selector, so we will define a class for the bold property that can be applied wherever we need it. We will explore using classes in several sections of the page.

To create a stand-alone class:

  1. Click the New Selector button.
  2. Select (none) from the HTML Element list.
  3. Click the Class button, enter the word bold in the text box, and click OK.

    The bold class displays in the style list.

  4. Click font-weight in the Property tab.
  5. Select bold from the Value list.

    The style can now be applied in the document.

  6. In the tour_style file, enter the style code so that the line reads "This page was created with <SPAN class="bold">HomeSite</SPAN>, which you can find at..."

Anchor style

You can set properties for the A selector, such as colors for active and visited links, but we will just accept the browser defaults.

Image style

There is no style for the image tag.

Heading style

The Heading 1 tag uses the default font size set by the browser. For the font color, since we specified a font color for the BODY tag, and the Heading 1 tag is inside the BODY tag, the font color is the same as in the BODY style.

However, we need to center the heading, so we will add a style for that.

To add Header 1 properties:

  1. Click the New Selector button.
  2. Select H1 from the HTML Element list and click OK.
  3. Select the text-align property from the Properties tab and select center.

Horizontal Rule style

To add horizontal rule properties:

  1. Click the New Selector button.
  2. Select HR from the HTML Element list and click OK.
  3. Select the width property and enter the value 80%.
  4. Select the color property and the value navy.

We do not need to change anything in the <HR> tag in the document.

Line Break style

There is no style for the Line Break tag.

Paragraph style

As we saw in the bold formatting procedure above, we can create a standalone class and apply it to different selectors. Here, we will create a class just for the <P> selector.

To create a special paragraph class:

  1. Click the New Selector button.
  2. Select P from the HTML Element list.
  3. Click the Class button, enter "red" in the text box, and click OK.

    The selector should now read "P.red".

  4. For the color property, select the value Maroon.
  5. For the text-align property, select the value center.
  6. For the font-family property, first select Font, double-click Arial in the Font Builder dialog, and click OK.
  7. For the font-size property, select the x-large value.
  8. To apply the style to the paragraph in the document, change the <P> tag to
    <P class="red">.

Table style

Lastly, we will apply styles to our page's most complex element, the table.

To add a table style:

  1. Click the New Selector button.
  2. Select TABLE from the HTML Element list.
  3. For the padding property, enter 3px and press Enter.

We will leave the CELLSPACING attribute as is in the document. We do not need to change anything in the <TABLE> tag.

No styles are needed for the table row <TR> tag, the first table data <TD> tag, the list elements, or the paragraph that follows.

To learn about special style rules for tables, see the "Tables and Style Sheets" topic in the online HTML Reference.

To add a table data style:

  1. Click the New Selector button and select TD from the HTML Element list.
  2. Click the Class button, enter "top" in the text box, and click OK.

    The TD.top style appears in the style list.

  3. For the text-align property, select center.
  4. For the font-weight property, select bold.

    Since all the text in the table cell is bold, we do not need to wrap it in a <SPAN> tag.

  5. For the background-color property, select LightGreen.
  6. In the tour_style file, edit the cell code to read <TD class="top">.

We're almost done. We just need to define styles for the last table cell.

To add additional table data styles:

  1. Click the New Selector button and create a TD.bottom class.
  2. Apply the same text-align and font-weight properties as you did in TD.top.
  3. For the background-color property, select LightBlue.
  4. Apply the same border-left properties as you did in TD.top.
  5. In the tour_style file, edit cell code to read <TD class="bottom">.

The complete style block code

Before you insert your style block into the document, compare it to the completed code here to make sure you've got everything.

<STYLE>
BODY {
  background : url("image1.jpg");
  color : Navy;
}
HR {
  width : 80%;
  color : Navy;
}
.bold {
  font-weight : bold;
}
P.red {
  color : Maroon;
  text-align : center;
  font-family : Arial;
  font-size : x-large;
}
TABLE {
  padding : 3px;
  border : 0;
}
TD.top {
  text-align : center;
  font-weight : bold;
  background-color : LightGreen;
}
TD.bottom {
  text-align : center;
  font-weight : bold;
  background-color : LightBlue;
}
</STYLE>  

When your style block is completed, copy it from the Style Editor and paste it inside the <STYLE></STYLE> tags in the <HEAD> section of the tour2.htm file. Save the file and click the Browse tab.

It looks pretty close to the original, right? If you really want to dig into style sheet coding, you can try to get the page to display properly in Netscape Navigator!

Comments