Changes since original version:
Version 1.01 - Small proofreading done; clarifications added.
Version 1.02 - Added section on multiple external style sheets.
Version 1.03 - Added section on importing style sheets.
Version 1.04 - Added section on CSS comments.
Version 1.05 - Modified section on importing style sheets.
Version 1.06 - Added info on pseudo-classes; corrected terminology.
Note: This tutorial assumes you are familiar with at least basic knowledge of HTML.
QuestionWhat is CSS?
AnswerCSS is short for "Cascading Style sheets". It is a method of formatting text when building HTML Web Pages. Using multiple style sheets will cause them to "cascade", hence the name.
QuestionWhy should I use CSS?
AnswerThere are two very important reasons. The first is that it replaces deprecated tags. Deprecated tags are obsolete tags made obsolete either by newer HTML code or by CSS. Browser support for deprecated tags decreases with each new generation, so eventually to comply with newer versions you will need to learn CSS.
Another good reason is that if you use a "master" style sheet, it is possible to change one setting and have it apply to all documents that use that style sheet. Change the layout of 20 tables on 5 pages with one small edit! Impossible, you say? Not with CSS!
QuestionHow do I use CSS?
AnswerThe main syntax of a CSS setting is:
Selector.Class { attribute: value; attribute: value; }
There are also pseudo-classes, such as:
:link - properties of unvisited links.
:hover - properties of links when the mouse is over them.
:active - properties of links when they are being visited.
:visited - properties of links users have visited.
Kudos to robpomeroy for name correction and pseudo-classes.The key for this is as follows:
Selector: Where this class applies. (Each set of values is considered a "class") For example, p.fire would only work with the <p> tag, and td.fire would only work with the table cell. If you specify an asterisk (*.fire) then this class will work with whatever you assign it to.
Tip
So why would you ever use anything besides *.etc, anyway? Well, if you want the same name to mean different things to different tags, you can specify that and only need to use one name.
For example, let's say you wanted to create a fire theme for your web page. Let's also say that you want paragraphs to be red on a black background, and table cells to be black on a yellow background. You could use these CSS classes, even in the same style sheet:
p.fire { background-color: black; color: red; }
td.fire { background-color: yellow; color: black; }
Both will use the same class name, so when you call classes in HTML you can just specify "fire" across the board and it will effectively apply your theme.
Class: Whatever you want to call it. Ideally, you want it to be short while being descriptive at the same time. In other words, if "one" isn't significant to you, don't name your attribute that.
Attribute: The part of the element you want to modify. Valid attributes include background-color, text-indent, border-style, and more.
Value: What you set the attribute to. For example, a valid text-indent value would be "2%". A valid background-color value could be "black". Acceptable values vary from attribute to attribute.
NOTE: It is not necessary to include the spaces between the { and the code and the }; however, this makes your classes much more readable.
Tip
In order to keep track of what class does what in your style sheets, you will want to implement comments. Comments in CSS are very simple to put in, and they will help identify what your code is about. Comments are placed between /* and */. For example:
/* Background for the main site */
body { background-color: blue; }
Codes can also be multi-line, as in this example:
/* Background for the site.
Note to IT: Blue not a good color; blends with images */
body { background-color: blue; }
Use them when appropriate, but be careful of overdoing them. You don't need a paragraph on the table cell element; a sentence or two will do.
Now, you need a place to put all these classes, right? Well, there are several methods of doing this. They are: