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?"
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.
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.
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.
