Home arrow HTML arrow Page 2 - Cascading Style Sheets: The How and the Why

Cascading Style Sheets: The How and the Why

Cascading Style Sheets have been around for a while now, and act as a complement to plain old HTML files. If you're new to HTML, then take a couple of minutes to learn a thing of two... you'll be surprised what you can do with style sheets!

Author Info:
By: Mitchell Harper
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
November 24, 2001
  1. · Cascading Style Sheets: The How and the Why
  2. · Cascading whats?
  3. · An example of an inline style sheet
  4. · An example of an external style sheet
  5. · A more advanced style sheet example
  6. · Conclusion

print this article

Cascading Style Sheets: The How and the Why - Cascading whats?
(Page 2 of 6 )

Cascading Style Sheets…that's what! They're what paint is to canvas, what topping is to ice cream… they complement HTML and allow us to define the style (look and feel) for our entire site in just one file!

Cascading style sheets were introduced to the web development world way back in 1996. They get their name from the fact that each different style declaration can be “cascaded” under the one above it, forming a parent-child relationship between the styles.

They were quickly standardized, and both Internet Explorer and Netscape built their latest browser releases to match the CSS standard (or, to match it as closely as they could).

So, you're still asking what a style sheet exactly is? A style sheet is a free-flowing document that can either be referenced by, or included into a HTML document. Style sheets use blocks of formatted code to define styles for existing HTML elements, or new styles, called classes.

Style sheets can be used to change the height of some text, to change the background color of a page, to set the default border color of a table…the list goes on and on. Put simply though, style sheets are used to set the formatting, color scheme and style of an HTML page.

Style sheets should be used instead of the standard <font>, <b>, <i> and <u> tags because:

  • One style sheet can be referenced from many pages, meaning that each file is kept to a minimum size and only requires only extra line to load the external style sheet file
  • If you ever need to change any part of your sites look/feel, it can be done quickly and only needs to be done in one place: the style sheet.
  • With cascading style sheets, there are many, many page attributes that simply cannot be set without them: individual tags can have different background colors, borders, indents, shadows, etc.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials