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>

This is the div with the id "header".

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.

Back to Top