Cascading style sheets are not written in HTML. They have their own language, which I suppose is called "cascading style sheet language." Though you may be used to writing
in HTML, in a style sheet you will write<p><font face=arial color=magenta>...</font></p>
to achieve a similar effect. The critical difference is that the html font tags above apply to exactly the text which they enclose, whereas the latter "style rule" is meant to apply to all paragraphs in a given context, such as all paragraphs on a page. HTML and CSS know about one another, but they're distinct. Neither is superior to the other, since they are in a sense not comparable. They have different reasons for being, and they work well together.p {font-family: arial; color: magenta;}
To understand cascading style sheets, you may wish to work through the following tiny tutorial. You will need to make two files, one HTML and one CSS, and link them together. The important concept in using stylesheets is that the webpage content goes in one file, and the formatting goes in another.
Make a file called index.html. Put the following code (or something similar) in that file:
<html> <head> <title>Sample</title> </head> <body> <h1>Greetings</h1> <h2>Hi</h2> <p>That was English.</p> <h2>Bonjour</h2> <p>That was French.</p> <h2>Namascaram</h2> <p>That was Malayalam.</p> </body> </html>
Now make a file called core.css. (Just as index.html is the standard name for the home page of a website, core.css is the standard name for a style sheet.) Put the following text into your style sheet:
h1 {color: green;}
h2 {color:red;}
If you open index.html, you will not yet see the influence of the style sheet. That's because we haven't linked them together. You will link them now. Take care that both index.html and core.css are in the same folder on your computer. To link the two, you need to tell the html file that it should consult the style sheet for formatting. In order to do that, insert the following tag into the head section of index.html:
The only part of this link tag that changes is the href="whatever.css" part.<link type="text/css" rel="stylesheet" href="core.css">
If you open the file index.html now, you should see the effects of the style sheet:
| index.html | core.css |
<html> <head> <title>Sample</title> <link type="text/css" rel="stylesheet" href="core.css"> </head> <body> <h1>Greetings</h1> <h2>Hi</h2> <p>That was English.</p> <h2>Bonjour</h2> <p>That was French.</p> <h2>Namascaram</h2> <p>That was Malayalam.</p> </body> </html> |
h1 {color: green;}
h2 {color: red;}
|
 |
|
GreetingsHiThat was English. BonjourThat was French. NamascaramThat was Malayalam. |
|
We can alter the style sheet, without touching the underlying html, to change the appearance of the page dramatically:
body {font-family: courier new; background-color: mediumorchid;}
h1 {color: white; background-color: purple;}
h2 {color: purple; font-style: italic;}
p {font-size: 10pt; font-weight: bold; text-indent: 1cm;}
|
|
|
|
GreetingsHiThat was English. BonjourThat was French. NamascaramThat was Malayalam. |
|
A rule is a bit of a cascading style sheet that describes the formatting that should be applied to one or more elements of a given page. For example, a rule that would make the text of all <h1>'s green would look like this:
h1 {color: green;}
You can refer to colors not just by name but by their hex codes instead if you prefer. HTML color hex codes are combinations of six hexadecimal digits, where a hexadecimal digit is either one of the digits from 0 through 9 or a letter from A through F. The hex code for the HTML color "green" is 008000, so the style rule
h1 {color: 008000;}is equivalent to the style rule in the previous paragraph that uses the color name "green."
Furthermore, you can refer to colors by a trio of numbers using an RGB expression. Each of the three numbers in question must be in the range 0 to 255 inclusive. Since the RGB code for green is RGB(0,128,0), you can say
h1 {color: RGB(0,128,0);}This is a third way to say the same thing.
There are lots and lots of named colors available for web pages. Be forewarned that not every color name is known by every browser, and that not every color will appear nicely to someone viewing your page, depending on which combination of computer, video card, monitor and browser that person happens to be using. It is safer to use hex codes than names, because hex codes are always understood by every browser. Still, if you simply can't resist using "papyawhip," then go ahead. Life's too short. Here's a link to a big chart of HTML colors and their hex codes: click me.
You may wish to control not only the text color of some bit of your page, but also the background color of that same bit. Here's what you can say:
h1 {background-color: lime;}
Furthermore, there's nothing wrong with including more than one instruction in a given rule. The following is perfectly fine:
h1 {color: green; background-color: lime;}Let's apply this particular style rule to an h1 that says "I Like My Shoes":
Let's introduce some of the proper terminology. Here's a new example:
p {font-family: Courier New; text-indent: 1cm;}This example of a rule consists of a selector and two declarations. The selector is the h1, and the two declarations are
Let's consider the implications of that last statement: whitespace in a rule doesn't matter. Thus all of the following rules, regardless of the differences in the way they appear, are equivalent:
h1 {color: green; background-color: lime;}
h1 {
color: green;
background-color: lime;
}
h1 {although you'd have to be a little deranged to use the third one. The second format is actually fairly common since you can add declarations to the rule without increasing its length across the page.
color : green;
background-color:
lime
; }
Furthermore, a rule can contain multiple selectors separated by commas. Thus it is possible to use one rule to change the properties of two or more entities in individual rules:
h1, h2 {color: green; background-color: lime;}
h1, h2, h3, h4, h5, h6 {text-align: right;}
h1, p {font-family: arial;}
Once you more or less understand what cascading style sheets do and how to make them, your question becomes, "How do I say it?" The following chart of properties and values should be of some help. Please note that I have purposely left out some of the possible value choices for each property in order to simplify this presentation. If you want to know all there is to know, consult a more complete reference.
| Property | Values (Not Exhaustive) | Example |
|---|---|---|
| a name, hex code or RGB tuple representing a color | ||
| color | a name, hex code or RGB tuple representing a color; for text elements, color specifies the color of the text | |
| font-size | a size in the form of xpt, as in 12pt or 24pt | |
| font-style | normal or italic | |
| normal or bold | ||
| font-family | the name of a font, or one of the following generic family names: serif, sans-serif, cursive, fantasy, monospace | |
| margin-left | a length in cm or in em (em is literally the width of the letter "m") such as 2cm or 2em; this length effects every line of an element like a paragraph (compare text-indent below) | |
| text-align | left, center, right or justify | |
| text-indent | a length in cm or in em (em is literally the width of the letter "m") such as 2cm or 2em; this length effects only the first line of an element like a paragraph (compare margin-left above) |
That's just a small slice of what's available. For a more complete list, click here.
I found the following site helpful in preparing this page:
If you're looking for a book on CSS, I have reason to think Eric Meyer's Cascading Style Sheets: The Definitive Guide is an excellent one, although I have looked over the first chapter only (which the publishers make available on the web).
A big chart of named HTML colors and their hex codes: click me.
Adam Shaw, Department of Computer Science, The University of Chicago