CSS: Cascading Style Sheets

Part One: controlling text

(in progress... adapted from wendypeck's tutorial which assumes you are hand-coding. I'm converting it to Dreamweaver... slowly...)

CSS is a system of coding endorsed by the World Wide Web Consortium (W3C) designed to separate the styling (colour, size, font face and much more) from the content text. W3C CSS main page and learning CSS pages

Originally html used font tags, but every time you needed a change, you had to specify a full new set of qualities for the text. Change back to the first style, and you had to fully redefine the text again. In fact just starting a new paragraph meant repeating the styling information in full. Early html required tags for every paragraph like this:

your actual content

more actual content

By comparison the body of the CSS content looks as simple as this:

your actual content

more actual content

Yet the two look similar when displayed by a CSS enabled browser, because the CSS file attached to the document is controlling the text. For the tag it looks like this:

p {
font-family: Courier New, Courier, monospace;
font-size: 12px;
color: #00FF00;
}

This can be included in the <head> section of your Web page, but if it is a separate .css file you can attach to lots of pages and update them all just by changing the .css that they obey.

For one paragraph, there seems little to be gained, but when you use the tag through a large site, the difference is dramatic. Suppose you have 15 pages, and decide that you made a mistake by using green text in the Courier font (#00FF00) and want to change it to Verdana in black (#000000). Using HTML font tags, you would have had a large job on your hands individually changing every paragraph on every page of your site. By using CSS with a separate external .css file that is attached to all your pages, you simply change it once in the CSS file, and every single paragraph on every page changes.

Now your css file looks like this:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

No matter how fancy CSS may get, this is the basic point. The real power, other than greatly reducing the amount of code in each page and getting it away from your actual content so that you can make sense of it, is the ability to experiment and change your mind (or make fast client-directed changes) because the control for the text is in a different place from the text itself. An important bonus is that this also improves accessibility for screen readers for the visually impaired.

CSS can do everything that the old font tags could, and introduces many improvements such as fine control over the amount of space between lines of type and the ability to turn off the underlining that is automatically applied by the browser when you make text into a link.

Creating and Linking a CSS file

Create a new document and save it with name a name you will understand, like firststyle.css The name doesn't matter as long as you don't use spaces or odd characters, nor even does the css extension in making it work. (I strongly recommend you always use a CSS extension on your CSS files ... it just makes sense so you will always know that file is a CSS stylesheet. I always store my CSS files in the main directory for a site, meaning the same place that my index.html file is found.)

Technically, you have just created your first style sheet. It's not much good yet, but it's there. Now you can link it. (Yes, I know what I am doing linking a blank style sheet ... trust me)

To tell the document where to find the CSS file, simply place the following code in the head of your document:

That's all you need to tell the doc where to find the text control before it loads the page. Use that same line of code on every page in your site.

Defining styles in the style sheet

In my mind, there are two different types of CSS style for text control. You can redefine HTML tags, like p and h1, h2, etc, and you can create independent styles. Redefining HTML is easiest, and always necessary, so start there.

Defining styles for HTML tags

To define the tag, in other words, your main content text, the syntax is as follows:

p {
whatever you want for specific font look
}

The curly brackets contain all the information you want to put in about the p tag. To define an h1 tag:

h1 {
whatever you want for specific font look
}

So ... to create a definition for a p tag, add the following code to your blank CSS file, and save the file:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

(There are ways to simplify and shorten code, but don't worry about that at this point. That will come once you are comfortable with the whole process.)

Any code in your document that has a tag, should now be Verdana, size 12 pixels, and black.

For your h1 tag, add the following to your style sheet and save.

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}

Any text in your doc that has an h1 tag will be Arial, 14pt and blue.

This pattern is used no matter what tag you redefine, from the h's all the way through to li and ul tags. How's that for simple?

Margins

As an add on, one that most people look for is the ability to set the margins for the document. You can do that with the body tag. If you want the margins for the document to be 0, or to go from edge to edge, the following addition to your style sheet will do the trick:

body {
margin: 0px;
}

Defining Independent Styles

This is where CSS is really useful.

You can only have one tag or <headline> tag per paragraph. That really gets in the way when you are trying to highlight just a few words in selected paragraphs. You might also want to define an entire area of a page with a style, so that borders go around an area, rather than a paragraph. That's easy with class styles. (You can add styles to div tags as well, but as divs are supposed to be unique on a page, it's generally better to use class styles when you are talking about controlling text.)

With class styles, you have total freedom. You can add them to any tag, including HTML tags, like the or <h1>, or table tags like <td> or <tr>, or just all by themselves in a tag.

First, you need to create a class style. Instead of using an HTML tag, you will use .(dot)name. Say you want to name a style "redtext" so you can turn the text in an area red with no other changes. (The style name is your choice.) To create this style, you enter the following into your style sheet file, and save the file.

.redtext {
color: #FF0000;
}

Now go to your document, create a paragraph of text. Change the p tag in that paragraph to the following:

The paragraph text should turn red.

Now create a new paragraph, but instead of adding the redtext style to the whole paragraph, add it only to a few words with the span tag:

Simple content text ready for control.

Simple content text ready for control.

In this case, only the words "content text" appear in red.

Links in CSS

When you want to control links on a whole page, you define the a tag in a slightly different way than regular css syntax, because you want to specify the color, and what the rollover effect will be, and how the link will look when the visitor has already been to that page. Here's how the styles look:

Basic Page Link Styles

This is your basic link style. In this case, blue with an underline.

a:link {
color: #000099;
text-decoration: underline;
}

This style is how your link will look when the visitor has already been to that page. Here, dark grey text. This must be placed ahead of the mouseover style in your style sheet to work properly.

a:visited {
color: #666666;
}

This is how the mouseover will look. Here I have specified no underline, with a light grey background. When the visitor moves their mouse over the link, only the background and underline will change.

a:hover {
text-decoration: none;
background-color: #CCCCCC;
}

What the visitor sees when they are actually clicking the link is the a:active colour and style

a:active {
text-decoration: none;
}

That set of styles changes the links on the whole page.

Specific Use Link Styles

What if you want the links in a certain section of your page to be different, like for menus? Well, you already know everything you need to know to do that. You can add link styles to your class style.

Create a class style called menu with the following specifics:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

Then add the link controls to the class style by stating the class, which is .menu in this case, and adding the link controls you used in the previous examples.

.menu a:link {
color: #336600;
text-decoration: none;
}

.menu a:visited {
color: #666666;
text-decoration: none;
}

.menu a:hover {
color: #990000;
text-decoration: none;
}

.menu a:active {
color: #666666;
text-decoration: none;
}

Now create a menu with the following code:

<a href="services.html">services</a> | <a href="products.html">products</a>
| <a href="company.html">company</a> | <a href="cotnact.html">contact</a>

Your results should be as follows. In this case, I applied the class style to the p tag, as the margins on this tutorial page are controlled by the p tag. The menu class style could be applied to your menu with a span tag ... that is how I usually create my menus. You should see green menu items, with black dividing bars (the link is just on the items, so the bars are controlled by the basic menu class style). When you mouseover, you should see a reddish brown on the menu items. If you click on any of these links, you will get a 404, but when you return, that link will be a grey color. But note that you still get the brown when you mouseover the visited link.