Help: CSS attributes & values

Attribute Value Example
color
colour name or number main_font {
color: #ff0000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic; }
font-weight normal, bold, bolder, light, lighter
font-family Times New Roman, Arial, sans-serif, serif, msaa
font-size number, or large, medium, small
font-style italic, normal
text-transform uppercase, lowercase, capitalize, none .upper { text-transform:uppercase; }
text-decoration underline, overline, none .stressed { text-decoration: underline; }
letter-spacing
number or normal .stretched { letter-spacing: letter-spacing: 0.2em;}
word-spacing number or normal .separated { word-spacing : 0.5em;}
line-height number or % or normal .higher { line-height: 150%; }
text-transform uppercase, lowercase, capitalize, none .upper { text-transform:uppercase; }
text-align center, justify, left, right .centered_text { text-align: center; }
background-color number or name body {
background-color: #ffff00;
background-image: url(bg.gif);
background-repeat: no-repeat; }
background-image url(name)
background-repeat repeat, repeat-x, repeat-y, no-repeat
border-width
 number or thin, medium, thick .table_border {
border-width: 2px;
border-color: #ff00ee;
border-style: solid; }
border-color colour name or number
border-style solid, dashed, dotted, double, etc
margin number body {
margin: 5px;
padding: 10px; }
padding number
position absolute, relative, fixed, static (normal) .text_column {
position: absolute;
top: 100px;
left: 200px;
bottom: 800px;
right: 600px; }
top, left, bottom, right number
z-index number or auto .text_column2 {
z-index:3;
visibility: visible;
float: left;
clear: left; }
visibility visible, hidden, inherit
float left, right, none
clear left, right, none
white-space normal, pre, nowrap .preformatted_text { white-space: pre; }
list-style-type none, disc, circle, square, decimal, etc .no_bullets { list-style-type: none; }

Help: Units

Name Abbr. Meaning Relative?
em em font size yes
ex ex size of letter 'x' in font yes
pica pc 1 pica = 12 points no
point pt 1/72 inch no
pixel px pixels on the screen no
millimeter mm   no
centimeter cm   no
inch in   no
% %   yes

Help: Colours

 

The names here mean the same as the numbers beside them. Both can be used with the attributes color and background-color.

For example, the following are equivalent:

{ color: red; }

and

{ color: #ff0000; }

Help: Valid CSS - online check

It is important that the CSS is valid or the HTML page may not display correctly. The CSS can be checked using online tools.

W3C, the World Wide Web Consortium, provides a CSS Validator

Help: Valid HTML - online check

The HTML should also be checked for validity.

W3C, the World Wide Web Consortium, provides a HTML Validator

Help: Additional information

Additional information about CSS is available from:

W3Schools CSS Tutorial

CSS Property Listings