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.
A couple of details about where CSS comes from. The World Wide Web Consortium or W3C is a kind of United Nations of the web. By working with major stakeholders in the web (among them browser developers), W3C makes recommendations. These are like standards.
In the area of style sheets there are three W3C recommendations
The first two are important for the time being. These are what people are referring to when they say Cascading Style Sheets. CSS2 is a new W3C recommendation, as yet unsupported by major browsers.
So, what are these recommendations? Each of the above are a simple grammar
or language. The grammar defines what types of statement can be made within
a style sheet.
A style sheet is simply a text file, with the .css suffix, which is written
according to the grammar defined in the various recommendations.
Here is a simple example.
BODY
{font-family: verdana, "minion web", helvetica, sans-serif;
font-size: 10pt;
text-align: justify}
H1
{font-family: "soft hits";
font-size: 20pt}
CODE
{font-family: courier, sans-serif;
font-size: 10pt}
.more
{background-color: #003333;
border-width: 1px;
border-color: black;
border-style: ridge;
color: white;
font-family: verdana, geneva, sans-serif;
font-size: 9pt;
vertical-align: text-bottom}
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. And the file is just a simple text file. You should suffix style sheet file names with a .css suffix, (not even that is absolutely necessary with most browsers, but do it anyway).
In addition to being in .css files, style sheets can also be embedded into
the HEAD
of HTML files.
What matters is that the text (code) conforms to the correct grammar.
In this part we found out exactly what a style sheets is. It is simply a text based code that conforms to a specific grammar.
Next up, we look at what all the fuss is about, asking "why do we need style sheets?"