An Introduction to Cascading Style Sheets (CSS)
About the Author
Matt Mickiewicz
Matt is the co-founder of SitePoint and 99designs and Flippa. He lives in Vancouver, Canada.
By: Matt Mickiewicz
December 26th, 1999
This introduction isn't meant to teach you everything about Cascading Style Sheets, but is rather meant as an overview of what can be done with CSS. Read through this article, and then decide whether or not CSS is right for your site. At the very least, you'll know what can be done using CSS, so when the time comes to gain more control over the layout and typography of your site, you'll know where to turn.
What Are Cascading Style Sheets?
CSS is a form of HTML mark-up that provides web designers with greater control over typography and spacing between elements on a page.
Why Should I Bother Using CSS?
1. Greater control over layout and typography. CSS provides you as a designer with precise control over the fonts used on your site, including size, letter spacing and text decoration.
Elements on a page can be positioned precisely using CSS. In fact at least one major HTML Editor, Dreamweaver 2, uses CSS to control the layout of a page, although it does provide the option to convert to tables.
2. Site-wide changes become easy. Rather than having a style sheet as part of the HTML code of a page, it is possible to specify the URL of a style-sheet that is to be used when formatting a particular page. This makes it very easy to modify the entire site by simply editing a single file.
What About Browser Compatibility?
CSS support is provided in Internet Explorer 4+ and Netscape Navigator 4+. However, some annoying browser inconsistencies continue to make life difficult for those deciding to use CSS on their site. It is possible with a little bit of JavaScript to serve up different style-sheets depending on the browser that is being used to view your site. Alternatively, workarounds can be used so that the style-sheet works in both browsers correctly.
What Does CSS Look Like?
The basic template for CSS code looks like this:
Tag: {Property: value; Property2: value2}
Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected
Notice that CSS makes use of curly brackets instead of < and > .
A Small Snippet:
H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}
The example above will make all the text within H1 tags bold, and size 9.
The Three Ways To Use CSS
There are three ways to use Cascading Style Sheets: inline, embedded, and external/linked style sheets. I'll briefly explain each of them below.
Inline
If you just want to apply formatting to a small piece of text you can use inline styles, which look something like this:
<h3 style="font-weight: bold">this will be bold Embedded
Embedded style sheets are put between the <head> </head> tags on every page that you want to use style sheets on. This is how they look like:
<HEAD>
<STYLE TYPE="text/css">
<!--Tag: {Property: value; Property2: value2}
-->
</STYLE>
</HEAD>
External
Remember how I said that you can use a single style sheet site-wide, and then change all of your pages by editing one file? This is done with external style sheets, which look something like this:
<HEAD>
<LINK REL="STYLESHEET" HREF="/PATH/SHEET.CSS TYPE="TEXT/CSS">
</HEAD>
The SHEET.CSS file would then contain all the style-sheet code which would be applied to any page that calls it using the code above.
Remove 'Em Underlines - A Complete Style Sheet
Do you want to remove underlines from links on your site? Below is a short and sweet style-sheet that will do just that, just copy and paste it between the <head> </head> tags on your site:
<STYLE TYPE="text/css">
<!--
a { text-decoration: none}
-->
</STYLE>
Where To Go From Here
If you're intrigued by the brief overview above, and you want to learn more about Cascading Style Sheets check out the tutorials below:
HTML Goodies [1] - A brief Tutorial on Classes and ID's which are used in CSS.
W3.org [2] - More information than you can shake a stick at.
HTML Help [3] - Several tutorials covering different aspects of Cascading Style Sheets.
Writing Stylesheets [4] - A Brief Guide.
CSS Is Easy! [5] - SitePoint's own Kevin Yank explains the nitty gritty, with plenty of examples.
Good luck!
[1] http://www.htmlgoodies.com/beyond/classid.html
[2] http://www.w3.org/Style/css/
[3] http://www.htmlhelp.com/reference/css/
[4] http://www.canit.se/%7Egriffon/web/writing_stylesheets.html
[5] http://www.webmasterbase.com/article/309