Intro to Styles and Cascading Style Sheets
Article ID: KB101406
Understanding Style Sheets: A Baking Analogy
I
love cookies. I also like making cookies. I especially like cookies in fun
shapes. So - thank goodness for cookie cutters! Can you imagine how much longer
it would take to make cookies if you had to cut out each individual shape...
especially if you're a perfectionist, like me, and want the same-shape cookies
to be identical to the others?
It might be a bit of a stretch, but making cookies is a bit like making a web
site. You start with your raw material (the cookie dough; or, your unformatted
text) and mold it into different shapes - or, in the case of the web site,
different formats (different fonts, sizes, and the like). If you're not using
style sheets already, you would be much like the baker who is spending hours carefully
cutting shapes out of cookie dough with a knife instead of using a cookie
cutter.
To appreciate the value of cascading style sheets, let's first take a look at an HTML page
that doesn't use styles (click
to view the page):
If you go to View > View Source with the sample page open in your browser, you can see the many
uses of the <font> tag in the HTML code. Here's a short sampling:
<h1><font color="#000099" size="5" face="AGaramond, Garamond, Georgia, serif">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. </font></h1>
<p><b><font size="2" color="#CC0000" face="Georgia, serif">In volutpat
consectetuer nulla.</font></b><font face="Verdana" size="2"
color="#CC0000"></font></p>
<p><font face="Verdana" size="2" color="#990099">Quisque neque leo,
...</font></p>
<p><b><font face="Georgia, serif" size="2" color="#CC0000">Praesent at tortor id
nulla faucibus fermentum. </font></b></p>
<p><font face="Verdana" size="2" color="#006600">Pellentesque bibendum
adipiscing orci. .... </font></p>
The entire page of HTML code has 3396 characters (including spaces)
Now, take a look at this example
of a page that looks the same but uses styles and View Source to see the
remarkable difference in the code.
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1>
<h2>In volutpat consectetuer nulla. </h2>
<p class="style1">Quisque neque leo, ....</p>
<h2>Praesent at tortor id nulla faucibus fermentum. </h2>
<p class="style2">Pellentesque bibendum adipiscing orci. ....</p>
The entire page of HTML code has 3094 characters (including spaces)
Using style sheets cuts down the code by 300 characters... and this is with a
fairly simple page, so imagine what style sheets could do for your whole web
site!
You see, instead of using the <font> tag to format each paragraph (or cutting
out each cookie individually with a knife), you can define a style sheet in one
place (either in a separate file, or at the top of the page) that defines the
fonts for headings, paragraphs and special styles (think of these as a cookie
cutter). Instead of the three or four steps that it would take to format the
font for each sub-heading (red, bold, Georgia font), you can simply change the
style of the line to "Heading 2" and have all that formatting automatically
apply. It's as easy as using a cookie cutter.
Benefits of Using Cascading Style Sheets
And that's not all! There are several more benefits of using style sheets
that make them almost better than a freshly-baked cookie.
- Style sheets give you more options.
With style sheets, you can have pixel-perfect control over how your
fonts are formatted - size, color, and even letter-spacing and word-spacing!
You also have access to more effects, including dotted underlines,
"highlighting," borders, and more. Style sheets allow you to control not
only font formatting, but table borders, cell colors, margins -- pretty much
everything on your web page.
- Style sheets save you time.
Let's say you want to change your "Tahoma" font, which is used in your
main body content text, to "Verdana." In the old days, you'd have to go into
each page and manually change the fonts on each page. With style sheets,
everything can be centralized in one location - you change the style sheet,
and all the other pages on your web site are updated automatically!
- Style sheets make your code cleaner.
Cleaner code means that your web site is more accessible to people with
older browsers and people with disabilities.
Behind the Scenes
When you create a style, it will usually look something like this:
p { color: #ff0000; font-size: 10pt }
First is the HTML tag or the special class (preceded by a period) that you'll
be defining. Curly brackets go around the different attributes and their
definitions, which are separated by semicolons. Here is an example of a special
class definition - it's not associated with any specific HTML tag, so can be
applied to any tag where you want the text to be blue:
.blue { color: #0000ff }
Three Ways to Use Styles
There are three ways that styles can be applied to a web site.
External Style Sheets
Style definitions can be listed in a separate file that has the .css
extension (for example, stylesheet.css), which is called an
external style sheet. On each web (.htm) page, you'll then
add a special <link> tag to the top of the header page to link it to the style
sheet. Here's an example of a page that is linked to an external style sheet (click
to see example):
<html>
<head>
<title>External Style Sheet Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1>Page that is Linked to a Style Sheet</h1>
<p>This page is linked to a style sheet.</p>
</body>
</html>
The style sheet itself is fairly simple:
body { background: #C2DAED }
h1 { color: #3270A4; font: bold 14px Verdana, Arial, Helvetica }
p { font: 12px Verdana, Arial, Helvetica }
The nice thing about
external style sheets is that you can link multiple pages to them for a
consistent look across a site.
Internal Style Sheets
In addition to linking to an external style sheets, styles can also be
defined internally, where the styles are defined within the <head> of the actual
page. This is called an
internal or embedded style sheet. Here's an example of a page that has the style sheet defined internally (click
to see example):
<html>
<head>
<title>Internal Style Sheet Example</title>
<style>
<!--
body { background: #C9F1C5 }
h1 { color: #54B24B; font: bold 14px Verdana, Arial,
Helvetica }
p { font: 12px Verdana, Arial, Helvetica }
-->
</style>
</head>
<body>
<h1>Page With an Internal Style Sheet</h1>
<p>This page contains style definitions at the top of the HTML code.</p>
</body>
</html>
Inline Styles
At the very bottom level, style sheets can be defined at the "inline" level,
which means that they only apply to a specific tag. An
inline style might look
something like this (click
to see example):
<html>
<head>
<title>Inline Style Example</title>
</head>
<body>
<h1>Page With an Inline Style</h1>
<p style="border: solid 1px #cccccc; font: 12px Verdana">This paragraph - <b
style="color: #ff0000">and this bold text as well</b> - have inline styles
applied.</p>
</body>
</html>
The "Cascading" in CSS
Cascading style sheets "cascade." This means that they apply in
this order:
- Browser default
- External style sheet
- Internal style sheet
- Inline styles
If you have a definition in your external style sheet that conflicts with the
internal style sheet, the internal style sheet will "win" since it is applied
next. If you have an inline style that conflicts with the internal style sheet,
the inline style will "win."
Let's take these examples. First, look at
this page example that has ONLY the following external style sheet applied:
External style sheet code:
body { background: #FFF3BB }
h1 { color: #E89D0B; font: bold 13pt Verdana, Arial, Helvetica }
h2 { color: #239C37; font: bold 12pt Georgia, Times New Roman, serif }
p { color: #000000; font: 10pt Verdana, Arial, Helvetica }
Now, take a look at this
second example page, which has both the first external style sheet linked,
and also has some internal styles defined. As you can see, the internal style
sheet definitions for the heading and paragraph use different colors and
override the external style sheet.
Page code:
<html>
<head>
<title>Example 2</title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<style>
<!--
h1 { color: #9607A7 }
p { color: #380692 }
-->
</style>
</head>
...
Finally, this
third example page uses an inline style
to further change the style of the paragraph font, which overrides the size and
color definitions of the external and internal style sheets.
<html>
<head>
<title>Example 3</title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<style>
<!--
h1 { color: #9607A7 }
p { color: #380692 }
-->
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1>
<h2>In volutpat consectetuer nulla. </h2>
<p style="color: #066DC3; font: 8pt">Quisque neque leo, ...
Put Away Your Knife...
After going through our other style sheet tutorials, you can retire your
<font> tags and enjoy all the time you save by using style sheets - the cookie
cutters of the web!
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1061/kb101406.htm
permalink to this article:
http://www.pixelmill.com/support/kb101406.htm
Back to top