This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

CSShark - Stylesheets
The CSS Know-How Site

 

The Basics

The Stylesheet

A stylesheet is a set of stylistic rules that tell a browser how the different parts of a HTML document are presented.

There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

a) inline (internal) (Deprecated for XHTML)

This means you specify a CSS style at this specific point for this specific tag in this specific document, like:

<p style="color: #000088;">now follows blue text.</p>

This style is applied only on this instance of the <p> tag, and wherever you want the same style to be applied you have to manually do so.

b) embedded (internal)

In the <head></head> section of your document you declare styles, like:

<style type="text/css">
  <!--
p {color: #000088;}
  //-->
</style>

That changes the color of every <p> tag on a page that has this declaration to blue.

 Back to the Top 

Currently CSS is the only style sheet language, but the W3C has already prepared for further, additional languages. Therefore it is *highly* recommended that you include a type specification: <STYLE TYPE="text/css">.

c) linked (external)

The syntax is:

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

You have an external stylesheet where you define your styles and link that sheet with this command to the page/document in question - the link-command is in the head section of your document.

Don't forget that an external stylesheet is a text file with the ending of .css, and it is supposed to contain only CSS, and nothing but CSS. No javascript comments, no DOCTYPE or anything else, only CSS.

d) @import (external)

You import a stylesheet, and the syntax is:

<style type="text/css">
  <!--
    @import url(pathname/stylesheetname.css);
  //-->
</style>

That command, also in the head-section of your document, imports an external stylesheet.

 Back to the Top 

Other topics:

CSSharky Logo

If you have any questions or come across something that should be included here, please send me an . This tutorial is constantly growing, and your help is appreciated.

Home   • CSS FAQs   • Basics   • NN4 Issues   • CSS-P   • Links   • Books  
Content, Design and Programming © 2001 by MaKo from Orion HiTek, Inc.. All rights reserved worldwide.