Cascading Style Sheets v html

[MARKBLACK]

Hi I teach different subjects overall word process, excel, access, but at
times I have to teach html basic plus, I have had times when students
ask me questions like whats Cascading Style Sheets, because i'm not sure
as its new to me I dimiss this as "thats another subject we may cover
given time" some go along with this other moan a bit.
anyway I am wanting to branch out in this direction but my classes
are short enough i'm just wondering what is the big interest and is
it worth learning?

[mike breck]

Hi MARKBLACK,

After years of tinkering with HTML, I've just started experimenting with CSS.

Try this link for a simple introduction which highlights the differences between HTML and CSS.

http://www.glassdog.com/design-o-rama/webdesign-css.shtml?css

After that, just use Google to search for CSS and you'll be able to get all the info you want.

HTH

[Goog]

Oh, most defenitely. CSS is the way of the future for html, and not only that, but its also very easy to learn.

I predict that in a few years, once all browsers support full css1 (and maybe even css2) standards (accorrding to the W3C) that most websites will be designed primarily with css, not this ineffecient method of having dozens of tables.

Check out this article about designing sites with css,here (http://www.webmasterbase.com/article.php/379), you'll find that it links to http://www.alistapart.com which is also a good site on this subject.

While I do not code my sites using css like this, I believe its a better method. HTML was not invented with design issues in mind, but rather just transfering and displaying data. The new versions have bent it around this need and we are left with a very ineffecient, unnecessarily complicated way of doing things, namely using tables, whose original use was just to display data to accomadate all our design issues. I find that most of my pages have somewhere around 20-30 tables, which is ridculous and just plain stupid, but its the only way to do things right now and meet cross-browser compatibility.

There are many other good tutorials you can easily find on the net, you might want to check http://www.richinstyle.com, I've heard this is a good resource.

Also, an excellent way to understand the basic usage of it is to take the tour of it at w3schools (http://www.w3schools.com/css/default.asp). It should take you maybe half an hour, then take the quiz to make sure you know it all. It will be very well worth your time.

Also, have a look at this thread (http://www.sitepointforums.com/showthread.php?threadid=28539&highlight=tutorial), it will point you to many more good online css resources.

[mairving]

CSS most definitely is the way to go. To ensure browser compatibility (NS 4.7 mostly), you can't get real fancy. I mostly use CSS for fonts and link colors. Here is a sample CSS that I use fairly often:
P { font-family: verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000066; font-size:12px; text-indent:24px }

TD { font-family: verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px }

H2 { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:24px }



H3 { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:20px }



H4 { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:15px }



H5 { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:13.4px }


H6 { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px }


UL, LI { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px }



A { font-weight:bold;
font-family:verdana, helvetica, arial, geneva, lucida, sans-serif }



A:link { color:#000066;
font-family:verdana, helvetica, arial, geneva, lucida, sans-serif}



A:visited { color:#000066;
font-family:verdana, helvetica, arial, geneva, lucida, sans-serif}



A:active { color:#000066;
font-family:verdana, helvetica, arial, geneva, lucida, sans-serif}



A:hover { text-decoration:underline; color:#990000;
font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; }

.nav {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:active {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:link {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:visited {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:hover {
text-decoration:none;
font-weight: 900;
color:#990000;
font-size : 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.navwhite {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite:active {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite:link {
text-decoration:none;
font-weight: 900;
color:#FFFFFF;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite:visited {
text-decoration:none;
font-weight: 900;
color:#FFFFFF;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite:hover {
text-decoration:underline;
font-weight: 900;
color:#FFFFFF;
font-size : 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite12 {
text-decoration:none;
font-weight: 900;
font-size : 12px;
color:#FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite12:active {
text-decoration:none;
font-weight: 900;
font-size : 12px;
color:#FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite12:link {
text-decoration:none;
font-weight: 900;
color:#FFFFFF;
font-size: 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite12:visited {
text-decoration:none;
font-weight: 900;
color:#FFFFFF;
font-size: 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.navwhite12:hover {
text-decoration:underline;
font-weight: 900;
color:#FFFFFF;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.homeproduct {
text-decoration:none;
font-weight: 900;
font-size : 15px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.homeproduct:active {
text-decoration:none;
font-weight: 900;
font-size : 15px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.homeproduct:link {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 15px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.homeproduct:visited {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 15px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.homeproduct:hover {
text-decoration:underline;
font-weight: 900;
color:#000099;
font-size : 15px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.cartlink {
text-decoration:underline;
font-weight: 900;
font-size : 13.6px;
color:#FF0000;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.cartlink:active {
text-decoration:underline;
font-weight: 900;
font-size : 13.6px;
color:#FF0000;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.cartlink:link {
text-decoration:underline;
font-weight: 900;
color:#FF0000;
font-size: 13.6px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.cartlink:visited {
text-decoration:underline;
font-weight: 900;
color:#FF0000;
font-size: 13.6px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.cartlink:hover {
text-decoration:underline;
font-weight: 900;
color:#FF0000;
font-size : 13.6px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
P.opener:first-letter { font-size: 200%; color:#0000CC; font-weight:bold }



.small { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:7.5pt}
.medium{ font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px; font-weight:bold }
.big { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:15px; font-weight:bold }
.smallred { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#990000; font-size:7.5pt}
.mediumred{ font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#990000; font-size:12px; font-weight:bold }
.bigred{ font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#990000; font-size:15px; font-weight:bold }
.smallblue { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000066; font-size:7.5pt}
.mediumblue{ font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000066; font-size:12px; font-weight:bold }
.bigblue{ font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000066; font-size:15px; font-weight:bold }
.smallwhite { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#FFFFFF; font-size:7.5pt}
.mediumwhite { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#FFFFFF; font-size:12px}
.bigwhite { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; color:#FFFFFF; font-size:15px}
td { font-family:verdana, helvetica, arial, geneva, lucida, sans-serif; font-size:12px }

Body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}