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:
- Cascading Style Sheets 1 (CSS 1)
- Cascading Style Sheets 2 (CSS 2) (which incorporates and extends CSS 1.)
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.
- scrollbar-3dlight-color
- scrollbar-arrow-color
- scrollbar-base-color
- scrollbar-darkshadow-color
- scrollbar-face-color
- scrollbar-highlight-color
- scrollbar-shadow-color
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.