Style Sheets

Linking to a Style Sheet
You can create a separate text file with a .css file extension and place all your style definitions (explained below) in that file. Then, using the LINK tag, you can link the style definitions to your current document.
Using this method, you can have one style sheet for the entire site that is linked to each page. That way you can alter the look of all your documents be simply editing the .css file. See syntax below.

Inside the HEAD tag, add something like this:
<LINK REL=STYLESHEET HREF="URL of style sheet" TYPE="text/css" >

Your Style Sheet might contain something like this:
H1 {font-size: 20pt; font-weight: bold}
H2 {font-size: 16pt; font-weight: bold}
P {margin-left: -20px; margin-right: -20px; margin-top: 30px}
BODY {background: URL(http://my.server.com/pictures/back.gif); text-indent: 2cm}
Adding a Style Block
To set the style for an entire page, you can place all the style definitions (explained below) inside the <STYLE>.....< /STYLE> tag. This tag goes inside the HEAD of your document. Make sure to enclose the definitions within comment tags so that older browsers do not display them. See example below.

<HEAD>
.
.
<STYLE TYPE="text/css" >

< /STYLE>
< /HEAD>
Inline Style Attributes
If you simply want to change the style of a particular section of your document, you can do so with the STYLE attribute. You can place this new attribute inside just about any HTML tag, and the style definitions will be in effect until the closing of that tag. Below are some examples.

To change the color and indent of a certain paragraph, you could do the following:
<P STYLE="margin-left: 1in; margin-right: 1in; color: #0000FF">
This text would be indented and blue.
< /P>

To change the style for an entire portion of your document, you might do the following:
<DIV STYLE="margin-left: 0.5in; margin-right: 0.5in; font-family: Arial">
This whole division of the page will be indented and any text will be displayed in the Arial font.
< /DIV>
Style Definitions
All three methods of adding style to a document use the same syntax for style definitions. Except for inline attributes, a style definition consists of a tag followed by a list of specifications enclosed in curly braces. You can define styles for any tag in HTML. Once you have specified styles for a certain tag, every time the tag is used, the styling will be in effect. Below is a list of all the style definitions and their possible values.
1. background -- Specifies a background color or image.
  - Values: URL|RGB triplet
  - Example: BODY {background: #FFFFFF}
2. color -- Specifies the color of the text.
  - Values: RGB triplet
  - Example: H4 {color: #000000}
3. font-family -- Specifies the typeface.
  - Values: typeface name or list of names
  - Example: P {font-family: Arial, Helvetica, "Courier New"}
4. font-size -- Specifies the size of the text.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)|% (percentage)
  - Example: A:visited {font-size: 14pt}
5. font-style -- Specifies the style of the text.
  - Values: italic|normal|oblique|small caps
  - Example: H3 {font-style: italic}
6. font-weight -- Specifies the thickness of the text.
  - Values: extra-light|light|demi-light|medium|demi-bold|extra-bold
  - Example: H2 {font-weight: bold}
7. line-height -- Specifies the distance between lines.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)|% (percentage)
  - Example: DIV {line-height: 20pt}
8. margin-left -- Specifies the left margin.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)
  - Example: BODY {margin-left: 3cm}
9. margin-right -- Specifies the right margin.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)
  - Example: BODY {margin-right: -0.5in}
10. margin-top -- Specifies the top margin.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)
  - Example: BODY {margin-top: 20px}
11. text-align -- Specifies the justification of the text.
  - Values: left|center|right
  - Example: H1 {text-align: center}
12. text-decoration -- Specifies certain text effects.
  - Values: none|italic|underline|line-through|overline|blink
  - Example: A:link {text-decoration: none}
13. text-indent -- Specifies the text indentation.
  - Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)
  - Example: P {text-indent: 0.5in}
Additional Options
1. Grouping
  Certain style definitions can be grouped together in one statement. Instead of using three statements to specify all three margins, you could use the following:
  P {margin: 20px 3cm 3cm}
  The order is top, right, and left.
  
  You can also group all the font statements together like this:
  A:active {font: bold italic 15pt/22pt Arial, serif}
  The weight and style must be specified first, and the first number represents the size, while the second number represents the line height.
2. Classes
  You can also define more than one instance of a tag. For example, say you wanted two H1 headings; one that was red and one that was blue. You could define the two tags like this:
  H1.redh {color: #FF0000; font-size: 20pt}
  H1.blueh{color: #0000FF; font-size:20pt}
  Later you could use them like this:
  <H1 CLASS=redh>This will be red< /H1>
  <H1 CLASS=blueh>This will be blue< /H1>

Free-CGI.com is updated on a daily basis. New features and applications are added almost
every day. Free-CGI.com is always under construction. If you have any comments or
suggestions, please contact free-cgi. Thanks!