Dave's CSS Guide

Contents

Introduction to Cascading Style Sheets
Styles Overview
Paragraph Practice
Introducing Class
Headings
The <div> Tag
Using <span>
Classes Without Type Selectors
The Position Property (Layers)
Forms of Rules
Type Selector
Comma Separated Selectors
Semicolon Separated Declarations
Class Selector
Combined Selector (type, class)
Contextual Selectors
ID Attribute
Pseudo-class Selectors
Pseudo-element Selectors
The STYLE Attribute
LINKED Style Sheets
Appendix
Viewing This Document
Comment Tags in <style></style>
References

Introduction to Cascading Style Sheets

Style sheets describe how HTML documents are presented on screens. Cascading Style Sheets based on the CSS1 specification work to some degree with Netscape Navigator 4.x and Microsoft Internet Explorer 4.x browsers. Most of the code discussed here should work in Internet Explorer 3 as well. Before publishing to your server, your pages should be tested in browsers you expect your audience to be using. It is the intention of the authors1 of CSS1 that CSS code degrade gracefully in browsers that are not CSS capable.

This paper gives real-life examples of working code. It is based on Web Review's Safe Properties3 page. Studying books and documents about style sheets and trying to implement the code can be downright disappointing when the browser doesn't recognize perfectly legitimate code. The best bet is to restrict CSS usage to the attributes (properties), values, and units listed in Safe Properties.

Styles can be implemented as Inline (direct) Style Sheets, Embedded (global) Style Sheets, and as External (linked) Style Sheets. Inline styles affect a localized part of a document, such as a phrase of text. Embedded styles are declared at the top of the document and apply to the entire document. External style sheets are like embedded style sheets but are implemented on a separate page from the page using the styles.

What in the meant by Cascading and Style and Sheet in this context, anyway?

From Teach Yourself Dynamic HTML in a Week2, "The attribute (property) syntax for embedded and linked style sheets is somewhat different than standard HTML syntax. Attributes (properties) and their values are placed within curly brackets. Where HTML would use an equal (=) sign, a colon is used. Multiple attributes (properties) are separated by semicolons (;). Multiple attribute (property) values are separated by commas." Several attributes (properties) are hyphenated like this:

{font-style: arial, helvetica; margin-left}1

The parts of a style definition, also known as a declaration, are shown in the following figure:

A word about attributes and properties. "Attributes", sometimes accompanied by values, are the parameters used to modify HTML tags. For example:

p { text-align: center }

In this case, text-align is an attribute of the <p> tag (while center is its value). In the official CSS1 specification, attributes are known as properties. In the book by the CSS1 specification authors1, properties is used. Other authors2 use attributes. I'll use properties most of the time from here forward in this paper.

One more general notion to have under your belt before going on, and that is the distinction between block-level and line-level document content. Paragraphs and <body> content are examples of block-level content, while a part of a sentence that might fall within <i></i> tags is an example of line-level content. To add to (or to resolve) possible confusion, it's worthwhile noting that block-level content is also referred to as box content, while line-level content is also referred to as text content.

Styles Overview

This section presents examples of style sheet elements as they might find application in your documents. A more formal listing of CSS rules is found in the next section, Forms of Rules.

Paragraph Practice

Let's see how the example of the <p> tag above would appear with styles. A direct inline example would look like this:

<p style="text-align: center"></p>

There! That was easy. Here it is in action in an actual document called Paragraph Practice 1. (Use your Back button or better, your Alt and left arrow keys to get back to this spot.)

But if all your paragraphs needed to be centered, you would have to use this inline style over and over. An embedded style looks more complicated, but it can be set up once, then all paragraphs in the document would follow the style. The <style></style> tags are located within the <head></head> tags.

Comment tags (<!-- -->) are used so that browsers that are not <style> aware will not display the contents of the <style> container. Browsers that are style aware but not style capable do not display the contents of the <style> container. Browsers that are style aware ignore the comment tags within the <style> container.

<head>
<title>Paragraph Practice 2</title>
<style type="text/cuss">
<!--
  p {text-align: center}
-->
</style>
</head>
<body>
  

Notice that the style applied to the <p> tag follows the Diagram of a Rule figure, above. Note that the case of the parts of the rule is not important. I will use all lower case here for convenience and consistency. Let's see this in action in an actual document called Paragraph Practice 2. It's not much different, is it? In fact, the results are exactly the same! The difference is that we didn't have to annotate each <p> tag with the style. It was specified once only at the top of the document.

That was a great demo, but I'm not a fan of a lot of centered paragraphs. Let's left justify the paragraphs and make them text red, white (on a blue background) and blue. Here we can define each <p> tag inline, or we can define a variety of <p> tag properties in the style container at the top of the document. The inline variety would look like this:

