CSS 101

Intro

External

<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
</body>

or

<head>
<title>My Page</title>
<style type="text/css"> @import url(style.css) </style>
</head>
</body>

Internal

<head>
<title>My Page</title>
<style type="text/css">
CSS styles
</style>
</head>
</body>

Inline

<p style="color: #ff0000;">Lorem Ipsum</p>

Syntax

selector { property: value }

Example:

h1 {font-family: Arial, serif;}

Combining:

h1, h2, h3 {font-family: Arial, serif;}

Inheritance

body {
font-family: Arial, serif;
color:green;
}
h1 {font-family: Georgia, san-serif;}

h2 {color:red;}

Heading1 Text

Heading2 Text

Classes

.green_text {
font-family: Arial, serif;
color:green;
}
<h3 class="green_text">Lorem Ipsum</h3>

Lorem Ipsum

IDs

#branding {
font-family: Arial, serif;
color:green;
background:#fff url(logo.png) no-repeat left center;
padding:50px;
}

<h1 id="branding">Lorem Ipsum</h1>

Lorem Ipsum

Margins

margin-top: px | % | auto;
margin-left: px | % | auto;
margin-right: px | % | auto;
margin-bottom: px | % | auto;

or

margin: top right bottom left;
margin: 10px 20px 10px 20px;

can also be written

 margin: 10px 20px;

use auto for left/right value to center horizontally

margin:10px auto;

Example

The green box has a margin of 10px.

Padding

padding-top: px | % | auto;
padding-left: px | % | auto;
padding-right: px | % | auto;
padding-bottom: px | % | auto;

or

padding: top right bottom left;
padding: 10px 20px 10px 20px;
can also be written 
padding: 10px 20px;

Example

The green box has padding of 10px.

Text

color: name | hex# | RGB;

This text is red

letter-spacing: normal | px;

This text has 2px letter spacing

line-height: normal | px | number(mulitple of current line size) | percent;

This text has a line
height of 14px;

text-align: left | right | center | justify;

This text is aligned center

text-decoration: none | underline | overline | line through | blink;

This text is underlined

text-indent: px | %;

This text is indented 20%

text-transform: none | capitalize | lowercase | uppercase;

This text is all uppercase

white-space: normal | pre | nowrap;

This text is wrapping

word-spacing: normal | px;

This text has 10px word spacing

Fonts

font-family: family-name | generic-name;

This font is Georgia

font-size: xx-small |  x-small | small | medium | large | x-large | xx-large | smaller | 
larger | px | %;

This font is 200%

font-style: normal | italic | oblique

This font is italic

font-variant: normal | small-caps;

This font is small-caps

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 
800 | 900

This font is bold

All together:

font: style, weight, variant, size/line height, font;
font: italic bold normal large/1.2em Arial, sans-serif;

Lorem Ipsum

Pseudo classes

a:link {color: red;}
a:visited {color: red;}
a:hover {color: green;}
a:focus {color: red;}
a:active {color: red;}

This link is red. Hover is green.

Backgrounds

background-attachment: fixed | scroll;
background-color: name | hex# | RGB | transparent;
background-image: url | none;
background-position: top left |  top center |  top right |  center left |  center center |  
center right |  bottom left |  bottom center |  bottom right |  x-% y-% |  x-pos y-pos;
background-repeat: no-repeat | repeat | repeat-x | repeat-y;

All together:

background: color | image | position | repeat | attachment;
background: green url(images/logo.png) top left no-repeat scroll;

Lorem Ipsum

Borders

border-color: name | hex# | RGB | transparent;
border-style: dashed | dotted | double | groove | hidden | inset | none | outset | 
ridge | solid;
border-width: Length | Thin | Medium | Thick;

You can also use:

border-top
border-top-color
border-top-style
border-top-width

border-bottom
border-bottom-color
border-bottom-style
border-bottom-width

border-right
border-right-color
border-right-style
border-right-width

border-left
border-left-color
border-left-style
border-left-width

All together:

border: width | style | color;
border: 1px dotted green;

Lorem Ipsum

Lists

list-style: position | type/image;
list-style: value value;
list-style-image: url;
list-style-position: inside | outside;
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | 
lower-alpha | upper-alpha | none

All together:

list-style: image | position | type;
list-style:outside circle;

Lists

height: auto | px | %;
max-height: none | px | %;
min-height: px | %;
width: auto | px | %;
max-width: none | px | %;
min-width: px | %;
width: 200px;
height: 200px;

This box is 200px by 200px

Classification

float: left | right | none;
clear: none | both | left | right;

The is floated left

The is floated right

The is cleared both

display: block | inline | list-item | none;
overflow: auto | hidden | visible | scroll;
visibility: hidden | visible;
z-index: auto | number;

Positions

position: static | relative | absolute | fixed;
top: px;
bottom: px;
left: px;
right: px;
This is positioned static
This is positioned absolute top:100px; right:20px;
This is positioned relative top:300px; left:30px;
This is positioned fixed top:0; right:0;

Lorem Ipsum

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. 


#branding{
font-family:Georgia, serif;
padding:30px 0 30px 70px;
background:transparent 
url(images/logo.png) no-repeat left center;
font-weight:normal;
text-transform:uppercase;
margin:0;
color:#000;
}

#main{
width:460px;
float:left;		
clear:both;
font-family:Arial, serif;
line-height:1.6em;
color:#333;
}

#main a{
color:#f99614
}

#main a:hover{
color:#fff;
background:#f99614;
}

IE Help

Code for standard complinent browsers first.

Use conditional comments to add Internet Explorer fixes.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

or

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->