Introduction
What is CSS?
After learning basic HTML, a more semantically proper way of spicing up HTML documents is by using CSS (Cascading Style Sheets). »
Why is it called Cascading Style Sheet?
1) More than one style sheet can affect a page; 2) The declaration most recently created or closest to the HTML code wins out or "cascades over" the older one.
Syntax
selector { property : value }
Anatomy
Selector: normally the HTML element/tag you wish to style; others include class selectors (.classname), id selectors (#idname), and contextual selectors:
p strong { color: red; }
<p><strong>This text must be in red</strong></p>
Note: "Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page." »
Grouping
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
Specify all HTML tags (separated by commas) you want to style similarly.
Shorthand
blockquote {
border: 1px solid #FFFF00;
padding: 2px 5px 2px 5px;
}
You can define the different values for the different properties within one line. In this case, the first line within the declaration block defines border-width, border-style, and border-color at the same time. The second line, on the other hand, defines padding-top, padding-right, padding-bottom, padding-left in that order (see TRBL in Formatting to remember that order).
How to Apply CSS
External Style Sheets
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css" title="currentStyle" media="screen"> @import "style.css"; </style>
These two methods allow you to import a stylesheet containg the rules for styling the HTML elements.
Embedded Style Sheets
<head>
<style type="text/css">
p { background-color: #FFE600; }
</style>
</head>
If that is the content of the stylehsheet, then this is what a paragraph in an HTML page looks like.
In-line Styles
<span style="color: #CC0000;"> Change the font color. <span>
Change the font color.
Back to Top
Formatting
Font Family
font-family: tahoma, helvetica, "sans serif";
font-family: family-name | generic-family;
Choose among the available sans serif fonts.
Font Color
color: #9E0098;
It's "color", not "font-color".
Size
font-size: 1.3em;
Make it count.
Bold
font-weight: bold | normal;
Italic
font-style: italic | oblique | normal;
Underline
text-decoration: underline | overline | line-through | none;
underline overline line-through
Lettering
letter-spacing: 5pt;
font-variant: small-caps | normal;
text-indent: length | %
text-transform: none | capitalize | uppercase | lowercase
Evenly space your text for readability.
Links
Link, Visited, Hover, Focus, Active [Lord Vader's Handle Formerly Anakin]
a:link { text-decoration: line-through; }
a:visited { font-weight: bold; }
a:hover { text-decoration: none; }
a:focus { background-color: #FD0000; }
a:active { color: #FF8080; }
Top, Right, Bottom, Left [TRouBLe]
If you don't want Trouble, simply remember that you're traversing a box clockwise: start with the top, then the right, the bottom, and the left.
Border
border border-color border-width border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset border-top border-right border-bottom border-left border-top-color, etc.
* Does not work properly for all browsers »
Margin
margin
margin-top
margin-right
margin-bottom
All Together
<img src="cssborders.bmp" alt="css borders" style="border: 3px groove orange"/> margin: 20px; padding: 10px;
Applied to an image tag: 
Backgrounds
background: #FFFFFD url(bgimage.gif) repeat-y top right;
In one go, style the background attributes in this order: background-color, background-image, background-repeat, background-attachment, background-position [two words]. You needn't mention 'em all though.
Back to Top
Layout
Ye Table Layouts of Olde
Once upon a time, table layouts were good. They seemed to work well and to get the job done, but they generated oodles and oodles of tag soup.
CSS provides a bandwidth- and time-saving approach and a more logical means of presenting information: modify the look-and-feel of an HTML document just by modifying the CSS file/part, without ever having to touch the code containing the content of the page. The best illustration of this idea is CSS Zen Garden, a showcase of hundreds of wonderfully-styled HTML documents done by only manipulating the CSS file.
Central to this idea are two HTML tags closely linked to it: the <div> tag and the <span> tag.
The <div> and <span> Tags
Divs group HTML code into logical blocks and automatically produce line breaks; Spans group HTML code as well, but they are displayed in-line, unlike divs. By naming these divs/spans using classes and ids, the blocks of HTML can be styled to one's liking.
#header {
border: 2px solid #FD0088;
padding: 10px;
letter-spacing: 5px;
}
<div id="header">This is the div with the id "header".</div>
Dimensions
width, min-width, max-width height, min-height, max-height
* Does not work properly for all browsers »
Positions
position: absolute | relative | fixed | static
top | right | bottom | left: auto | % | length
overflow: visible | hidden | auto | scroll
clip: shape | auto
vertical-align: baseline | sub | super | top | text-top middle | bottom | text-bottom | length | %
z-index: auto | number
CSS Layouts
Due to the disobedience of some browsers in rendering CSS/HTML the standard way, creating the suitable CSS layout has been a conquest for most web designers � the search for the elusive Holy Grail has taken on a new meaning.
Fluid/Liquid Layouts
Fluid/Liquid - as opposed to Fixed-Width layouts, CSS/HTML code specifies dimensions in terms of percentages, and therefore does not depend on the browser/viewport available.
An organized little resource for producing CSS layouts can be found here.
Media Types
Stylesheets make HTML so flexible that you can even specify which style to render depending on which media is being used:
all | aural | braille | embossed | handheld | print | projection | screen | tty | tv
@media print {
font-family: "times new roman", serif;
}
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
Quirks Mode
No browser displays the same code in the same way.
Box Model Hack
Why does the CSS box model need a hack? "All CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned 'width' or 'height'. In the absence of borders and padding, the two models agree. However, if a box has an assigned "width', and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE's model the 'content area' gets squeezed by the same amount. This is a major problem for proper page layout." »
Back to Top
Resources
This page is by no means a comprehensive guide. There are many, many things to discuss when it comes to CSS, but tackling the basics gives a good enough preview of the power you can wield.