Cascading Style Sheets

The World held in our hands

Understanding Style Rules :

In CSS, Style Rules express the style characteristics for an HTML element. A set of Style Rules is called a Style Sheet. A style rule consists of two parts: a selector and a declaration.
selector {attribute1:value; attribute2:value ...}

The selector determines the element to which the rule is applied.
The declaration details the exact property values.

The property is a quality or characteristic, such as color, font-size, or margin followed by a colon (:). The Value is the precise specification of the property, such as red, 12 pt (point) for a font-soze, or 10 px (pixels) for margin, followed by a semicolon (;)

You can combine CSS rules with HTML code in the following three ways:

nline or Embedded Style

You can define the style for a single element using the STYLE attribute. My first use was to change the form element of a text box.

For Example from the top of my test template:

The Code is as follows:

<INPUT TYPE="text" name="Name" SIZE=30,1 MAXLENGTH=30 value="Your Name" onFocus=select() style="font-size: large; font-family: Arial; font-weight: bold; color: Black; background-color: aqua; text-align: center;"><BR>
<BR>
<BR>
<FONT SIZE="+1" COLOR="#0000ff">Enter E-mail Address here: </FONT><BR> <INPUT TYPE="text" name="Email" SIZE=40,1 MAXLENGTH=40 value="yourUserID@yourISP.dom" onFocus=select() style="font-size: large; font-family: Arial; font-weight: bold; color: Black; background-color: lightpink; text-align: center;"></form>

rouping Selector or <Style> Element

The <style> element is always contained in the <head> section of the document. Style rules contained in the <style> element only affect the document in which they reside. All the templates list here use the <style> element in the head of the documents. Here's the hover property for links:

<STYLE TYPE="text/css">

/*changes properties of links-this is a style comment */
A:link {color:blue; text-decoration:none}
A:alink {color:red; text-decoration:none}
A:hover {color:blue; text-decoration:underline; background:#FFCC33}
A:vlink {color:blue; text-decoration:none}

</style>

sing External Style Sheets

Placing style sheets in an External Document lets you specify rules for different HGTML documents or entire web sites. An external style sheet is simply a text document that contains the style rules. External style sheets have .css extentions. The .css file has no HTML code, just style rules such as:

A:link {color:blue; text-decoration:none}
A:alink {color:red; text-decoration:none}
A:hover {color:blue; text-decoration:underline; background:#FFCC33}
A:vlink {color:blue; text-decoration:none}

Linking to an External Style Sheet

The <Link> element lets you establish the relationship between the HTML document and the external .css file. It can only be used in the <head> section of a HTML document. For example my Brandon computer science web site uses the following:

<HEAD>
<TITLE>Hillsborough Community College, Brandon Campus - Computer Science Program


<LINK HREF="brandonstyles.css" REL="stylesheet" TYPE="text/css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Author" CONTENT="Š2001 Hillsborough Community College Brandon Campus, ALL RIGHTS RESERVED.">


</HEAD>

Old Site
Sample Banner 750x82:

Cascading Style Sheets (CSS)

Understanding Style Rules :

Linking to an External Style Sheet