A Quick Guide to CSS

Style sheets define how HTML elements are displayed within a web page. They are normally defined in an external style sheet file, which is a text file that has the extension .css, although they can also be embedded in the page header (using the <style> . . . </style> tag), or defined in-line within an HTML element using the style attribute. We have already explored the use of the different methods of implementing styles in "A web page template". The World Wide Web Consortium (W3C) recommends the use of style sheets to format content in web pages, and all modern web browsers support them. The use of one or more external style sheets is of particular benefit to web developers, because it means that cosmetic changes to all pages in a web site can be achieved by amending the contents of one style sheet file (or at most a small number of style sheet files) rather than having to change the code in every single page individually. While this may not be a major issue for small web sites, it becomes a critical factor where hundreds or even thousands of pages are involved. A single web page may contain references to multiple external style sheet files. If two or more conflicting styles are specified for the same HTML element, priority is given to the style that appears highest in the cascade order, which is as shown below.

  1. Browser default style
  2. External style sheet
  3. Embedded style sheet (defined in document header)
  4. Inline style (defined within an HTML element)

Note, however, that if a link to an external style sheet is placed after an embedded style sheet in the HTML document header, the external style sheet overrides the embedded style sheet. Similarly, if conflicting styles are defined at the same level (e.g. in the same external style sheet, or two different external style sheets) then the last style definition that is read by the browser will be used.


CSS syntax

A CSS style is defined using the following syntactical elements:

The general format is shown below.


selector {property: value}


The selector is usually the name of an HTML element (or tag). The property is the attribute of the element (e.g. width, background-color, etc) that will be affected. The value is the value that will be ascribed to the attribute. The property and value are separated by a colon (:), and the style definitions for each element are enclosed within curly braces. If multiple properties are defined for a single element, each style definition (except the last one) must be terminated using a semi-colon (;). An example (which should be familiar to you) is shown below. Remember that you can insert explanatory comments into a style sheet using the method shown below.


a:hover
{
  text-decoration: underline;
  color: #ff0000;
  font-weight: bold
}
/* this style is used when the mouse hovers over a link */


The code above specifies that, when the mouse is moved over a hypertext link, the link will appear underlined, emboldened, and with a red text colour. Note that, although the properties could all be specified on the same line between the curly braces, the layout and indentation shown above is often used to improve readability, and has little or no effect on the size of style sheet files. It is also possible to define the same styling for a number of elements at the same time, as follows:


h1,h2,h3,h4,h5,h6
{
  text-align: center
}



CSS dimensions

Properties such as the width or height of an element, or the thickness of a border, are usually either expressed as absolute values or as a percentage relative to a parent element. Percentages are often preferred when setting styles for web page layout (using tables or <div> . . . </div> tags, for example), because it allows the page elements to resize themselves automatically if the user changes the screen resolution or re-sizes the browser window. The ability to adapt to a range of different screen resolutions means that pages are more likely to be viewed correctly on a larger number of client computers, even those that have older browsers installed or are not equipped with a high-resolution monitor. The dimensional properties of an element are often expressed in pixels. Pixels can be considered to be relative units, since the size of each pixel (and therefore the size of an element defined using pixels) is dependent on screen resolution. The following example illustrates how the width and height properties of the <img /> tag might be specified using pixel values:


img.thumbnail
{
  width: 180px;
  height: 135px;
}


Font sizes are often the cause of much confusion, because they can be specified using several different units of measurement, both relative and absolute. One commonly used relative unit of length is em, which is paired with a suitable multiplier to specify a font size for an element (1em is considered to be the font size of the parent element, 2em would be twice as big, and so on). The main point to watch when using em is that a value of 1em is not guaranteed to evaluate to the same absolute value in two different elements. It depends on the font size (if any) specified in the parent element for each. For that reason, pixels (px) are sometimes used to specify font size. The absolute units include inches (in), centimetres (cm), millimetres (mm), points (pt) and picas (pc). A point is the equivalent (in CSS) of 1/72nd of an inch, and a pica is the equivalent of twelve points. Both points and picas are units used in printing.

