Attractive Web-Site Design

Use Cascading Style Sheets to create a consistent, attractive Web-site design.

Although Netscape's and Microsoft's DHTML disagreements are causing the public--especially developers--plenty of headaches, thankfully both companies implement Cascading Style Sheets (CSS) similarly. Because CSS is the cornerstone of DHTML, we'd be in a real mess if they weren't compatible. The real problems arise from the fact that each browser uses different object models to link Web-page objects and scripts together. Ideally, there would be just one way to talk to the objects on a page. For that reason--not to mention the fact that CSS is easier to learn than DHTML--CSS will be adopted at a much faster rate than its interactive sibling.

Learning CSS is like learning HTML: It seems odd at first, but once you master the basics, it's just a matter of tuning your technique. If you don't know HTML, you need to learn it before tackling CSS. Just as DHTML depends on stylesheets, so do stylesheets depend on HTML.

The cascading in CSS derives its name from the way a style cascades down from the general to the specific. Think of parents passing on traits to their kids; though the kids can still control their own destiny. Elements (like paragraphs or footers) inherit properties from stylesheets (parents), though you can customize or override them. We'll show you how to do this in this section, which is designed to help you learn to start building pages that use stylesheets.

CSS 101
Let's start with some of the basics of working with CSS. A style is simply a collection of display and positioning attributes that a Web author defines. For example, a style could specify 24-point, bold, blue Arial with a 1-point green border, hovering 50 pixels down from the top of the screen.

Every style gets a name, such as H1 or bibliography or ListBullets. If the style's name is the same as a valid HTML element (or tag), then the style is automatically applied to every instance of that element.

If you give a style a name that doesn't correspond to an HTML tag, you must apply the style manually wherever you want it to appear. You do this by modifying an existing tag in your document or creating a new one. For instance, to apply a bibliography style, you might modify a paragraph tag to read <P CLASS="bibliography">.

For the record, what we're calling styles in this article are technically rules, which consist of two parts: a selector and a declaration.

.selector { declaration }

The selector always precedes the curly braces and the declaration consists of everything between them. The selector will be used as a name later when you apply the style. The declaration is made up of a series of properties and their associated values, separated by semicolons.

.puppy { size:dinky; annoying:usually; collar:black; fur-decoration:spotted; }

Not all values work with all properties, though. For instance, in the example above, the property "size" can never take the value "brown," although "collar" could take the property "spotted." Print out a CSS properties chart for future reference. At www.htmlhelp.com/reference/css/, you'll find a good, W3C-sanctioned list of all these new values and properties.

Your Basic Style
The simplest way to use styles is to apply them to existing HTML tags. Start by declaring a style in your document, ideally, inside the <HEAD>

<STYLE TYPE="text/css">  </STYLE>

The styles you defined will apply automatically to all instances of <H3> and <BLOCKQUOTE> throughout your document. You didn't have to use these tags-- you could have chosen LI, IMG, B, or any other valid HTML tag.

Notice the STYLE TYPE= declaration (MIME type) and the comment tags surrounding your style. It's important to use those comment tags to keep older browsers from displaying this data on-screen. This technique, by the way, is known as embedding a stylesheet.

Most CSS properties apply to most HTML tags. If they don't, the browser ignores them. Check out www.htmlhelp.com/reference/css/.

Using external stylesheets

Styles can live in external documents, in the head of the current document, or you can insert them on the spot. Each technique uses slightly different syntax, though. For example, you can create an external stylesheet by adding a few global styles to a blank text document, as in the screen above. Then save the file as sitestyle.css. In one of your site's documents, insert the following HTML code inside the header:

<LINK REL=StyleSheet HREF="sitestyle.css" TYPE="text/css" TITLE="Test Style">

The document will automatically use the BODY and H3 styles declared in the external CSS file. You can have multiple global stylesheets on your site and call different ones from different documents.

Roll your own
It won't be long before you'll want to apply styles to page elements that aren't necessarily associated with preexisting HTML tags. No problem, as only two things change. First, you must preface your selector (Danger, in this example) with a period.

.Danger {position:relative; color:beige; border:4ptlightgreen dotted; left:35pt; background-image:url(back.image.gif); text-align:center; height:50pt; width:420pt; font-size:20pt; font-weight:bold }

Second, you must attach the style to elements manually. For instance, what if you want to highlight only two words in a paragraph with the Danger class? The <SPAN> element was invented for just this reason, to surround arbitrary chunks of text and apply styles to it. Your HTML would then look like this:

