selector | property + example of value | comments |
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";
|
DIV |
display: inline-block
|
Means that you can have a picture with text underneath, as a block,
and the blocks follow each other rather than line feeds in between
|
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;
|
|