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. |
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.
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.
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.
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.
<STYLE></STYLE
> tags just above the </HEAD>
tag in the tour2.htm file.
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. |
We are now ready to create our style rules.
This completes the style for the BODY tag. We do not need to change anything in the <BODY>
tag in the document.
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
|
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.
The bold class displays in the style list.
The style can now be applied in the document.
<SPAN class="bold">
HomeSite</SPAN>
, which you can find at..."You can set properties for the A selector, such as colors for active and visited links, but we will just accept the browser defaults.
There is no style for the image tag.
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.
We do not need to change anything in the <HR>
tag in the document.
There is no style for the Line Break tag.
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.
The selector should now read "P.red".
<P>
tag to <P class="red">
.Lastly, we will apply styles to our page's most complex element, the table.
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.
TD
from the HTML Element list.
The TD.top
style appears in the style list.
text-align
property, select center
. 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.
background-color
property, select LightGreen
. <TD class="top">.
We're almost done. We just need to define styles for the last table cell.
TD.bottom
class.
text-align
and font-weight
properties as you did in TD.top
. background-color
property, select LightBlue
. border-left
properties as you did in TD.top
. <TD class="bottom">.
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!