About CSS

CSS is the abbreviation for Cascading Style Sheet. A style sheet simply holds a collection of rules that we define to enable us to manipulate our web pages.

CSS can be applied to our pages in many ways, however the most powerful way to employ CSS rules is from an external cascading style sheet. When used in this manner the full power of CSS can be brought to control the design and appearance of our work from a single controlling location, which makes it easy to update our site on a global basis.

It would be foolish, impracticable and probably impossible to write an article that covers all aspects of CSS. What I would like to do is take you on a journey, a journey that will begin with the simple things. We will look at how CSS rules are structured and how we can optimize our style sheets by using shorthand within our rules. We'll investigate many aspects of CSS throughout our journey. I hope you stick along for the ride.

Creating Cascading Style Sheets

Does that sound complicated? Well if it does, nothing could be further from the truth. A css file is merely a text file with a .css extension, it's as simple as that! We can create the file in DreamweaverMX or in something as simple as Notepad, it really doesn't matter.

There are dedicated CSS editors out there. My favourite CSS tool is TopStyle which, unfortunately, is only available for the Windows platform. It is a first rate CSS editor and I highly recommend it. If you're working on a Mac, take a look at http://www.westciv.com/style_master/, I have not used it but it should be worth a look as a TopStyle alternative. To be fair to DreamweaverMX, its CSS panel is greatly enhanced over previous versions but Dreamweaver is not a dedicated CSS editor, it just does CSS editing as well.

For the purpose of this section we'll create our .css file using Notepad rather than DreamweaverMX. I'm taking this route because Dreamweaver tends to hide things behind its CSS Panel and I want you to see the CSS rules as they are written.

I also want to teach you how to write your own rules and the declarations that they hold, this will help you to learn the syntax of CSS. If you understand the syntax it's easy to make corrections to your styles when needed. If you are working along and using a Mac, SimpleText is available on OS9 and TextEdit will be your choice on OSX.

Let's Begin

Create a folder in C:\ or wherever you wish. If you are going to follow this series of tutorials you may want to name the folder to associate it with CSS. You can then make sub folders within it to work along through the series.

Open Notepad and in the "File name:" box delete the default info and type mycss.css. Save the file in your folder.

To check that the mycss.css file has been correctly saved, go to the file menu in Notepad and click open, in the "Files of type:" drop list select "All Files" and you should be able to see your mycss.css file. It's an empty file but it is a CSS file and it's just waiting for you to bring it to life by adding content to it.

Our First CSS Rule

What is a CSS rule? A CSS rule is simply a statement that consists of a selector and a declaration. Let's look at this a little more closely. We'll begin by looking at the h1 tag. The default size of an h1 tag would make it virtually unusable, it's huge! With our CSS rule we'll change the tag to make it take on a totally different appearance. This is known as "redefining" the tag. The great advantage in redefining tags is that you maintain the structure of your document. This is important as not everyone uses a visual browser. Think of the visually impaired - the browser that they use will need to read your document and the h1 tag will let it know the value of the text it is reading, but that's for much later!

Right, back to our h1 tag, type the following into your text editor:

h1{
font-family: Georgia, "Times New Roman", Times, serif;
} 

The rule above can be broke down into two sections, the selector, which is the h1 tag, and the declaration, which is everything between the curly brackets, (parentheses).

We have just created our first rule. We will want to add to this rule in a little while, but for now let's stop and evaluate what is what and what we have declared

h1 

This is the selector, this rule will therefore be implemented on every occurrence of the h1 tag on every page our mycss.css file is linked to.

font-family:

This section of the declaration is known as the property, the property ends with a colon.

Georgia, "Times New Roman", Times, serif;

This section is known as the value, the value begins after the property and ends with a semi colon. The final value of the last property in your rule does not have to be closed with a semi-colon, but I find it preferable to close it. It does not cause a problem in any way to close the final value and IMHO it makes sense to keep our work consistent. So, throughout all the CSS work we do here we will close the final value of each rule with the semi-colon.

You will notice that we have declared a font-family. The family contains three fonts and a font type, namely serif. The browser will read your style sheet and the first font choice will be used if it's available on the user's machine, if it's not available then the browser will look for the second choice and then the third if the second is not available. Finally, if none of our declared fonts are available, the browser will implement the default serif font on the user's machine. This at least gives us the correct font type and ensures the headings wont be rendered with, for example, Verdana which is a sans serif font.

You will notice that each font is separated by a comma and if you look carefully you will also notice that Times New Roman is surrounded by quotes. This is necessary if the font name consists of more than one word.

So, we have successfully redefined the h1 tag so that our choice of font is used. Let's move on again and investigate how we can resize the h1 tag to suit our needs. Add the font-size declaration as shown below.

h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
}

We have added the property of font-size and given it a value of 15px, very straight forward and not a lot to explain there. However the sizing of fonts and the unit of measurement used to size them is a much debated subject!

I would stay away from "points" as a unit of measurement. They are for print and should remain so. I like pixels for their consistency but they have a major drawback in that any visually impaired person using IE on the Windows platform cannot resize the text, which may leave them unable to read the information on your site, not very helpful! I would recommend you look at the size options. You could use ems or a percentage value. I would also recommend you test thoroughly in various browsers whatever your choice. No guarantees are given that one browser will render them the same as another. Yes I know, same old story.....

Let's move on from the font-size debate - it has the potential to rattle on for some time to come - and let's add a color to our h1 tag.

h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
color: #666666;
}

By adding the new property of color and giving it a value of #666666 we are giving the h1 tag a dark gray color. With the color added we have a functional h1 tag that covers all the basics. We have:

• Added our choice of font
• Added our desired font size
• Given the h1 tag our chosen color.

We redefined the appearance of the h1 tag. We have changed its default appearance and manipulated it to suit our requirements.

In the next section we'll open DreamweaverMX, create an index page and attach the style sheet so we can see our redefined h1 tag in the browser.