Home index

Cascading style sheets

I am not an expert on cascading style sheets. This list is not complete; it is merely the ones that I have used, stored here so I can find them. Feel free to use the info if it's useful.

To use cascading style sheets, you must:

Make a text file with the declarations. The name should be of the form xxx.css
Example: P.yyy {font-size: 12px;} where P (paragraph) is the selector, yyy is the name, font-size is the property and 12px is the value.
You can have several properties inside the curly brackets. Separate them with ;

In the <HEAD> of your webpage, put <LINK REL=STYLESHEET TYPE="text/css" HREF="xxx.css">

In an HTML statement, put CLASS=yyy

A - BODY - H1 - HR - IMG - INPUT - LI - P - SPAN - TABLE - TD - TEXTAREA - TR - UL

selectorproperty + example of valuecomments
A color: #C00000;
A:link color: #C00000;
pseudo-class to change link colour at start
A:visited color: #C00000;
pseudo-class to change link colour after visiting
BODY background-color: #FFFFFF; color: #000000;
font-family: arial,helvetica,sans-serif;
margin-left: 5%; margin-right: 5%;
color is red, green, blue - each 2 digits from 00 to FF
color can also be colour name such as RED
font-family: "Times New Roman", "Times", "Serif";
H1 color: #000080;
font-size: 40px; font-weight: bold;
margin-bottom: 0px; margin-top: 0px;
text-align: center;
H2 and H3 are the same
HR background-color: #2000A0; color: #2000A0;
border: 0px;
height: 1px;
margin-bottom: 1ex; margin-top: 1ex;
px is a pixel
IMG border: 0px;
float: left;
height: 60px;
margin-right: 10px; margin-left: 10px;
position: fixed; top: 100px; left: 100px;
float is like ALIGN=LEFT
margin-right is like HSPACE=
position: fixed; can be used to overlay pictures - see SPAN
INPUT background-color: #FFFFFF; color: #000080;
font-size: 40px; font-weight: bold;
margin-top: 10px; margin-bottom: 10px;
margin-left: 10px; margin-right: 10px;
alter writing and colour of buttons
LI margin-top: 1ex; margin-bottom: 1ex;
ex is height of 'x'
P background-color: #FFFFFF; color: #000080;
font-size: 10px; font-weight: bold;
margin-left: 20%; margin-right: 20%;
margin-bottom: 2ex; margin-top: -1ex;
text-align: center;
margin-top negative to reduce paragraph gap
SPAN background-color: #FFFFFF; color: #000080;
font-size: 10px; font-weight: bold;
margin-left: 20%; margin-right: 20%;
margin-bottom: 2ex; margin-top: -1ex;
position: fixed; top: 100px; left: 100px;
text-align: center;
position: fixed; might be useful for text if you're using it for IMG
TABLE background-color: #FFFFFF; color: #000000;
border-style: none;
margin-bottom: 0px; margin-top: 0px;
margin-left: auto; margin-right: auto;
padding: 8px;
margin-left/right: auto is equivalent to ALIGN=CENTER
TD background-color: #FFFFFF; color: #000080;
border-style: none;
font-size: 9px; font-weight: bold;
padding-left: 1px; padding-right: 1px;
padding-bottom: 0px; padding-top: 0px;
TH the same
TEXTAREA font-size: 10px; font-weight: bold;
TR background-color: #FFFFFF; color: #000080;
text-align: center;
margin-bottom: 0px;
UL margin-left: 20%;
margin-top: 0px;

Useful external links

W3Schools CSS tutorial