Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

complete css guide

<< why use css? | how do they work? >>

What is a style sheet?

Before we begin describing how style sheets work, and how you use them, we should first answer the simple question, "what is a style sheet?"

As we saw in the last section, the W3C has made two major CSS recommendations:

But what are these recommendations in technical terms? They are language specifications, which define a simple grammar or language. The grammar specifies what types of statement can be made within a style sheet. Or, more plainly, it tells you what you can say and how you can say it.

Proprietary CSS extensions

It's important to understand the difference here between what is in the recommendation and what is actually implemented in the various browsers. As we've talked about already, there are quite a few things that are in the specification but are not yet widely supported by browsers. There's no real harm in using features like this in your own work, as you know there is at least a commitment to their support at some time in the future. On the other hand, there are also a number of CSS-like proprietary extensions that may well "work" in a certain browser, but are not part of the CSS specification. Internet Explorer is the chief offender here. Less well known are a collection of Mozilla properties and values. These have been included in the code for the purposes of the Mozilla developers, who do not recommend you use them.

If you use Microsoft CSS extensions just be aware that they may not be supported by any browser other than Internet Explorer, and that there is no guarantee that they will be incorporated in future versions of the CSS specification. Our advice is to avoid them. For what it's worth, the following is a non-comprehensive list of Internet Explorer CSS extensions we have seen reference to. If you're in doubt about anything else you've come across, you can always do a quick check to see whether or not it is in the latest version of the CSS specification.

Microformats

Empowering your Markup for Web 2.0

Style Master developer John Allsopp tells you all you need to know about this exciting new approach to web development

CSS v HTML

So, at this level, a style sheet is simply a text file (which has a .css suffix), written according to the grammar defined in the CSS 1 or CSS 2 recommendations.

Here is a simple example.

body

{font-family: Verdana, "Minion Web", Helvetica, sans-serif;

font-size: 1em;

text-align: justify}

h1

{font-family: Verdana, sans-serif;

font-size: 1.3em}

code

{font-family: Courier, sans-serif;

font-size: 1em}

.note

{background-color: #003333;

border-width: thin;

border-color: black;

border-style: ridge;

color: white;

font-family: Verdana, Geneva, sans-serif;

font-size: .9em;

vertical-align: text-bottom}

Like an HTML document, a Cascading Style Sheet is just a simple text file. But unlike an HTML document, you don't need a special declaration at the top of the file to say that this is a style sheet. The name of the file should however end with a .css suffix.

In addition to being in .css files, style sheets can also be embedded into the <head> of HTML files. Later we'll take a closer look at linking and embedding style sheets, how to do it, what the difference is, and which is better.

<< why use css? | how do they work? >>

Style Master CSS Editor

Web Directions Conference