CSS Resources

Overall HTML structure

<html>
<head>
<style type='text/css'>
<!--
....css goes here....
-->
</style>
<title>A title</title>
</head>
<body>
....html goes here....
</body>
</html>

Redefining tags

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.

Specifying classes

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 vertical mode - i.e. to wrap around a group of paragraphs, lists, etc.

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 horizontal mode - i.e. to wrap around words within a paragraph, list item, etc.

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.

The most useful CSS elements

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, units, margins and padding

Fonts

Fonts are specified as:

Units

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.

Margins

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

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.

Continue