You are here:About>Computing & Technology>Web Design / HTML> CSS> Beginning CSS> CSS Step By Step
About.comWeb Design / HTML
Newsletters & RSSEmail to a friendSubmit to Digg
CSS Resources

Displaying CSS Stylesheets DynamicallyCSS Tips and TricksCSS Styles Library

More CSS Articles

Advanced CSSBeginning CSSCSS Positioning

CSS Links

CSS ArticlesCSS Links

CSS Step By Step

From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

How to Add CSS Stylesheets to Your Web Pages

What is CSS

There are essentially two parts to Cascading Style Sheets:

  • the styles
  • the stylesheet
What this means is that when you want to learn CSS, you need to learn both the style properties - the styles - and the placement of those properties - the stylesheet.

Style properties are covered in detail in the styles library and other articles. In this article, you will learn exactly how to place your stylesheets so that you can use them both on one page and all throughout your Web site.

Inline CSS Styles (Without a Stylesheet)

Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style:

<p style="background-color : #cccccc; border : none;">
This paragraph has an inline style to change the background color to grey.
</p>

The style is defined by the "style" attribute on the element itself.

One Document CSS Stylesheet

If you want to set up a stylesheet to affect one Web page, you can do that with a stylesheet in the head of your document. For this you use the<style></style>tag in the <head> of your Web document.

Here are some tips for working with these stylesheets:

  • Start them out right
    Use attributes of the <style> tag to define what the browser should expect
    <style type="text/css">
  • Use comments
    Comment tags insure that older browsers don't display your stylesheets.
    <style type="text/css">
    <!--
    style properties
    -->
    </style>
  • think about your styles
    In many cases, you don't need to set many different styles, just basic ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.

Site-Wide Stylesheets
Externally linked stylesheets allow you to use one stylesheet across your entire site. There are two ways to do this:

  1. linking
    <link rel="stylesheet" type="text/css" href="styles.css">
  2. importing (Internet Explorer only)
    <style type="text/css">
    @import URL (http://www.yoursite.com/styles.css);
    </style>

The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser.

Create three stylesheets:

  • a generic one that will cover most basic stylesgeneric.css
  • one for Internet Explorerie-styles.css
  • one for Netscapens-styles.css

In the head of your document load them in this order:

  1. The generic stylesheet
    <link rel="stylesheet" type="text/css" href="generic.css">
  2. The Netscape stylesheet
    <link rel="stylesheet" type="text/css" href="ns-styles.css">
  3. The IE stylesheet (using the import command)
    <style type="text/css">
    @import URL (http://www.yoursite.com/ie-styles.css);
    </style>

Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all.

Previous Features
Las Vegas on a Budget

Find a BargainHotel DealsCheap EatsFree AttractionsEntertainment for Less

 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.