<html> <head> <style type='text/css'> <!-- ....css goes here.... --> </style> <title>A title</title> </head> <body> ....html goes here.... </body> </html>
Standard HTML tags may be redefined to specify colours, fonts, justification, backgrounds, etc. as follows:
body { background: #000000; color: white; }
The HTML tag name appears first followed by an open curly bracket. The CSS to define colours, styles, etc., appears next. Each item of CSS consists of a type (such as background:) followed by a value (such as #000000, or white). Each value is followed by a semi-colon. The end of the definition for the tag is marked with a closed curly bracket.
A class= attribute may be placed within any HTML tag to tie it to a CSS style. This will be added to any style specified for the tag and redefined elements will override those already specified for the tag.
A special tag <div> is available which creates
no formatting itself but can be used to specify a class. The
<div> tag is used in a
A second special tag <span> is also available
which creates no formatting itself but can be used to specify a
class. The <span> tag is used in a
The CSS for a class is specified in the same way as for a tag, but a full-stop appears in front of the class name. For example:
<p class='interests'>My interests are...</p>
With the following CSS:
p {font: 14pt Helvetica, Arial, sans-serif; color: black; } .interests {background: black; color: white; }
In this case the default font for a <p> tag is a sans-serif font and will be displayed in black on the default background. The interests class over-rides the font colour, making it white and adds the information that the background should be black.
In most cases, an CSS element may be used with any tag or class definition.
Element | Typical values | Purpose |
---|---|---|
background: | #336699; | Specify the background for the element |
color: | #5270A2; | Specify the colour of the text |
float: | right; | Float an element to left or right. Used for multiple columns |
font: | 14pt Courier, monospace; | Specify a font (See below) |
margin: | 0px 0px 10px 0px; | Specify the margin (See below) |
padding: | 10px 10px 10px 30px; | Specify padding (See below) |
text-align: | center; | Align the text: left, right or center |
Fonts are specified as:
Units are those typical of typography (plus pixels):
Pixels (px) A screen pixel.
Points (pt) A point is 1/72 inch.
Em (em) Approximately the width of a letter M in the current font.
En (en) The height of a letter n in the current font.
The margin is an offset before the element is drawn. The margin area will be coloured the same as the parent element (the body element if nothing else). The four values represent the top, right, bottom and left respectively.
If only one value is given it is applied to all four positions.
If two values are given, the first refers to the top and bottom while the second refers to the left and right.
Padding is similar to the margin, but the padded area will be coloured in the background colour specified for this element. Content (such as text) will be indented by this amount.
The numbers are specified as for the margins.