<p style="color:red"></p>
<p style="color: white; background-color: blue" ></p>

<p style="color: blue"></p>

You can see the results in Paragraph Practice 3.

Introducing Class

Again, it is a tedious task to define each paragraph tag inline. We'll do some defining within the style container next, and will introduce the concept of class in doing so. First we'll define a number of <p> tag varieties in the style container at the top of the document. We'll change the font and left margin in a general definition for all paragraphs in the document, then make unique paragraph tag definitions for each of red, white, and blue.

After defining p, p.red, p.white, and p.blue, we can then assign those definitions to the individual paragraphs. Here's what it all looks like:

<head>
<title>Paragraph Practice 4</title>
</head>
<style type="text/css">
<!--
  p {font-family: verdana, arial, helvetica, sans-serif;
    margin-left: 20px}
  p.red {color: red}
  p.white {color: white;
    background-color: blue}
  p.blue {color: blue}
-->
</style>

<body>
<p class="red">All legislative Powers herein granted...</p>
<p class="white">Clause 1: The House of Representatives shall...</p>
<p class="blue">Clause 2: No Person shall be a Representative...</p>
</body>

The period separating the type selector from the class selector (the "p" from the "red") is known as a flag. This flag denotes a class selector.

Paragraph Practice 4 should reveal all. Voila! There's the text in it's red, white, and blue, neatly indented, and in Verdana font (if it's on your computer). You can see that the font and margin assignments made to the <p> tag in the style section above were applied to all paragraphs in the document.

Great! Now how about assigning properties to other HTML tags? You will have to take a look at the references below to see exactly what you can do with which tags, but generally the properties and values listed in the Safe Properties guide can be applied to the <h1-6>, <body> and <div> tags as well as the <p> tag. Of course, there will be only one <body> tag in the document. The <span> tag supports properties other than block-level properties. We'll look at <span> shortly.

Headings

It's obvious that there is only one <p> tag but that there are a number of heading tags. What if we want to assign a style to more than one heading level throughout the document? Here's where CSS comes in handy. Take a look:

<head>
<title>Paragraph Practice 4</title>
</head>
<style type="text/css">
<!--
H1, H2, H3 {
  color: #663300;
  background-color: #99FF99;
border-top-width: 4px; border-color: #CC3300; }
--> </style> <body> <h1>Article. I.</h1> <h2>Section 1.</h2> <h2>Section 1.</h2> </body>

How about that? Just line up the heading levels you want to apply a distinctive style to and CSS takes care of it, as you can see in Heading Practice 1. Again, you can get the actual code from the references cited here. In this case, I let Dreamweaver build the style code.

Notice that the properties of the heading tags are shown on separate lines. This is done for human readability. The browser doesn't care, as long as the properties and their values are within the curly brackets and separated by semicolons.

The <div> Tag

The <div> tag behaves like the paragraph tag except that the browser doesn't add space above and below its contents as it does with the <p> tag's contents. All the CSS properties and values on the Safe Properties page apply to <div> as they do to the <p> tag.

<head>
<title>Paragraph Practice 4</title>
</head> <style type="text/css">
<!--
div { font-family: verdana, arial, helvetica, sans-serif;
margin-left: 20px }
div.red {color: red}
div.white { color: white;
background-color: blue }
div.blue {color: blue} -->
</style> <body> <div class="red">All legislative Powers herein granted...</div>
<div class="white">Clause 1: The House of Representatives shall...</div>
<div class="blue">Clause 2: No Person shall be a Representative...</div>
</body>

The only changes in the Paragraph Practice 4 code for this example was to replace the <p> tags with <d> div tags. When you look at Division Practice 1 you can see that where two <div></div> containers (tag pairs) are above and below each other, the contents (paragraphs) have no spaces between them.

You'll find <div> handy for positioning tables and images on a page as well as for assigning properties to blocks of text. Surprisingly, the text-align property can be used with <div> for this purpose. You can see this in action at the tops of the practice pages where <div> is used to center the graphical banner.

<A HREF="DavesCSS.html"><DIV STYLE="text-align: center"><
IMG SRC="../../images/banner/css_banner.jpg" BORDER=0></DIV>
</A>
 

Using <span>

The <span> tag can be used to apply properties to a short passage of text within the document. The size of the passage can be one or more sentences, one or a number of words, or one or a number of individual characters.
<head>
<title>Span Practice 1</title>
</head> <style type="text/css">
<!-- span {font-family: verdana, arial, helvetica, sans-serif}
span.red {color: red}
span.white {color: white;
background-color: blue}
span.blue {color: blue} --> </style> <body> ...vested in a <span class="red">Congress</span> of the United States...
The <span class="white">House of Representatives</span> shall be
composed of...
No Person shall be a <span class="blue">Representative</span> who
shall not have...
</body>

Examining Span Practice 1, you'll see that the styles have been applied to individual words or a short phrase in this case. The general span style, the font-family definition, is applied to each selection while unique colors are applied to specific selections.

Classes Without Type Selectors

In the examples of using classes thus far, we have seen them defined (inside of the <style></style> tags) in the context of type selectors, which in this discussion is a fancy word for HTML tags. See the Rule diagram above. However, classes can be defined independent of defining them in terms of HTML tags. A case could be made for defining text properties, for example, which can be applied to paragraphs, divisions, or short text strings. Here is an example of class selectors and a possible application:

<head>
<title>Class Practice 1</title>
</head> <style type="text/css">
<!-- .sans { font-family: verdana, arial, helvetica, sans-serif color: #663300 } .red {color: red} .white { color: white; background-color: blue} .blue {color: blue} --> </style> <body>
<h2 class="sans">Article. I.</h2>
<p class="red">All legislative Powers herein granted...</p>
<p>Clause 1: The <span class="white">House of Representatives
</span> shall be composed of...</p>
<p>Clause 2: <span class="sans">No Person shall be a
<span class="blue">Representative</span> who shall not have
attained to the Age of twenty five Years</span>, and been...</p>
</body>

Whew! Take a look at Class Practice 1. We've applied the "sans" class to the <h2> tag and to some text in Clause 2. Nifty, eh? Not only that, but we've applied the "blue" class within the "sans" class in Clause 2. Notice how the nested class has precedence over its parent (the outer class).

The Position Property (Layers)

This property opens up exciting possibilities. In association with the <div> and <style> tags it allows you to place blocks of text or images anywhere on a page, and to stack them on top of each other in layers. In the first example, a paragraph is placed behind other content. Its text is made large and is set to a light gray so that it appears as a background. How do we do this? First take a look at the results in Position Practice 1. Note that the background text is not an image.

This code, generated by Dreamweaver, uses inline styles:

<head>
<title>Position Practice 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.preamble {  font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 24pt; font-style: italic; font-weight: bold; color: #EEEEEE} body { background-color: #ECFFFF} --> </style></head> <body bgcolor="#FFFFFF"> <div id="Layer9" style="position:absolute; left:33px; top:85px; width:24px; height:24px; z-index:9"><a href="DavesCSS.html#posn"> <img src="../../images/misc/a_left.gif" width="20" height="20" border="0"></a></div> <div id="Layer1" style="position:absolute; left:77px; top:21px;
width:283px; height:53px; z-index:2"><a href="../../../../index.html">
<img src="../../images/banner/css_banner.jpg" width="483" height="52" border="0"></a></div> <div id="Layer2" style="position:absolute; left:33px; top:118px;
width:119px; height:23px; z-index:3"> <h2>Article. I.</h2> </div> <div id="Layer3" style="position:absolute; left:33px; top:165px;
width:126px; height:27px; z-index:4"> <h3>Section 1. </h3> </div> <div id="Layer4" style="position:absolute; left:33px; top:211px;
width:575px; height:45px; z-index:5"> <p>All legislative Powers herein granted shall be vested in a Congress
of the United States, which shall consist of a Senate and House of
Representatives. </p> </div> <div id="Layer8" style="position:absolute; left:25px; top:99px;
width:575px; height:291px; z-index:1"> <p class="preamble">We the People of the United States, in Order to
form a more perfect Union, establish Justice, insure domestic
Tranquility, provide for the common defence, promote the general
Welfare, and secure the Blessings of Liberty to ourselves and our
Posterity, do ordain and establish this Constitution for the United
States of America. </p> </div> </body>

The position property describes a box, relative to the upper left corner of the document, that can contain text or images (or, for that matter, movies or other multimedia content). Note the very important style property and value, z-index:1. This is the key to the order in which layers (position containers) are stacked in the document. Layers 1 though 7 are assigned a z-index value of 2 through 9. Layer 8, which we are going to slide behind the other text, is assigned a z-index value of 1. So it's apparent that layers with lower z-index values will be behind, or underneath, layers with higher z-index values.

The code id="Layer8", while not necessary in this example, is a unique identifier for each layer. It is used in JavaScript code for mouse rollovers, for example.

Forms of Rules

Lie and Bos1 (page2 30 - 57) lay out various ways style rules can be constructed. We have already used some of these rule forms in our examples above. Here are the formats of the rules, along with examples of their application.

Type Selector

When the Type Selector is used, all instances in the document (page) of that type will have the style applied to it.

H1 { color: red }

In this case the style selector is the HTML tag of type H1. An example can be seen in our Introducing Class section in above.

p {font-family: verdana, arial, helvetica, sans-serif;
    margin-left: 20px}
  

Note that when type selectors are used in style definitions, the <> tags are omitted.

Comma Separated Selectors

H1, H2, H3 { font-style: bold }

This example is a case of Type Selector rule just above. In this case, the three heading levels are assigned the bold style. An example is seen in the Headings section.

H1, H2, H3 {
   color: #663300;
   background-color: #99FF99;
   border-top-width: 4px;
   border-color: #CC3300; }
 

Here, the color of the text is set to a chocolate brown, the text background is set to some sort of aqua color, and a four-pixel red-brown border is added to the top of the text.

Semicolon Separated Declarations

Remember, the declaration is the part of the rule that has the property and the value in it. A rule can have a number of declarations to keep from having to list the selector over and over for each declaration.

H1 {
  color: red;
  text-align: center }
  

We've already seen Semicolon Separated Declarations a number of times in this paper. Just above in Comma Separated Selectors is another example.

Class Selector

This selector is different from the Type Selector described in the three rule examples above in that a style can be defined to work with any (well, many, that is) HTML tags.

.BOLD { font-weight: bold }

In order to get this to work for us, we have to use the class attribute. "Attribute of what?", you say. First to come to mind are the <p>, <div>, and <span> tags. Remember, <div> is a block, or box element like <p> except that the browser does not force a space above and below the text within the <div> container. And that <span> is an inline tag used to set off some text within a paragraph, for example, to have a style applied to it.

Here is <span class="bold">some bold text</span>.

The class selector can be seen in action in Classes Without Type Selectors above:

.sans {
  font-family: verdana, arial, helvetica, sans-serif;
  color: #663300
  }

<h2 class="sans">Article. I.</h2>

We have assigned the style defined by the ".sans" class to this instance of the <h2> tag. We could have assigned the same style to the contents of the <p> tag or the <div> tag:

<p class="sans">Some sans serif text.</p>

<div class="sans">Some sans serif text.</div>

Combined Selector (type, class)

What if you wanted to apply different styles to, say, the <h1> tag in different places in your document? A more specific form of the class selector is the Combined selector. It employs the class selector we just reviewed immediately above, and adds the type selector to the resulting rule.

h1.red { color: red }
h1.white { color: white; background-color: blue }
h1.blue { color: blue }

An example of combined selector is given in Introducing Class, earlier in this paper.

Contextual Selectors

The situation could arise where you would like to emphasize (italicize) text within a heading but allow emphasized text to remain normal elsewhere in the document. The style rules below will assign a color to emphasized text within <h2> and <h3> tags while leaving alone <em> text appearing elsewhere:

h2 em { color: red }
h3 em { color: blue }

An example of how this code goes to work is shown below:

<head>
<title>Contextual Practice 1</title>
</head>
<!--
<style type="text/css">
  h2 em { color: red }
  h3 em { color: blue }
-->
</style>
<body>
<h2>Article. <em>I</em>.</h2>

<h3>Section <em>1</em>. </h3>

<P>All legislative Powers herein granted shall be vested in a
<em>Congress</em> of the United States, which shall consist of
a Senate and House of Representatives.</P>

You can see from reviewing the complete page, Contextual Practice 1, that the emphasized text is altered only in the context of the <h2> and <h3> tags. This could be done with lists inside of lists to color code a table of contents by outline level.

ID Attribute

The ID attribute is similar to the class attribute, but each ID value must be unique throughout the document.

<div id="Layer9" style="position:absolute; left:33px; top:85px; width:24px; height:24px; z-index:9"><a href="DavesCSS.html#posn"> <img src="../../images/misc/a_left.gif" width="20" height="20" border="0"></a></div>

Any element within the <body> can have an ID attribute, but the value of each one must be different. This is good for setting style rules on individual elements, such as layers created with the position:absolute declaration demonstrated in the The Position Property (Layers) section earlier. The example is rather extensive, so it won't be repeated here.

Pseudo-class Selectors

In HTML 4.0, only one tag uses pseudo-classes. That is the anchor tag:

A:VISITED { text-decoration: underlined }

In this case, the flag character is a semicolon, denoting that this is a pseudo-class, distinguishing it from a class. This class can be used to modify the way anchor links look in HTML documents. In this document, for example, the following is used:

<style type="text/css">
<!--

A:link      { text-decoration: none }
A:active    { text-decoration: none }
A:visited   { text-decoration: none }

-->
</style>

This has the effect of removing the underlines from the links. (Other values for text-decoration include underline and line-through.) Other font, text and color properties can be used here.

In the example above, the style applies to the entire HTML document. There is no mixing of underlined links and underlined links in a single document. However, an in line style attribute can be used to prevent a link from being underlined on a link by link basis. Here is example code:

<a style='text-decoration:none;' href="general/org/org.html">

Notice that the style attribute follows the <a and appears before the href attribute.

Pseudo-element Selectors

CSS1 has two pseudo-elements: first-line and first-letter.

P.INITIAL:FIRST-LINE {
	TEXT-TRANSFORM:UPPERCASE )

P.INITIAL:FIRST-LETTER {
	FONT-SIZE: 200%;
	FLOAT: LEFT )

In the first example above, the first line of paragraph text viewed in a browser would be displayed in upper case regardless of the width of the browser's window. In the second example, a drop cap would be formed. Unfortunately, neither Internet Explorer 4.x nor Netscape Navigator 4.x can process these elements.

The STYLE attribute

Near the beginning of this paper, as we got into Styles Overview, we saw the STYLE attribute in action. This attribute gives you a way to apply a style locally, inline, without having to declare it in the <style></style> container at the top of the document. The STYLE attribute could be used with the <body> tag to apply styles to the entire document.

<body STYLE="color: black; background: white">

Note that the curly brackets used in the embedded style sheet are replaced by quotation marks, but semicolons are still used to separate declarations.

LINKED Style Sheets

There can be occasions in your work where a number of pages will be organized so similarly that they can share the same styles. In these cases a linked style sheet can be used. A linked, or external, style sheet is a master style sheet stored in an external file. It contains only style rules. Normal HTML tags such as <html>, <head>, <body> and <style> are not used. The linked style sheet is saved with the .css file extension.

The document requiring the common styles points to the the linked style sheet with the <link> container.

From Webmonkey5, the link in the document can look like this:

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

The linked style sheet can contain code similar to the following:

P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}

Any of the styles discussed in the preceding sections can be used in the document just as though the style rules were embedded in the same document.

Here in Linked Style Sheets Practice is a full example of a document dependent on a linked style sheet. The style sheet file itself is not visible, so here is the code it contains:

<!-- This is a linked style sheet for prac_link.html -->

p.title    {
	text-align: center;
	font-weight: bold }
p.subtitle {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt }
div.center {
	text-align: center; }
td         {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;}
address    {
	font-family: Verdana, Arial, Helvetica, 'sans serif';
	font-size: 8pt;
	font-style: normal }

Appendix

Viewing This Document

This document and the associated documents should display properly for the most part in Navigator of Netscape Communicator 4.x and in Microsoft Internet Explorer 4.x browsers. It was designed to be viewed best when your browser is set to approximately a "page" width. If the browser is set to full screen on higher resolution monitors, paragraphs will be very wide and difficult to read.

Links to references within this document and to the example pages look like The <div> Tag and Paragraph Practice 1 while links to references external to this document are designed to appear like Safe Properties. The external links will be blue until visited then turn purple, while the internal references will always be black and bold.

Comment Tags in <style></style>

You'll notice that in the HTML for this document and in the example pages there are comment tags within the <style></style> container. These tags are placed there so that old browsers that do not recognize <style> tags will not print the contents within the <style> container. Browsers that do not recognize the <style> tag will ignore the tag but will display the <style> container's contents unless commented out. Browsers that recognize <style> but do not implement styles will not display the <style> tag or the container's content.

References

  1. Cascading Style Sheets: Designing for the Web, Håkon Wium Lie and Bert Bos, pg 31. Web site (extensive portions of book on-line).
  2. Teach Yourself Dynamic HTML in a Week, Bruce Campbell and Rick Darnell, pg 61, 81.
  3. Web Review Safe Properties page. Lists CSS properties and values supported by IE3, IE4, and Nav4.
  4. W3C Web Style Sheets. This is the style sheet page of the official HTML standards-setting body, World Wide Web Consortium.
  5. Style Sheets Page from 4.0 Specification. Style Sheets in HTML documents.
  6. Webmonkey Stylesheets. Hot Wired's Webmonkey site contains a number of style sheet tutorials and examples.
  7. Dreamweaver HTML editor by Macromedia includes Style Sheet support.
  8. TopStyle Nick Bradbury's cascading style sheet editor for Windows.

 


Home | About Us | Contact | Site Map | Services | Gallery | Resources

© 2001 - 2005 David R. McKeen
Techno Imaging