Generally speaking, it is recommended that absolute values for font sizes (points, picas etc.) should be avoided for screen output because they are interpreted somewhat arbitrarily (and almost never correctly) by different browsers. Relative units such as em and pixels (px) are preferred, because they are scalable and will produce similar results in all browsers. There is still some debate about whether it is better to use em or px, and many web authors use a mixture of the two, depending on the particular requirements of the application. If in doubt, it never does any harm to experiment with the different units to see what effect they have on different systems. The beauty of style sheets is that such changes as are necessary can be made very quickly, and take immediate effect.


CSS classes

Classes are used to enable different styles to be defined for the same selector, giving the web page author more control over how they want various page elements to be displayed. Under some circumstances, for example, you might want the text within a paragraph tag to be left-ustified (i.e. flush with the left margin but ragged on the right-hand side) for text that appears in one area of your page, but right-justified (i.e. flush with the right margin but ragged on the left-hand side) for text that appears in another area of your page. You would therefore need two separate styles defined for the <p> . . . </p> element. You could achieve this using classes, as follows:


p.left { text-align: left }
p.right { text-align: right }


In order to specify which style is to be used, the class attribute must be declared within the HTML element that it affects, as shown below.


<p class="left">
  This text will be left-justified.
</p>

<p class="right">
  This text will be right-justified.
</p>


If you leave out a tag name for the selector, the class defined can be used for any HTML element. The example below defines the class "center" that can be used within any element to make it centre-aligned.


.center {text-align:center}


The HTML code below shows how two different HTML elements might use the "center" class.


<h1 class="center">This heading will be centred!</h1>
<p class="center">This text will also be centred.</p>



The ID selector

