Part 2: CSS Fundamentals

CSS rules always follow the format below (watch your colons and semicolons). Note that multi-word properties are always hyphenated, while multiple values are separated by spaces (e.g. margin:0 10px;).

selector	{
	property: value;
	some-other-property: value1 value2;
	}

At the top of your stylesheet, you’ll want to use a CSS Reset. There are various versions, but a simple one is this:
body * {margin:0; padding:0; border:none;text-indent:0;text-decoration: none;outline:none;}

Margins

Margins push the object away from other objects. Like other CSS measurements, you can specify the margin amount in pixels (px), points (pt), percentages (%), or ems (em). Note that margins can also take the auto value: the most common use is to horizontally center a fixed-width content div by writing div#content {margin:0 auto;}

Be sure to take advantage of the “shorthand” versions of CSS declarations to avoid repetitive typing. The following three rules are equivalent:

p 	{
	margin-top:5px;
	margin-right:10px;
	margin-bottom:5px;
	margin-left:10px;
	}
p	{margin:5px 10px 5px 10px;}
p	{margin:5px 10px;}

Padding

Padding creates space inside the element, extending its background color and its borders (if any). There is no auto value for padding. Padding is useful for creating breathing room around an element, especially if it has backgrounds or borders applied.

Borders

Rules for borders follow similar patterns, and you can specify values for color, width, and style (solid, dotted, or dashed). The following two rules are equivalent:

p	{
	border-width: 2px;
	border-style:dotted;
	border-color:red;
	}
p {border: 2px dotted red;}