CSS Guide

What is CSS?

CSS (cascading stylesheets) is a simple mechanism for controlling the style of a web document without compromising its structure. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a web page, CSS gives designers the control they crave without sacrificing the integrity of the data, thus maintaining its usability in multiple environments.

In addition, defining typographic design and page layout from within a single, distinct block of code — without having to resort to image maps, <font> tags, tables, and spacer GIFs — allows for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.

Client-side support for the various CSS properties is uneven, even among browsers that support stylesheets.

How CSS Works

CSS overrides the browser’s default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a stylesheet.

Stylesheets contain rules, composed of selectors and declarations that define how styles will be applied. The selector (a redefined HTML element, class name, or ID name) is the link between the HTML document and the style. There are two different kinds of selectors:types (HTML element tags) and attributes (such as class and ID names).

A CSS declaration has two parts,

Linking Stylesheets

Local (inline) stylesheet declarations, specific to a single instance on a page, can be used instead of<font> tags to specify font size, color, and typeface and to define margins, leading, etc.

<p style="font size:small; color:red; font-weight:bold;  font-family:Arial, Helvetica, non-serif">  This is a local stylesheet declaration.  </p>

Global (embedded) stylesheet declarations, applicable to an entire document, are defined within the<style> and </style> tags, which precede the <body> tag in the HTML document and are usually placed in the header.

To embed a global stylesheet in your HTML document:

<html>      <head>      <title>Title</title>      <style type="text/css">      <!--      [STYLE INFORMATION GOES HERE]      -->        </style>      </head>      <body>      [DOCUMENT BODY GOES HERE]      </body>      </html>

Linked stylesheet declarations use a single stylesheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing style rules, as here:

P {font-family:non-serif; font-size:medium; color:red}  H1 {font-family:serif; font-size:x-large; color:green}  H2 {font-family:serif; font-size:large; color:blue}

To apply a .css stylesheet (“style.css” in the example below) to an HTML page, a <link> tag is added to the page header:

<head>  <link rel="stylesheet" href="style.css" type="text/css">  </head>

Inheritance

In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence:local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements.