what exactly is a style sheet?
Before we begin describing how style sheets work, and how you use them, we should first answer the question, "what is a style sheet?"
You don't need to know what we discuss in this section to work with style sheets, but for completeness sake, you might like to spend a few minutes reading it. If not, and you are ready to jump right in, you can move on now.
What makes something a cascading style sheet?
As we saw in the last section, the W3C has made two major CSS recommendations:
- Cascading Style Sheets 1 (CSS1)
- Cascading Style Sheets 2 (CSS2) (which incorporates and extends CSS1.)
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.
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 CSS1 or CSS2 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 end with a .css suffix.
In addition to being in .css files, style sheets can also be embedded into the head element 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.
next: how do they work?
(C)1997-2001 Western Civilisation Pty. Ltd.