<strong>Text</strong>

Bold

<em>Text</em>

Italics

^Text

Superscript

_Text

Subscript

<a href="x.html">Text</a>

Regular link

<a href="http://www.x.com">Text</a>

External link

<a href="x.html" target="_blank">Text</a>

Opens in a new window

<a href="x.html" title="Explenation">Text</a>

The title text will show when hovering

<img src="x.gif" alt="Description" />

Displays an image

<hr />

Horizontal rule

<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300"> <param name="movie" value="movie.swf" /> </object>

Embed Flash

<p>Text</p>

Paragraph

<br />

Line break

<h1>Heading 1</h1>

Heading (numbers can go from 1 to 6)

<ol><li>Item</li></ol>

Ordered list

<ul><li>Item</li></ul>

Unordered list

<table style="border: 1px solid #BD631C; border-collapse:collapse;"

Opens the table

   <tr>

Opens a row

      <td style="border: 1px solid #BD631C;">Text</td>

Cell

   </tr>

Closes the row

</table>

Closes the table

<form action="script.php" method="post">

Opens the form

   <input type="text" name="x" size="5" maxlength="4" />

Text field

   <input type="password" name="x" />

Password

   <input type="checkbox" name="x" value="x" />

Checkbox

   <input type="radio" name="x" value="x" />

Radio

   <input type="submit" value="x" />

Submit button

   <input type="reset" value="x" />

Reset button

   <input type="image" name="x" src="x.gif">

Graphic submit button

   <textarea name="x" cols="40" rows="8"></textarea>

Text area

   <select name="x">

Opens a dropdown menu

      <option>Text</option>

Dropdown option

   </select>

Closes the drop down

</form>

Closes the form

<div id="x" class="x">Text</div>

Block container

<span class="x">Text</div>

Inline container

em  (the height of the element's font), ex (the height of an 'x')

px (pixels, relative to the canvas resolution)

pt (points; 1pt=1/72in)

p {color: red;}

<p>Text</p>

All paragraphs will be red

.big {color: red;}

<p class="red">Text</p>

Paragraphs with class red only

#head {color: red;}

<div id="head"><p>Text</p></div>

All in 'head' will be red.

#rap p

<div id="rap"><p>Text</p></div>

Only paragraphs in rap are red

p, .big {color: red;}

<p>Text</p><h1 class="big>Text</h1>

p and .big are red

All links

a { color: red; }

Sets properties for all links

Unvisited Link

a:link { color: red; }

Sets the color for hyperlinks. Default color is blue.

Visited Link

a:visited { color: gray; }

Links that have been clicked on. Default color is purple.

Hover Link

a:hover { color: green; }

When people place mouse over a link, without clicking on it.

Active Link

a:active { color: purple; }

The color of links as they are being clicked. Default color is red.

color

Sets the text colour

Color names, RBG value, Hex code

color: aliceblue;

color: rgb(240,248,255);

color: #f0f8ff;

font-family

Font names separated by comas. The last name should be generic (serif, sans-serif, cursive, fantasy or monospace)

font-family: Arial, Helvetica, sans-serif;

font-family: "Times New Roman", Georgia, serif;

font-family: "Courier New", Courier, monospace;

font-size

It can be a keyword (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger), a length (pixels, points or em), or a %

font-size: x-small;

font-size: 12px;

font-size: 12pt;

font-size: 1.5 em;

font-size: 150%;

font-style

Values can be   normal, italic or oblique

font-style: normal;

font-style: italic;

font-weight

Values include bold, bolder and normal

font-weight: normal;

font-weight: bold;

text-align

left, right, center or justify

text-align: center;

text-indent

Indents the first line

A length (pixels, points or em) or a percentage

text-indent: 3em;

text-indent: 10px;

text-decoration

none, underline, overline, line-through or blink

text-decoration: underline;

text-decoration: none; /* to remove underline from links) */

line-height

length

line-height: 2em; /* double spaced */

background-color

Color names, RBG value, Hex code

background-color: aliceblue;

background-color: #fff;

background-color: #f0f8ff;

background-image

URL (in parenthesis) or none

background-image: url(myimage.gif);

background-attachment

Whether the background will scroll or not

Can be scroll (this is the default) or fixed (on IE for PC only works when set for the body)

background-attachment: fixed;

background-repeat

For determining the tiling

Can be repeat (default), repeat-x, repeat-y, or no-repeat

background-repeat: no-repeat;

background-repeat: repeat-x;

background-position

Setting where the background should start tiling

Has to be in pairs: one or two %, one or two lengths, or one of top, center, bottom, and one of left, center or right;

background-position: center left;

background-position: 50% 100%; (this is the same as bottom center)

background

Shorthand property to set all or some values at the same time.

Values should be in the following order: 'background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'

background: #fbf url(back.jpg) no-repeat fixed 30px 50%;

background: url(back.gif) repeat-x;

background: red;

list-style-type

disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin, none

list-style-type: square;

list-style-type: lower-roman;

list style-type: none;

list-style-image

Let's you add an image as the bullet

URL (in parenthesis) or none

list-style-image: url(bullet.gif);

border-color

Hex code, color name, RGB values

border-color: red;

border-style

dotted, dashed, solid, double, groove, ridge, inset, outset, none

border-style: solid;

border-style: dotted;

border-width

thin, medium, thick or a length

border-width: 1px;

border

The shorthand for all 4 sides.

List all values without spaces: border-width border-style border-color

border: 1px solid red;

border: 3px double #ccc;

border-top, border-right, border-left, border-bottom

Same as border, but for one side at a time

border-bottom: 1px solid black;

border-right: 3px solid ridge;

border-collapse

If you set a border for the cells, borders will be double unless you collapse them. Apply to table tag only.

collapse or separate

border-collapse: collapse;

margin-top, margin-bottom, margin-left, margin-right / padding-top, padding-bottom, padding-left, padding-right

length or percentage. Setting the left and right margin to auto will center the container.

padding-left: 10px;

margin-right: 0;

padding-bottom: 20px;

margin-top: 1%;

margin / padding

You can give one, two, three or four values

One value: sets all four sides

padding: 5px;

Two values: sets vertical and horizontal

margin: 0 auto;

Three values: set top, horizontal and bottom

padding: 10px 20px 0;

Four values: sets top, right, bottom and left

margin: 0 10px 15px 20px;

float

Forces other elements to wrap around it

left, right or none

float: right;

float: left;

clear

To prevent elements from wrapping around floats

left, right or both

clear: both;

height

length

height: 100px;

width

length or percentage.

width: 200px;

position

How blocks should behave

static (default), relative, absolute or fixed

position: absolute;

position: relative;

top, bottom, left  and right

Must be used with position to establish the containers position

length or percentage

top: 10px;

right: 0;