Getting Started with Cascading Style Sheets - Part 1
Part 1 - What Are They?
The basic look of a web page is achieved by specifying the layout via HTML tags. Due to HTML's roots, there are limits to how flexible such layouts can be. In a bid to get around some of these limitations, in 1996 the World Wide Web Consortium (w3C) added cascading style sheets to the web designer's arsenal. A second more advanced version arrived in 1998. As they are a fairly recent addition, only Netscape V4 and above or Internet Explorer V4 and above support them. However, is it estimated that 95%+ of people have suitable browsers so they are well worth using in your web pages.
What Can Cascading Style Sheets Do?
There are many things you can do with a Cascading Style Sheet (CSS). Firstly, you can use them to put all your style descriptions in one place. The advantage here is that if you decide to change the look of the headings on your web site, rather than having to change every page, you simply change the definition in a single CSS file. Every page element that uses that style definition will now adopt the new look. You can also make changes throughout a single page via the same mechanism. A useful side effect of putting all the style tags in one place is that your HTML files will be smaller and thus load faster. If you think this is a small saving, take a look at the HTML source for an average corporate web site. If they haven't used style sheets then you'll see a huge amount of page markup code in comparison to actual information in an attempt to make the presentation look attractive. Another advantage is that the actual pages become simpler through better structure. This can help enormously when trying to find an error which is messing up a carefully crafted page's layout.
You can use a CSS to define font sizes and other attributes with extreme accuracy. Whereas pure HTML limits you seven font sizes, a CSS gives you full control akin to a word processor. In line with the improved font control, you can also achieve pixel accurate layout of the text.
If you've previously got down and dirty with HTML, you'll know all about the various tags that are used to describe the look and layout of the text. You can use a CSS to redefine tags so that they perform a different function so that the italic tag could instead make text go blue.
Links are another area where you gain extra control. You can define your own styles for links. For instance, you could get rid of the underlines in a link (although this would probably confuse your readers). You could also make visited links turn bold instead of changing colour.
Finally, you can define and use layers. This allows you to lay one block of text over another. In itself, this doesn't sound wonderfully useful but there are valid uses such as popup menus or extra information on a particular item.
How do I Create Them?
There are two ways you can create style sheets. If you just want the CSS definition to affect a single page then insert it in to that pages <head> section i.e. between the <head> and </head> commands. If you want to have your CSS definition work on multiple pages then you put it in its own text file with a .css suffix. You then refer to this from the main web page(s). Note that if you go for this option, you don't put the <head> and </head> tags in the CSS file. We'll examine that in more detail later.
In part 2 We'll look at the structure of CSS definitions both within a page and in a .css file.
