Useful CSS Properties Chart

Sets a background colour or image.

background: #c487fe;

background: url('flowers.jpg');

Gives the object a border. The syntax for this property is border: width style colour;

You'll almost always use solid as the style.

Styles border-top, border-left etc. also exist, and work the same way.

border: 5px solid #ff0000;

border: 10% dotted #3c7; (if the colour code is in the format #xxyyzz, you can shorten it to #xyz.)

Sets the height of an object.

height: 200px;

height: 100%;

Sets the width of an object.

width: 510px;

Sets the font. The syntax for this property is font: italic bold size font;

font: italic bold 12pt Arial;

font: 30px "Times New Roman";

font: bold;

Adds space around an element. The syntax for this property depends on how many margin sizes you specify. You can specify up to four. See the example to see how the browser will interpret this.

Put auto on the left and right of an element to centre it.

margin: 5px 3cm 0 -5px; (top, right, bottom, left)

margin: 100px 50px 0; (top, left and right, bottom)

margin: 1px auto; (top and bottom, left and right)

margin: 3px; (all sides)

Adds space inside an element. (You should usually put padding on a div, so its contents don't touch the edge of the div.)

Padding works exactly the same way margin does.

padding: 0 1px 0 0; (top, right, bottom, left)

padding: 10% 1% 117px; (top, left and right, bottom)

padding: -6px 0; (top and bottom, left and right)

padding: 0; (all sides)

Allows text and other objects to appear beside an element. An object that floats to the left will allow things to appear to its right.

float: left;

Sets the colour of text.

color: #000;

color: red;

Sets the alignment of text.

text-align: center;

text-align: right;

This is a pseudo-class, not a property. You make another style with the same name, but add :hover afterwards. The :hover style is how the image will look when you move the mouse cursor over it. This is mainly useful for buttons and links.

.mylink {
color: #40c;
}

.mylink:hover {
color: #9bf;
background: #f00;
}