|
|
The ABCs of CSS/ pg. i
CASCADING STYLESHEETS
by Edmond Ho
Don't you hate micromanaging your webpage to ensure consitency? Spending hours upon hours making sure the font is "Arial" that the link color is hunter green and that some of the table cells are charcoal black?
If you do, then you should learn about the latest addition to the HTML 4.0 standard, Cascading Stylesheets. CSS, as it is more commonly referred to, is a simple to learn language that can greatly reduce the time it takes to make a consitent looking webpage.
CSS is simple to learn because it is not a true language, like C++ or Java; it's not a scripting lanugage like JavaScript or VBScript; it's not even a markup language like HTML. Stylesheets are simply an addition to HTML. All CSS does is define certain properties of each HTML element. It doesn't help you add in new HTML elements, nor can it create dynamic effects, nor can it create apps. But the programming world already has languages to do that. No other language (that's a standard) can create stylesheets for webpages.
A stylesheet is simply a bunch of code that defines the properties of elements. The power and utility of the stylesheet is that you can just put all the code into one file, and link all your HTML files to it; all those linked files will take the properties of the stylesheet; all the pages will have hunter green links in arial font in charcoal black table cells; all without you, the programmer, having to micro-manange and specify in each and every single tag. Just do it once, then voila, all your pages are consistent.
CSS also offers much more precise layout control. With the plethora of spacing style properties, you can control and element's position to the very last pixel. Effects that were unachievable but in images can be executed with the same precision and less memory. With all this flexibility, CSS is worth the time it takes to learn.
There are two ways to integrate CSS into your webpages; directly by putting the code into the HTML, or by linking to a file that has the CSS code. The latter form is prefereable, as that way, you don't have as much redundency. For a fully discussion of integration, you should go see Chapter 13 of HTML Is Your Friend, another great pulication by me.
|
|
Although a full discussion of CSS syntax is beyond the scope of this pamphlet, I will tell you a bit about it. Firstly, select which method of CSS integration you prefer; direct or indirect.
If you choose direct (that is, using CSS code in the same file as the HTML), you have to put the code within the <style> tag and its end-tag. Next, you put all the CSS code within a comment tag (an example below), so that older browsers without CSS support aren't affected.
To specify the properties for an HTMl element, first you must type in the name of the tag, without the brackets. The properties for the element go within curly braces ("{" or "}"). There are a lot of properties (for a very good reference chart, proceed onto ProjectCool DeveloperZone). Each property has a value, which is placed after a colon (":") after the property name. To seperate each property, you place a semi-colon (";") between the value of the first property and the name of the second property. When you're finished, end the curly braces. Then repeat the process as many times as you need. When you're finished with that, you simply end the comment, and use the </style> end-tag. And you're direct CSS stylesheet is done!
If you chose to use an indirect method, it's somewhat simpler. Firstly, you prepare a CSS document; essentially just a text file that has all the CSS code, in the same syntax as above, but without the HTML tags and comments. You save the document with the ".css" extension and just leave it be. To link your HTML files to use the stylesheet (there's no limitation on how many you can link), use the <link> tag. There's a better discussion for the tag in Chapter 13 of HTML Is Your Friend.
|
|
And know you understand a bit about Cascading Stylesheets. Since this is just a pamphlet, it's not really detailed enough to fully describe CSS. But there are a lot of very very good resources on the World Wide Web that you should look into.
I hope that you have found this pamphlet enlightening. Go, grasshooper, find the way to true stylesheet bliss.
|