Cascading Style Sheets |
What's CSS1? It means: Cascading Style Sheet level 1 (this is the first release, but while I'm writing, W3C is developing CSS2). Well, but what does it means actually? Ok, when you build a web page, you have to use the HTML language. In other words, you tell to the web browser (client) how it has to render a certain page.
Well, then?
HTML is embedded inside of a text page, and so, if you want to change a page's appearance, you have to change its HTML code!
Well, then? (again?!)
What's happen when you have a whole site, thousands of pages, and you have to change them?
Suppose you have to change the background color from white to black.
You have to EDIT all pages!! Really a bad job, right? Too right!
Well, it so happens that it isn't really so...if you use CSS, of course.
CSS1 was developed by the W3C consortium. This is a nonprofit organization set up for promoting the web and defining standards concerning the web. All HTML versions were defined by W3C, for example. By means of CSS, a document's content and how it looks are separated entities. As W3C says: 'One of the goals of CSS is to provide an alternative to HTML extensions', so you have more chances now, and you can really do great things. I think you can change anything inside of a web page by now. You can build pages without gifs, and result looks like if you really used those gifs...
If your browser supports CSS1 (you should use version number 4 or newer; CSS1 is a standard supported by Netscape Navigator and Microsoft Internet Explorer browsers) you can see a little example of CSS1...What? Do you think it's just a gif? Well, look at the page's source...Remember: the whole page is less than 1Kb!! No gifs!! Well, just one gif, because I added a button later...Take a look at the code here:
<html><head><title>CSS! sample</title>
<STYLE><!--
#backgbox {position:absolute; top:110; left:100; height:175;
width:500; background-color:yellow; border: solid blue; white-space:pre}
#dropshadow {position:absolute; top:35; left:50; width:200;
font:italic bold 90pt Verdana; color:Black;}
#foregbox {position:absolute; top:30; left:37; width:200;
font:italic bold 90pt Verdana; color:red;}
--></STYLE></head>
<body bgcolor="#ffffff">
<div id="backgbox"> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div>
<div id="dropshadow">Overlay Effect</div>
<div id="foregbox">Overlay Effect</div>
</body></html>
Don't worry: it's simpler than you think...
You have to know 2 things about comments: first of all there are many browsers that can't understand CSS. So you have to hide CSS code to these browsers. As usually browsers ignore unknown tags, you can use the <SCRIPT> tag. However, even if browsers will ignore the <SCRIPT> tag, they won't ignore the code inside of these tags. So you have to use the '<!--' and '-->' notation to hide the code. The same thing happen when you are using Javascript code. Finally, you have to know how to hide your remarks inside of the CSS code. You have to use the same notation of C language: put '/*' at the beginning of your comment and put '*/' at the end.
Index Home Back About Contact us!
Copyright (c) 1998-2006 Wowarea