Home arrow Style Sheets arrow What is CSS?

What is CSS?

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

Author Info:
By: Marc Knuttel
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
May 17, 2004
  1. · What is CSS?
  2. · CSS Syntax
  3. · Placement of CSS Elements
  4. · Cascading - What Does it Mean?
  5. · Your First Style Sheet

print this article

What is CSS?
(Page 1 of 5 )

Invented in 1997, Cascading Style Sheets (CSS) are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as <FONT>, which have been deprecated in HTML 4.0.

There are three parts to CSS: the styles, their placement, and the fact that they can cascade.

The Styles

One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:

<font color="#0000ff"><h4>a blue headline</h4></font>

Which would look like:

a blue headline

However, there was no way to ensure that all H4 headlines were blue except by typing in the font tag before and after each one. With CSS, you simply declare that all H4 headlines are blue, and for all pages that use that style sheet and all elements that use that style, they will be blue:

H4 { color: #0000ff; }
<h4>another blue headline</h4>

Which would look like:

another blue headline

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials