Navigation Button

Internet Brothers: Helpware for the Cybercommunity - Cascading Style Sheets

Cascading Style Sheets Basics (continued)

Defining a Separate CSS File

Isolate your CSS from your HTML document It's sometimes handy to isolate your styles in a separate file, particularly if you have a lot of them. This approach makes it relatively easy to standardize the appearance of your web pages site-wide. To create a CSS file, just type the style definitions in a separate document, making sure you type only the style definitions, not the <STYLE> tags or anything else. Save the file with an extension of .css. For example, yourcssfile.css.

Referring to the CSS File

The trick to referring to an external CSS is this line:

<LINK REL=STYLESHEET TYPE="text/css" HREF="yourcssfile.css">

The <LINK> tag provides a connection between the document being displayed and the external file. You can put a complete URL in the quotes following the HREF attribute — this example assumes the file is in the same directory as the document that refers to it.

Defining a Style Class

Here's a trick that makes it easy to apply a style to any passage of HTML code you like. Define a CSS that looks like this:

<style type="text/css">
.blue {color:blue}
.brown {color:brown}
</style>

Put them to use by applying them in an HTML document. Here is an example:

<html>
<head>
<title>CSS Style Classes</title>
<STYLE TYPE="text/css">
.blue {color:blue}
.brown {color:brown}
</STYLE>
</head>

<body>
<P>This document illustrates style classes.

<SPAN CLASS=blue>
<P>Am I blue?
</SPAN>

<P>Mud is <SPAN CLASS=brown>brown</SPAN>.

</body>
</html>


This Cascading Style Sheets tutorial was inspired and assisted by David Wall.


Helpful TipTo print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

previous page     top of page     next page


HTML Utopia: Designing Without Tables Using CSS
HTML Utopia: Designing Without Tables Using CSS
  • Learn to use CSS for layout
  • Build faster loading, leaner pages
  • Produce clean, beautifully managed code
  • Design device-independent, highly accessible pages
  • Write standards compliant code
Download sample
chapters free!


Read more info


The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said. In our effort to be friendly to all browsers, the menu tree is functional with version 4 or greater of both the Netscape and Internet Explorer products.

As stated above, hovering over the button will open the menu for these browsers. But if you have an older product, don't fret, we'll send you to the scum page. Just click the button.

Why haven't you downloaded the newer versions? They're free you know.
Download Internet Explorer
Download Netscape Communicator

The hierarchical menus were created using Peter Belesis' Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

Our Lovely Email Icon    another darn bug






Site Map

Was this site useful to you?
Vote For Us at WebbieWorld

Copyright 1997-2004 Internet Brothers. All Rights Reserved. Really.