PageResource.com - Web Development Tutorials

Introduction to CSS

A little about cascading style sheets
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List

Home/DHTML/CSS/Introduction

Style sheets let you place things exactly where you want them to be on the page, using the distance in pixels from the top and the left of the browser window.




You see the box above? It was created using a cascading style sheet. (It's supposed to be a rectangle with a green border).

All right, cascading style sheets are a new way of formatting your page layout, text, fonts, images, and almost anything you put on the page. As you saw above, they allow you to postition things on your page down to the exact pixel. Also, if a style is declared in the head section of a page, a change to the style changes the style on the entire page. We'll get to the details in later tutorials, but here is the general idea:

Let's say you created a style for a heading tag, <H3>. In your style, you set the color of your H3 tags to red. Now if you have 10 H3 tags on the page, and decide you would rather have your headings be blue, you would no longer need to go back and change the font color for each heading. All you have to do is change the style of your H3 tags from the color red to blue. Changing the style once will adjust all of your H3 tags and they will now be all blue instead of red, with alot less work.

This gets even better if you use an external style sheet for more than one page. Changing the style properties in the external style sheet will now adjust every page that uses that style sheet, so you can avoid editing each page individually to change it! In a later tutorial, I'll show you how to create and use an external style sheet, but for now we'll stick to learning the basic use of styles on a page.

Well, I guess that's all I have for an introduction. So let's get started with the first section, which shows you how to add a style as an attribute to an existing tag. It is called Using the Style Attribute.



By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy