Skip over navigation
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.
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.
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.
Other topics:
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.