CSS TUTORIAL

STYLE tags may be declared between the HEAD tags, an external STYLE sheet, or in line with document tags in the BODY. If it's declared between the HEAD tags, or an external STYLE sheet, it will affect the entire web page, unless specifically overridden in individual tags.

CSS is declared by HTML SELECTOR-PROPERTY-ATTRIBUTE

EXAMPLE

<H4 STYLE="color: green">This header is green</H4>

This header is green

H4 is an HTML selector, color is a property of H4 and green is an attribute. HTML HEADERS

An external style sheet may be written in any text editor. Save the file with the .css extension, not HTML. The main advantage of a style sheet is uniformity. If you have several web pages that need to be similarly designed then a style sheet is probably best.

EXAMPLE

 
P {margin-right: 20px;}
BODY {background-image: url("myImage.gif");}

Save this file and insert a link in the HEAD section.

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="URL" />
</HEAD>

<HEAD>
<STYLE TYPE="text/css">
       <!--
         HR {color: #FFFF00;}
         P {margin-right: 20px;}
        -->
 <!--Surround the code with an HTML comment tag-->
</STYLE>
</HEAD>

OR Insert directly into an HTML tag.

<P STYLE="MARGIN-RIGHT: 20px;">
<BODY STYLE="MARGIN-RIGHT: 20px;">

What do all hyper-links have in common? They are underlined. Here is the CSS HTML code to remove underlined hyper-links using the TEXT-DECORATION property.

EXAMPLE

<HEAD>
<STYLE TYPE="text/css">
     <!--
        A { TEXT-DECORATION: none; } 
        -->
</STYLE>
</HEAD>

Additional TEXT-DECORATION attributes

<STYLE>
     <!-- 
P {TEXT-DECORATION: underline OR overline OR line-through
                   OR blink;}
     -->

</STYLE>

EXAMPLE

<P STYLE="TEXT-DECORATION: underline overline blink line-through;">

This text is underlined, overlined and blinks.

It's not necessary to add semi-colons for only one item in a bracket

A { TEXT-DECORATION: none ; }

However, if you insert the STYLE tag directly into an HTML element then you MUST use a semi-colon.

TEXT-ALIGN Attribute

EXAMPLE

<STYLE TYPE="text/css">
<!--
      P { TEXT-ALIGN: right; }
    OR
      P { TEXT-ALIGN: center; }
    OR
      P { TEXT-ALIGN: left; }
    OR
      P { TEXT-ALIGN: justify; }
-->
</STYLE>