Useful CSS Properties Chart

This is a big chart of all the common CSS properties.This covers all the CSS properties you're likely to use at this stage.

The Chart

hf DESCRIPTION EXAMPLES
background

Sets a background colour or image.

background: #c487fe;

background: url('flowers.jpg');

border

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.)

height

Sets the height of an object.

height: 200px;

height: 100%;

width

Sets the width of an object.

width: 510px;

font

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;

margin

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)

padding

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)

float

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;

color

Sets the colour of text.

color: #000;

color: red;

text-align

Sets the alignment of text.

text-align: center;

text-align: right;

:hover

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;
}

Extra Tips

Redefine your body tag in your CSS, by putting body {font: Arial;} or something similar in your style sheet. This will apply that style to the whole page. This is a good place to set the page background and font.

If you need to overwrite a style later on (for instance your whole page is Arial font, but you want a line of Georgia), then you need to use a more specific property. I haven't gone into those here, but properties like font-family and font-size exist. You probably don't need to use those now though.

Try to keep your CSS and HTML as simple as possible.