Here is the style sheet again:
font-family:Arial, Helvetica, sans-serif;
color: purple;
font-size: 12px;
background-color:yellow;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
color: red;
font-size: 16px;
}
A style sheet may be as simple as one defining how one HTML element (e.g. H1, P, BODY) should appear, or as complex as redefining every HTML tag and determining the exact position of each element appearing on each page as well as defining new classes for styling your text or other elements of your site. For now we'll be keeping it simple. The listing above shows a very simple style sheet, that supports this lesson only.
The first line:
means literally, I'm going to define something about how the body of each page will look (assuming that each page includes this style sheet, and that there is no overiding local style within the page. More about this in the next lesson).
The next four lines:
color: purple;
font-size: 12px;
background-color:yellow;
The first line tells our browser to display this font (font-family) as the default font within the <BODY>. The second line means make the default color of the text "purple". The third line means make the default text size 12 points (or pixels). The last line indicates that the contents of the <BODY> will have a default "yellow" background.
You may have noticed that I mentioned the word "default" for each of these lines. This means, that if nothing different is specified on the actual content page, then it will be shown (rendered, in browser-speak) with that property. CSS Lesson 2 will deal with some of these possibilities
Hopefully you can see how powerful this one small part of CSS is, and how much time (and frustration) it will save when you need to make those site-wide changes so often needed. If this isn't the case, let me know.