Cascading Stylesheets
 
Cascading Style Sheet have four types : inline, embedded, linked (external) and imported.
Inline- is an HTML attribute- style written in the <body> section of the HTML doc. Format just a section of the web page.  

A new background and font color with inline CSS

 <p style="background: blue; color: white;">A new background and font color with inline CSS</p>

This is broken

This is working

 <p style="background: url("yellow_rock.gif");">
This is broken</p>

<p style="background: url(yellow_rock.gif);">
This is working</p>

Embedded- style sheet control the styles for the page in which they are embedded. Write the code in the <head> section of the HTML doc.


 click to see sample
Linked (external)- Linked style sheets can control the design of multiple documents. Write CSS in a separated doc. Can format soem or all the pages.

<LINK REL=StyleSheet HREF="css_style.css" TYPE="text/css">

The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. (Configuring the server to send text/css as the Content-type for CSS files is also a good idea.)

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

Imported- Imported CSS can also control the desgn of multiple documents, and are typically used for purposes of modularity.


Older browsers such as Netscape 4 do not recognize @import and compleatly igore it.

The @import style sheet can come after a linked style sheet and override CSS that was written for older browsers.

Imported CSS: @import used to call an external style sheet, used either in the <HEAD>…</HEAD> section, or in another external file.

More than one style sheet (or module) may be imported, but the @import declaration  must  be the first declaration in the style section or file. 

   <STYLE TYPE="text/css"> <!-- @import url(/path/style.css); --></STYLE> 

 <style type="text/css">  

@import "css/complete .css";  

@import "css/complete_2.css";	  

@import "css/complete_3.css";
</style>
CSS Rules
CSS establishes rules that declare how certain elements are rendered on a page or through the web site.

A Cascading Style Sheets rule is made up of a selector and a declaration.

H2 {color: blue;}
selector {declaration;}

The selector always precedes the declaration, which consists of everything inside te declaration's braces.

The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, "color:blue".

The selector specifies which element(s) will be affected by the delaration. Think of the selector as a link of sorts between the HTML mark-up document and the style of the Web page.

A declaration has two parts separated by a colon: property and value.

selector {property:value}
P            {color:      navy;}
                    declaration

More than one declaration may be placed inside the curly braces and a semi-colon must separate each declaration from the next. The ending declaration does not require a semi-colon but I like to use it.

selector {property:value; property:value;}

H2 {color:blue; font-family:Arial, sans-serif;}

P { color: blue; background-color:yellow;}

If you neglect to place a semi-colon between any two declarations your style sheet will seriously malfunction or totally fail.

Instead of coding

H1 {font-family:Arial, Helvetica, sans-serif;}
H2 {font-family:Arial, Helvetica, sans-serif;}
H3 {font-family:Arial, Helvetica, sans-serif;}

You may group selectors together. When grouping selectors you will need to separate each selector with a comma. When grouped together, one rule applies to several selectors.

H1, H2, H3 {font-family: Arial, Helvetica, sans-serif;}
Properties are pre-defined terms that define the action taken on an element.. The color property applies a color specification to an element.
All properties have a value an exact specification of the property.
 
Color
Any color can be assigned a system color value of the user.

<style type="text/css">
<!--

body {

background-color: Background;

}
-->
</style>

Color names are predefined. There are 16 colors that are considered "safe-colors," because they display the same accross all browsers.

black, maroon, white, purple, silver, fuchsia, gray, teal, blue, green, navy, lime, aqua, yellow, red, olive
Hexadecimal Values (the most commonly applied on the web) consist of a pound sign #, followed by a combination of the integer 0-9 and the letters A through F.
Example gives a page background color body { color: #000000;} (black color, the absence of all color)
  body { color: #ffffff;}(white color, the presence of all color)
If you want all your paragraphs to be blue, you can simply write: p{color:blue;}
The backround color fills each paragraph's entire containing area. The backround color will only extend the length of the elements text. p{background-color:orange;}
  .parag {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFCC33;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: ridge;
}