3.1 Cascading style sheets and coding by hand a little more

Every keystroke matters. One thing coding by hand does is eliminate laziness. Even one forgotten bracket or letter can make a page display wrong. Cases in point: I just spent several minutes figuring out why I inadvertently managed to change all the text into a headline format. The culprit? I forgot the slash in the closing tag. I also managed to lose my image, but fortunately realized quickly that I simply accidentally moved the image into a different folder while reorganizing files. And more disturbingly, I typed test/css instead of text/css into the style sheet link because the title was close to the file name test.css; that one took me a surprisingly long time to locate. These problems were easy enough to fix, but the point is that everything related to web design and coding requires extra attention and care. Any misstep adds a lot of time spent trying to locate the problem.

Matthew MacDonald does a good job in chapter six of explaining the value of using style sheets to control the look of webpages. In fact, he breaks down the distinction between savvy web editing and clunky code into using style sheets or not. Basically, in the best design scenarios the XHTML document defines only structural elements of the page, such as what is a header while the style sheet defines all the formatting rules, such as font colors and styles that make the page unique. A browser grabs the style sheet along with the web pages and applies the rules consistently. Here is my simple page from an earlier blog, created using TextEdit. The style sheet was also created in TextEdit and shows how adding a link to the header code of the webpage file impacted the look of that page:

The "h1" designates that the style rule applies to level one headings, which you see below in the brown, centered, italic heading:

Now the real magic, of course, has to do with overall application. All kinds of rules can be applied to the external style sheet that will govern elements such as the look of different areas of text, colors, spacing, and so forth. When the style sheet is applied to a multipage website it helps to add consistency to the overall site. It is also possible to embed style sheet directions into the XHTML code by way of inline style. As MacDonald points out, however, this creates a bulky line of code and if you wanted to change multiple elements on various pages, you would have to apply this method to each instance where you wanted that change to occur—obviously a time consuming endeavor. Overall, it is very clear why CSS is useful and since it is even easier to apply within a program like Dreamweaver than it is to code it by hand, it is a powerful tool for managing the look of a website.