File Under: Cheat Sheets, CSS

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,

a property ("color") and a value ("red"). 

The basic syntax of a rule

selector {property 1:value 1; property 2:value 2} " 

An example (containing two declarations, as above)

P {font-size:8pt; color:red}

CSS is not picky about whitespace, linebreaks, or extra semi-colons, so you can format complex CSS files to make them more manageable;

P {
   font-size: 8pt; 
   color: red;
}

In addition, you can apply the same style rules to more than one element simultaneously by comma-separating them;

H1, H2, H3 {
   font-size: 8pt; 
   color: red;
}