Cascading Style Sheets

CMPS 335 Advanced Web Publishing Cascading Style Sheets

Introduction to DHTML and Cascading Style Sheets

Dynamic HTML

Dynamic HTML (DHTML) is a series of technologies inctroduced in the 4.0 versions of both Netscape and Microsoft browsers to enhance the dynamic capabilities of these browsers. Cascading Style Sheets (CSS) and JavaScript make up the cross-browser Dynamic HTML that are most useful. CSS gives you perfect control over the position and appearance of text and graphics on the screen. CSS also allows you to redefine HTML tags so they do exactly what you want them to. JavaScript enables you to change the appearance of Web pages, move Web page elements on the screen, and cause them to appear or disappear. With JavaScript, Web pages can also respond to user requests. JavaScript makes Web pages dynamic and interactive.

Cross-Browser DHTML and Browser-Specific DHTML

Although Netscape and Microsoft browsers implement dynamic features differently, the specifications of these two browsers do overlap. The following technologies will run nearly identical, regardless of the DHTML browser being used.

Cascading Style Sheets (CSS Level 1 and CSS-Positioning)
JavaScript 1.2

Cross-browser DHTML and browser-specific DHTML are summarized in the following diagram:


                           | Cross-Browser |
        Netscape DHTML     |    DHTML      |            
                           |               |    Microsoft DHTML
     $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$   
     $                     *************************************                
     $                     *               $                   * 
     $    JSS              *   CSS         $   Dynamic CSS     *
     $    Layers           *   JavaScript  $   Visual Filters  *                
     $                     *               $                   *         
     $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$                   *
                           ************************************* 
                           |               |     
                           |               |

Cascading Style Sheets

Cascading Style Sheets is a separate code that is used to enhance the abilities of HTML. A style is a named collection of different properties (font size, color, bold, etc.) that you want to apply to similar types of text (headings, titles, etc.). Cascading Style Sheets are amazingly easy to set up by using just style rules. Cascading refers to the capability for style information from more than one source to be combined. Rules in later sheets take precedence over earlier ones. Major advantages of CSS are listed below.

Advantages of Style Sheets

Style sheets enable you to place blocks of text and images exactly where and how you want them. They give you greater design freedom and easier layout without using tables.
Style sheets allow you to redefine preexisting HTML tags so that they do exactly what you want them to.
A style or a set of styles can easily be applied to multiple elements on a page and also to multiple pages. Therefore, they can drastically reduce the amount of time you spend to create Web pages.

Examples:

 
   H1 {font: italic 20pt Times, serif; color: blue; text-align: center;
       background: yellow; border: 2px solid red; padding: 5px;}
   H2 {font: bold 14pt Arial, sans-serif; text-decoration: underline;}

Click Here for examples

Return to CMPS 491 Home Page
Return to Web Site Home Page