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!

In Trimester 1 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 Tri 1 stuff on W3C/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 website 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. After the exercises, you will have a quiz that is part question/answer and part a lab practical in which you will be asked to do a few things in Wordpad using CSS.

Last night you were supposed to read pp. 221-232 in the HTML book. If you have not done that, stop now and read those pages. They will give you a good introduction. If you have read the pages, continue on to the next paragraph.

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 be for large websites with many redundant pages. To use style sheets, can lead the webdesigner to be lazy and all pages begin to look alike. In my opinion, most of style sheet coding is not worth learning. For example, creating a <span> tag to format a few words like the author did on page 231 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. What I do like about style sheets is the new and creative ways they 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 a better man or woman than I.

Index

Links