Cascading Stylesheets
W3Schools has this to say about CSS:
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.
Advantages?
Simply put, using CSS means we can put our content and structure in one document, and the style elements in a different, discrete document (assuming we're using external stylesheets) or gather all off our styles into one element (using an embedded style tag).
Why is that such a big deal? Well, perhaps this analogy will help: what if painting your house meant you had to tear it apart and rebuild it? Not very fun, or economical, is it? When we embed style elements into a web page, we run into this same problem when we want or need to change the look of the page. Not to mention, maintaining a consistent look across pages becomes a chore unto itself...
Drawbacks?
I can only think of one major drawback to using CSS: your site becomes dependent on being able to load an external document in order to display correctly. If your site cannot load the style sheet, your page will "degrade" to however the core HTML is structured. For some sites, that can be, for lack of a better word, painful. Of course, this is only a problem with external style sheets, and frankly, unless your style sheet is stored on a different server for some reason, if your site loads, your style sheet will load.
File Structure
There are two methods available for implementing CSS: by embedding in the HTML source document, or by referencing an external style sheet.
Embedded
Of the two ways of embedding style into a web document, the easiest method is to style each element individually, like so:
<tag style="">
where "tag" is replaced with whatever tag you are styling.
The second method involves adding the <style> tag to the <head> of your web page, like this:
samplepage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page Title Goes Here</title>
<style type="text/css">
tag {
// attribute
}
</style>
</head>
<body>
</body>
</html>
Simply substitute the element you want to style for tag
and add whatever attributes you want to modify, i.e. background-color, font-size, etc.
External
For an external style sheet, we add a <link> element to our <head> element, like so:
samplepage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="url to stylesheet here" type="text/css" media="all"/>
<title>Page Title Goes Here</title>
</head>
<body>
</body>
</html>
Stylesheets are very simple documents, and look similar to this:
style.css
/* Add copyright notices, etc. to top of page using comments.
// The rest of the style sheet looks just like an embedded
// stylesheet.*/
/* To style every element of a specific type, add that element*/
body {
// attribute
}
// To style a specific element, add its id
#header {
// attribute
}
// To style more than one element, use a class
.bodytext{
// attribute
}
And the elements being styled will look like so: <tag id=header
> (ID'd element) and <tag class=bodytext
> (class element).
Do You Want to Know More...?
Check out SitePoint.com for a very thorough rundown on CSS.