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


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;

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.