Each property can have one or more space separated values.

font: italic 12px sans-serif;
color: #333;
background-color: red;

The "color" property changes the text color. Colors can be specified either by name, for the most common colors, or by hexadecimal value.

color: red;
color: #ff0000;
color: rgb(255, 0, 0); 

This property is inherited, which means it'll also be applied to all descendant elements but can be overridden by more specific rules. This rule makes all the body text red unless specified otherwise:

body {
  color: red;
}

Explain hexadecimal math here, how FF is 0-15, with a 16 place and 1 place, so its 15*16 + 15*1

The "background-color" property changes the background color. Besides the BODY element, all elements default to a transparent background.

background-color: black;
background-color: #000000;
background-color: rgb(0,0,0); 

body {
  background-color: yellow;
}

table {
  background-color: #FFCC00;
}

To find colors or color schemes for your webpage, you can use:

• Desktop graphics programs: Adobe Photoshop, Mac Colors
• Online tools: RGBTool, Web Color Visualizer , Color Scheme Designer, ColourLovers, Kuler
• Browser extensions: Eye Dropper for Chrome, ColorZilla for FireFox

The "font-family" property specifies the font family (or "font face") of the text. You can specify either a specific font name or a generic family name (serif, sans-serif, monospace, cursive).

font-family: "Times New Roman";
font-family: sans-serif;

A comma separated list of font families can be specified if you want the browser to prefer one but use the others as backup options.

font-family: "Times New Roman", serif;
font-family: "Arial", sans-serif;
font-family: Courier, monospace;

Several websites exist that help you pick fonts for your website and to customize it with non-default fonts:

• Google Web Fonts
• TypeTester
• TypeKit
• FontFonter
• Good Web Fonts
• Typotheque
• Pairing fonts
• whatthefont.com

Live examples of custom fonts: 2012 JSConf, Teach the World to Code

The "font-size" property specifies the size of a font. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword.

font-size: 1.5em;
font-size: 12px;
font-size: 100%;
font-size: larger;

The "px" unit lets you size font in terms of pixels, which is the unit also used to size images and other elements. It is easier to understand than em, but doesn't work as well when printing or resizing.

h2 {
  font-size: 17px; 
}

Normal Headline

Resized Headline

There are various keywords that can be used if you're not as worried about the precise sizing: xx-small, x-small, small, medium, large, x-large, xx-large.

p.footnote {
  font-size: small;
}

There are also two relative keywords, that act similar to em's in setting size relative: smaller, larger.

p.intro {
  font-size: larger;
}

The "em" unit lets you set the size of the text relative to the text around it. This makes the page resize nicely in proportion if the user changes their default font-size. The default size is "1em".

p {
  font-size: 0.9em; 
}

strong {
  font-size: 1.5em; 
}

Hello there!

The size can also be specified as a percentage, which works similar to "ems", and can be used in conjunction with other units.

body { 
  font-size: 12px; 
}

h1 { 
  font-size: 200%; 
}

h1 a { 
  font-size: 75%; 
}

The "font-style" property specifies the font style of the text, either "normal" by default or "italic".

font-style: italic;

Italicized text.

The "font-weight" property specifies the thickness of the font. The default is "normal" and the typical override is "bold". You can also specify "bolder", "lighter", or a number from 100 to 900.

font-weight: bold;

Bold text!

A "shorthand" property in CSS lets you specify multiple properties in one property, for conciseness purposes. Instead of specifying each "font-" property separately, you can bundle them up in one "font" property.

table.geeky {
  font-weight: bold;
  font-style: italic;
  font-size: 10px;
  font-family: sans-serif;
}

Those four rules can be written as:

table {
  font: italic bold 10px sans-serif;
}

The "font" property expects values ordered as font-style, font-variant, font-weight, font-size, and font-family, and any of the first three can be left off.

line-height: 10px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam convallis ligula ut suscipit. Phasellus hendrerit, enim scelerisque...

text-align: center;

Centered text.

text-decoration: underline;

Underlined text

text-indent: 20px;

Indented text.