Introduction to CSS

Warning! You must view the CSS stuff in Internet Explorer. You will find out why on the last page(Don't cheat and look ahead). Switch to Internet Explorer now if you are not in it!

Earlier this trimester you learned that the World Wide Web Consortium(W3C) is pushing webdesigners to use "style sheets" in their pages. Take 30 seconds to reread the W3C's thoughts on CSS. We are going to use your book and a couple of pages of my rambling to learn the basics of Cascading Style Sheets. You can also visit a few websites on your own that I will recommend. You will then have some exercises that focus on techniques that CSS allows you to do that straight HTML will not let you do.

I encourage you to read the books Introduction to CSS. If you have not done that, I encourage you to take your book home tonight and read those pages. They will give you a good introduction.

Now that you have read the book's introduction of Cascading Style Sheets(you have, haven't you?), let me give you my take on them. This is only my opinion. But, since I teach this class:), my opinion counts. Much of the use of style sheets appears to the novice to be a waste of time. To use style sheets, for example, to create a <span> tag to format a few words like the author suggests in parts of the book is no better than applying normal html font tags to those few words. I can see a value of the span tag if you are repeating that formatting many times over. In that regard, creating external style sheets(we will do it) that can pass the style along to any html document is very valuable. It allows you to write one page(external css document) that has all your styles on it. When you want to change the style of your website, you only have to adjust one page!!! I also like the new and creative ways style sheets allow you to format objects on your page. For example, CSS allows you to set "absolute and fixed position" of an object on a page. Therefore CSS allows you to overlap images for an artistic effect.
For example, don't you think it's really cool that my heads overlap. Very artsy, fartsy, huh?? Well, maybe not, but I bet you can think of a good use for overlapping images, especially if you use Photoshop to mess with the opacity settings,etc.

So, we are going to focus on using styles for effects like the one above that can't be done in plain html. Along the way you will discover the basics of how to set up different style properties and you may decide to do all your work in style sheets. If so, you are on your way to be a stylin' dude or dudette.

Index

Frames