When web sites first starting popping up in the 1990s, they were mostly text, with some formatting and styling. Truth be known, many of those first websites were pretty ugly (my own among them.) We could choose colors, or make text bold, add a picture, and even (shudder) make words blink. To style our pages we applied formatting instructions to the HTML tags.
For example, if I wanted a sentence to be bold or red I could do this:
<p><b>This part is bold.</b></p>
or
<p><font color="red">This is red</font></p>
The basic approach was to lay out our web page and then apply some styles or formats to it – much like a painter might draw a picture.
As early as the 1970s some programmers understood the importance of separating the content, or substance, of a document from the style. Early web pioneers saw the connection to web pages, but most of us developers were slow to realize the advantages.
Style Definitions
Rather than “painting” a style on each text or other element, we can define how different elements look. For example, I could decide that all my big headlines should be red. I can set this format just once and it will apply to all the uses of the headline tag.
This style looks like this:
h1 {color: #FF0000}
(the #FF0000 is a hex formula for the color red.)
And now anytime I have <h1>This is a Heading</h1> that heading will be in red. And those instructions can apply to more than just appearance. They can lay out portions of the page to float to the left or right, or not be displayed until some action is taken, etc. As you read this post on the ASHMUG site the gray column to the right is defined by some style declarations, rather than being a fixed table.
Style Sheets
Style declarations can be stored in the header of a single web page, but the best way to use them is to create a separate file with nothing but style declarations. This is called a Cascading Style Sheet (CSS). Rather than a long list of style declarations at the top of each web page you can have the following:
<head> <link type="text/css" href="mystyles.css" rel="stylesheet" />
...other header stuff...
</head>
So now the user’s browser finds the mystyles.css file, loads in the instructions, and displays the page. Once the browser loads this page, the information stays in cache, i.e. it is remembered, and saves time when other pages load with the same style sheet. The “cascading” part of the name means that it is possible to have several different style sheets, and that the ones following can inherit the style from the earlier sheet and modify a part of it.
Style versus Substance
This can make web page layout a lot more efficient – saving a lot of coding on a big, complicated page. The real power, though, comes in the mind set of separating out the content of the page, from its style or format. A developer can design a page, using style declarations like the one above, and then decide to change the format, by swapping in different styles.
Zen Garden – a masterful example of different styles. Visit the site, csszengarden.com, and then click on the various style choices in the right hand menu. Even though the page has the same content, the look and feel is entirely different.
This is helpful for more than people with different artistic sensibilities. You can apply different styles for regular browsers versus mobile devices. The web page can detect that a mobile device is being used and adjust the look and feel to accomodate the smaller screen. A visually impaired user can invoke a larger format style or one which works best with a screen reader.
Browser Wars
Today’s modern browsers follow the CSS rules laid down by various consortia fairly well. This wasn’t always the case. The biggest problems came from earlier versions of Internet Explorer (v5 and v6 in particular.) Microsoft and its browser decided to interpret the CSS rules differently, to favor the user experience under Windows. There is an ocean of virtriol spewed by web developers who have had to craft hacks and workarounds for older versions of IE, and today there are subtle differences still.
Learning the CSS Rules
The rules governing CSS are complex and sophisticated, and I can’t begin to teach them here. If you are designing a web page, an investment in a CSS manual would be a wise choice. Or you can do as I often do, and acquire or purchase web page templates that come with CSS style sheets. My favorite source is Project Seven – projectseven.com. They have both free tutorials and commercial templates for sale, and these adjust for idiosyncratic differences among browsers.
