Placing CSS Style Information
Inline Styles
There are two ways to place style information within your page.
1) In situ
If you want to assign a style to a paragraph, for example, put it in the <P> tag. For example:
<p style="font-size: 18pt; margin-left:2in;">
2) SPAN
Span is used to surround some text and add style to it. For example:
<span style="background:green; font-size:12pt;">Green is easy on the eyes and environmentally friendly</span> <span style="background:red; font-size:12pt;">whereas red is an angry colour.</span>
Green is easy on the eyes and environmentally friendly whereas red is an angry colour.
The disadvantage to adding style inline is that you have to go through the whole document.
Style Blocks
Style blocks are easier than inline, as you can set the styles at the top of the document instead of having to go through the whole document.
Insert a <style type="text/css"> block at the top of the document in the <head> tag, as follows:
<html>
<head>
<style type="text/css">
BODY {background: black;colour:white}
H1 {font: 18pt Courier bold}
P {font: 8pt Courier; text-indent: 1.0in}
A {text-decoration: none;colour: green}
</style>
</head>
<body>
<H1>This is a Courier 18pt bold header</H1>
<P>This is a CSS page using style blocks.</P>
<p><a href="http://ourworld.compuserve.com/homepages/Snethercott"> is a link to my home page, but it is not underlined because I set text-decoration = none. </P>
Linking to a style sheet
Even better than changing each document's style block, is to link to a common document which contains the style declarations, which you can use for the whole web site, even when it has multiple authors.
Create a text file containing your <style type="text/css"> block with a .css (cascading style sheet) extension, and store it at your site (e.g. the relative address ../images/Main.css).
Then, in the <head> of each document, insert:
<link rel="stylesheet" href="../images/Main.css" type="text/css">
The LINK tag uses the HREF attribute to determine which document to load. The REL attribute gives the relationship between that document and the current one. The TYPE determines the file type so that the browser knows how to interpret it.
If the web server does not have MIME type "text/css", ask the server administrator to add it.
Using more than one style source
The style information that is closest to the element takes precedence, so a style block will override an external style sheet, for example, and <SPAN> will override both.