You can define styles for HTML elements using the id selector (#). The style defined below will be used for any <p> . . . </p> element that uses the ID attribute with a value of "warning".


p#warning
{
  text-align: center;
  color: red;
  font-weight: bold;
}


The HTML code below demonstrates the use of the ID selector.


<p id="warning">
  Warning! You are now entering the Twiglet Zone!
</p>


An ID selector can also be defined without specifying a tag name, and may subsequently be applied to any HTML element. The style defined below will be used for any HTML element that uses the ID attribute with a value of "ecowarrior".


#ecowarrior
{
  text-align: center;
  color: green;
  font-weight: bold;
}


The HTML code below demonstrates the use of the ID selector with a value of "ecowarrior" on different html elements.


<h2 id="ecowarrior">
  Save the planet!
</h2>

<p id="ecowarrior">
  Donā€™t use fossil fuels!
</p>



Common CSS properties and values



Background Properties
PropertyDescriptionValues
background-attachmentSpecifies whether a background image is fixed, or scrolls with the page.

Example:

div.header
{
  background-image: url(/images/header.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

scroll
fixed
background-colorSpecifies the background colour of an element.

Example:

body
{
  background-color: #ffffff;
}

rgb(n,n,n)
#nnnnnn
colour-name
transparent
background-imageSpecifies a background image to be used.

Example:

div.header
{
  background-image: url(/images/header.gif);
  background-repeat: no-repeat;
  background-position: center;
}

url(url)
none
background-positionSpecifies the placement of a background image.

Example:

div.header
{
  background-image: url(/images/header.gif);
  background-repeat: no-repeat;
  background-position: center;
}

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeatSpecifies whether/how a background image will be repeated.

Example:

div.header
{
  background-image: url(/images/header.gif);
  background-repeat: no-repeat;
  background-position: center;
}

repeat
repeat-x
repeat-y
no-repeat



Text Properties
PropertyDescriptionValues
colorSpecifies a text colour.

Example:

p { color: #000000 }

rgb(n,n,n)
#nnnnnn
colour-name
line-heightSpecifies the distance between lines.

Example:

p.double_space { line-height: 2em }

normal number
length
%
letter-spacingSpecifies the spacing between characters.

Example:

p.stretched { letter-spacing: 2em }

normal
length
text-alignSpecifies whether text is left-aligned, right-aligned, centred or justified.

Example:

p { text-align: justify }

left
right
center
justify
text-decorationSpecifies how text is decorated.

Example:

a { text-decoration: none }
a:hover { text-decoration: underline }

none
underline
overline
line-through
blink
text-indentSpecifies an amount by which the first line of text in an element is indented.

Example:

p { text-indent: 1em }

length
%
text-transformSpecifies the case in which text appears.

Example:

h1 { text-transform: capitalize }

none
capitalize
uppercase
lowercase
vertical-alignSpecifies the vertical alignment of an element.

Example:

td { text-align: top }

baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
white-spaceSpecifies how white space inside an element is handled.

Example:

body { white-space: normal }

normal
pre
nowrap
word-spacingSpecifies the spacing between words.

Example:

p.spaced_out { word-spacing: 3em }

normal
length



Font Properties
PropertyDescriptionValues
font_familySpecifies preferred typeface. One or more alternative typefaces can be
specified in a comma-separated list, including generic typefaces (if the
name of a font-family consists of more than one word, it must be
enclosed within speech marks, e.g. "Monotype Corsiva".

Example:

p { font-family: arial, Helvetica, sans-serif }

family-name
generic-family
inherit
font-sizeSpecifies the font size. Font sizes can be absolute (sets the text to a
specified size ā€“ user cannot change text size in some browsers) or
relative (sets the size relative to a parent element ā€“ user can change
text size in all browsers).

Example:

p { font-size: 14 px } /* font size in pixels */
p { font-size: 1 em } /* 1em = browser default */

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-styleSpecifies the font style for text.

Example:

p { font-style: normal }
p.italic { font-style: italic }

normal
italic
oblique
inherit
font-variantSpecifies whether or not text is displayed as small-caps.

Example:

p { font-variant: small-caps }

normal
small-caps
inherit
font-weightSpecifies the font weight.

Example:

p { font-weight: bold }

normal
bold
bolder
lighter
100, 200,
300, 400,
500, 600,
700, 800,
900
inherit



Border Properties
PropertyDescriptionValues
border-bottom-colorSpecifies the colour of the bottom border.(see border-color)
border-bottom-styleSpecifies the style for the bottom border.(see border-style)
border-bottom-widthSpecifies the width of the bottom border.(see border-width)
border-colorSpecifies the border color.

Example:

table
{
  border-style: solid;
  border-width:1px;
  border-color: #000000;
}

rgb(n,n,n)
#nnnnnn
colour-name
transparent
inherit
border-left-colorSpecifies the colour of the left border.(see border-color)
border-left-styleSpecifies the style for the left border.(see border-style)
border-left-widthSpecifies the width of the left border.(see border-width)
border-right-colorSpecifies the colour of the right border.(see border-color)
border-right-styleSpecifies the style for the right border.(see border-style)
border-right-widthSpecifies the width of the right border.(see border-width)
border-styleSpecifies the border style.

Example:

table
{
  border-style: solid;
  border-width:1px;
}

none hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-top-colorSpecifies the colour of the top border.(see border-color)
border-top-styleSpecifies the style for the top border.(see border-style)
border-top-widthSpecifies the width of the top border.(see border-width)
border-widthSpecifies the width of all four borders (either in pixels, or using
one of three pre-defined values).

Example:

table
{
  border-style: solid;
  border-width:5px;
}

thin
medium
thick
length
inherit

NB: If the border-style property is not set, other border properties will have no effect, even if set. The order in which the border properties should appear is:

  1. border-style
  2. border-width
  3. border-color

Note that the top, right, bottom and left border properties can be assigned different styles, widths and colours, either individually or within the same statement. The following code, for example, assigns different colours (red, green, blue and yellow!) to each border:


div
{
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff #ffff00;
}


Note the ordering of the values: top, right, bottom, left. Note also that the border style properties can each have from one to four values, which are interpreted as shown below.


border-color: red green blue yellow;
/* top border = red */
/* right border = green */
/* bottom border = blue */
/* left border = yellow */

border-color: red green blue;
/* top border = red */
/* right and left borders = green */
/* bottom border = blue */

border-color: red green; /* top and bottom borders = red */
/* left and right borders = green */
border-color: red;
/* all borders = red */




Margin Properties
PropertyDescriptionValues
marginSpecifies values for the top, right, bottom and left margins, either
together or as separate values. The margin clears an area around
an element, outside the border, and is completely transparent.

Example:

div { margin: 10px; }

auto length %
margin-bottomSpecifies a value for the bottom margin.

Example:

div { bottom-margin: 30px; }

(see margin)
margin-leftSpecifies a value for the left margin.

Example:

div { left-margin: 40px; }

(see margin)
margin-rightSpecifies a value for the right margin.

Example:

div { right-margin: 20px; }

(see margin)
margin-topSpecifies a value for the top margin.

Example:

div { top-margin: 10px; }

(see margin)

Note that the top, right, bottom, and left margin can be set to different values, either individually or within the same statement. The following code, for example, assigns different margin values to the top, right, bottom and left of a paragraph:


p { margin: 10px 20px 30px 40px }


Note also that the margin property can have from one to four values, which are interpreted as shown below.


margin: 10px 20px 30px 40px;
/* top margin = 10 pixels */
/* right margin = 20 pixels */
/* bottom margin = 30 pixels */
/* left margin = 40 pixels */

margin: 10px 20px 30px;
/* top margin = 10 pixels */
/* right and left margins = 20 pixels */
/* bottom margin = 30 pixels */

margin: 10px 20px; /* top and bottom margins = 10 pixels */
/* left and right margins = 20 pixels */

margin: 10px;
/* all margins = 10 pixels */




Padding Properties
PropertyDescriptionValues
paddingSpecifies the top, right, bottom and left padding values, either
together or as separate values. The margin clears an area around
the content of an element, inside the border.

Example:

div { padding: 10px; }

length
%
padding-bottomSpecifies the bottom padding for an element.

Example:

div { bottom-padding: 30px; }

length
%
padding-leftSpecifies the left padding for an element.

Example:

div { left-padding: 40px; }

length
%
padding-rightSpecifies the right padding for an element.

Example:

div { right-padding: 20px; }

length
%
padding-topSpecifies the top padding for an element.

Example:

div { top-padding: 10px; }

length
%

Note that the top, right, bottom, and left padding can be set to different values, either individually or within the same statement. The following code, for example, assigns different padding values for the top, right, bottom and left of a table cell:


td { padding: 10px 20px 30px 40px }


Note also that the padding property can have from one to four values, which are interpreted as shown below.


padding: 10px 20px 30px 40px;
/* top padding = 10 pixels */
/* right padding = 20 pixels */
/* bottom padding = 30 pixels */
/* left padding = 40 pixels */

padding: 10px 20px 30px;
/* top padding = 10 pixels */
/* right and left padding = 20 pixels */
/* bottom padding = 30 pixels */

padding: 10px 20px;
/* top and bottom padding = 10 pixels */
/* left and right padding = 20 pixels */

padding: 10px;
/* all padding = 10 pixels */




List Style Properties
PropertyDescriptionValues
list-style-imageSpecifies an image to be used as a list item marker in an unordered
list (usually marked with bullets).

Example:

ul { list-style-image: url('pointer.gif') }

URL
none
inherit
list-style-positionSpecifies the degree to which items in a list are indented ("outside"
is the default, "inside" increases the indentation level).

Example:

ul.inside {list-style-position: inside}

inside
outside
inherit
list-style-typeSpecifies the type of list item marker.

Example:

ul.square {list-style-type: square}
ol.lower-roman {list-style-type: lower-roman}

none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

Note that more than one of the list-style properties can be set with a single statement, as illustrated by the example below. Note that the order in which values must appear is type, then position, then image (although they do not all have to be present).


ul { list-style: circle inside }