WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




CSS Simplifies Your Life Part 2

CSS Simplifies Your Life
Part 2

by Scott Clark

There's Never Enough CSS in Your Life

The HTML4 specification states that CSS can be written inline or specified as an external file. Inline CSS may be located in the HEAD of a document, or it may be used as a part of a tag, such as

<H3 style="color:blue">

If you're using MSIE
this text will be blue

</H3>

Styles which are defined within a tag are supposed to override any style which is defined in the header or in an external style sheet. This works fine in MSIE4, but if you're using Netscape 4 to view this page, then you can see that the original style has not been overridden. Hopefully Netscape will get a little closer to the specification with the next release of Navigator.

Here is the Style Sheet which is linked to this page:

 A:link { background: white; color: blue; text-decoration: none; } A:visited { background: white; color: blue; text-decoration: none; } A:active { background: white; color: blue; text-decoration: none; } BODY {background:#FFFFF;color:#000000;margin:.02in .02in .10in;} H2 {font:17pt Verdana, Arial;color:#A00000;font-weight:bold;} H4 {font:12pt Verdana, Arial;color:#888888;font-weight:bold;font-style:italic;} H5 {font:8pt Verdana, Arial;color:#000000;font-weight:bold;} P {margin-left: .02in;} P.intro{font:15pt Arial;color:#A00000;font-weight:bold;} PRE {font:12pt Times New Roman;font-style:italic;} B {font: 13pt Arial;font-weight:bold;} TD {font: 13pt Arial;} 

(Realize that the style for each element may be displayed on one line, as they are above, or they may be displayed on several lines, as in the example below. This is simply a matter of preference.)

 H4 { font:12pt Verdana, Arial; color:#888888; font-weight:bold; font-style:italic; } 

One of the problems with using inline Style Sheets is that they somewhat defeat the purpose of using Style Sheets; namely that you aren't separating the style from the data. Any style sheet can be defined in an external file. You simply omit the STYLE tags and save the Style Sheet in a file ending in extension .css. The file is called from the header using a relative link in much the same manner as external JavaScript files:

 <link rel=stylesheet href="wdstyle.css" type="text/css"> 

Style Sheets may also be used to define style classes. These classes may be used to manipulate and position your HTML "elements" anywhere on the page. For instance, when you move your mouse over this text, you'll see that the paragraph moves down and to the right a bit. To get it back where it started, move your mouse over the "Bring It Back" link below this paragraph.

[ Bring It Back]

[ < CSS Simplifies Your Life:
Part 1 ]
[ CSS Simplifies Your Life:
Part 3 > ]


HTML5 Development Center


Recent Articles