<P>As she saw the bucket coming down on my head she yelled, <SPAN CLASS=Danger> "Look out!"</SPAN>

The natural order
Because of the nature of inheritance, and because you can link to multiple external stylesheets from one document, there are bound to be conflicts to resolve. The most important thing to remember when CSS isn't doing what you want it to do is this: Go from the general to the specific. Here's a trick question: In what color will the text in <H3> below appear in a 4.0 browser?

<STYLE TYPE="text/css">  </STYLE> </HEAD> <H3><FONT COLOR="Blue"> This is not a love song! </FONT> </H3>

The answer: Blue. That's because the font color instructions are closer to the affected text than the CSS-controlled H3. Proximity to the affected content always wins .

Bend the rules
The rules of priority and inheritance make good sense, but there are bound to be times when you want to override them and make a parent or warring style win. To do that, just add ! important to the end of the style, and it'll whip any competition:

H1 {color: teal ! important; }

Distinguishing DIV from SPAN
As you dig into stylesheets, you'll notice these two unfamiliar tags appear frequently. SPAN was invented solely so CSS users would have a nondestructive place to hang their attributes; DIV has existed for a while. It's used to demarcate the presence of any kind of new object on a page. The biggest difference between them is that DIV is a block-level element and implies a line break, whereas SPAN does not affect the flow of the page.

Turn off underlining
Most HTML authors have at some point wondered how to turn off hyperlink underlining. Until now, that's been impossible. With stylesheets, it's as easy as attaching "text-decoration: none" to an Anchor style, like this:

A:link {color: cornsilk; text-decoration: none}

The thin blue line
To add a touch of design to an otherwise text-heavy page, surround a few paragraphs with a thin, color border to set them off. To add this to all your paragraphs, create a style in your document header (see example below) and then just use your normal <P> tags.

P { border-style:solid; border-width:thin; border-color:blue; }

Nail it down
In HTML, the position of any object--text, graphic, or multimedia component--is relative to the rest of the page's structure. If you add a paragraph to your intro, your prize graphic could end up below the fold--out of eyesight on the first page view. CSS changes all that, not just by letting you state every object's exact location (in pixels, inches, or points), but also by letting you hammer it into place for good. Give an object an absolute position, and it will be there, no matter what other text or graphics are competing for that spot. Here's how to do this:

.OurLogo { position:absolute; left:2in; top:2in; width:3in; height:3in; }

Stack 'em up
So if you can nail down objects, what happens when you try and put two objects in one place on the screen? Objects simply stack up on top of one another quite gracefully. The default stacking order says that the first item laid down will land on the bottom of the pile, and the last will be on top. But you can change the stacking order by altering the "z-index" attribute as follows:

<DIV CLASS="pile" ID="image1" STYLE="z-index: 3"> <DIV CLASS="heap" ID="image2" STYLE="z-index: 2">

In this example, image1 is on the bottom and image2 is on the top. You can use any integer (positive or negative) for your z-index, but the highest number will always come out on the bottom and the lowest on top. Try letting a few objects overlap just slightly for some fascinating design effects.

Let your light shine through
Stacked objects can look great, if you plan properly, because your objects' native transparencies are respected. Letters can be seen through transparent .GIFs and vice versa. If that's not exactly what you had in mind, don't forget you also have control over the background properties for every rule. These backgrounds are all valid:

H1 { background-color: #000080; } .OurLogo { background-color: transparent; } BODY { background-image: url(/images/foo.gif); }

Magic static backgrounds
When a page scrolls, everything on that page scrolls with it, right? Not necessarily. With CSS, you simply tag the fixed argument to an object to make that object hold its position on the page, even as text and images scroll past or over it. Here's how:

BODY { background : cyan url(your_image.gif) fixed }

It's the "fixed" part that nails things down. This, of course, will work with anything that takes a background.

Don't break older browsers
CSS was designed to integrate seamlessly with existing HTML, so it won't break old browsers. Still, it's possible to create CSS pages that look terrible in older browsers. The trick to is to build your pages in straight HTML using a 3.0 or earlier browser. Then apply your styles to that document and fine-tune it. Older browsers will ignore new tags they don't understand, and the CSS syntax will override the existing HTML, as long as you apply your styles in the right order.

css consistent web-site design design Style Sheets