Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

the external cascading stylesheet and other methods of applying stylesheets tutorial and user examples
 

applying cascading style sheets

this tutorial shows four main methods of applying stylesheets to a html document, these are

  1. embedding stylesheets in the <HEAD></HEAD> part of a webpage
  2. inline stylesheets in a html tag
  3. linking to an external stylesheet
  4. importing stylesheets

1. Embeding cascading stylesheets in the <HEAD>

 in this example we change the color of a link
we can suggest the color of links, visited (vlink) and active links (alink) in the body tag

<BODY link="blue" vlink="purple" alink="red">

adding the stylesheet below to the head of a html document will cause links to be green when the mouse cursor hovers over them

but stylesheets can do much more than that, if you are using internet explorer you may have noticed that the links not only change color but the underline is also removed.
heres an example of how to achive this 

 A:HOVER {
          color: green;
          text-decoration: none;
 }


we can use the stylesheet to control the font size, font color, background color and cursor (in Internet Explorer) 


 A:HOVER {
          color: #FF0066;
          background-color: transparent;
          text-decoration: none;
          cursor: hand;
          font-size: 12pt;
 }


hold your cursor over this link Yahoo


2. inline stylesheets in a html tag

 style properties can easily be included in individual html tags like this...

<A HREF="Yahoo" STYLE="color: red; text-decoration: underline;">Yahoo</A>

<TT STYLE="color: yellow; font-family: arial; background-color: purple;">
This is typewriter text with an inline stylesheet
</TT>

3. external stylesheets

 the ability to use an external stylesheet adds a tremendous amount of flexibility to html documents, because any amount of pages can link to the same .css document a uniform look can be applied to an entire website
the benefits of an external stylesheet are that filesize is reduced because individual html documents do not reqire a stylesheet to be embedded as well as the obvious saving in time

an external stylesheet can be written with most simple text editors and should be saved as whatever-you-want.css
but for the sake of argument lets call it style.css

 NOTEPAD
 File   Edit   Search   Help  

 /* comment */

 BODY {
       background-color: black; 
       color: white;
 }

 TT {
     COLOR: green;
     FONT-FAMILY: arial;
 }

 H1 {
     COLOR: red;
     FONT-FAMILY: tahoma, arial;
 }

notice that comments can be added to the stylesheet between the /*slash|star*/ but html tags should not be included
/* comments go in here */

below is an example of the link that would be used for style.css and is placed in the HEAD part of a html document
<HEAD>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">
</HEAD>



4. importing stylesheets

 An example of the import statement is included here for the sake of completeness, unless you are a hardcore coder you may prefer to skip this part and go straight to the links at the bottom of this page.

A stylesheet may be imported with the @import statement.
The @import statement may be used in a .css file or inside the <style> element

<STYLE TYPE="text/css">
<!--
@import url(http://www.somewhere.com/style.css);
@import url(/somefolder/another.css);
TT { color: red; }
H1 { color: lime; }
-->
</STYLE>
The stylesheet example above shows that css rules may be included but the @import statement must occur at the start of the style sheet.

Rules specified in the stylesheet override rules in the imported stylesheets, even if one of the imported stylesheets contained
TT { color: blue;}
typewriter text would still be rendered in red

The order in which the stylesheets are imported determines how they cascade.
In the example above, if the first imported stylesheet (style.css) specifies that PRE elements be shown in red and the second (another.css) stylesheet specifies that PRE elements be shown in purple, in this case the second imported stylesheet (another.css) overrides the first stylesheet (style.css) and PRE elements would be rendered in purple.
home
home
 		next: stylesheets class and ID
previous: stylesheets syntax

html tutorial css tutorial javascript webmaster articles link exchange

css tutorial