Published Oct 13, 2003
If you’re going to have a Web site, it needs to look like your web site, or at least such is my philosophy. So I built this new green-and-gray look for wadearmstrong.com.
We’ll see how this skin works. The green is actually from one of my favorite polo shirts, a birthday gift from my girlfriend. If I decide I need to change the color later, thanks to modern technology. While the contents of this page are stored and displayed using HTML, all of the visual style is imparted using Cascading Stylesheets, or CSS. CSS basically works like those styles in Microsoft Word — you can define colors, fonts, type sizes, even the location of an item on a page. But whereas, in Word, you must manually apply different styles to different blocks of text, CSS works automatically. You define rules for circumstances in which certain styles are applied to certain types of text; for instance, all bulleted lists coming after headlines can be styled one way, while bulleted lists after regular paragraphs can be styled differently — all automatic, based on where the list is, nothing done manually. One CSS file can style multiple pages, so, by making a small number of changes in one central place, it’s easy to update the look of an entire site.
CSS also makes it easy to write HTML using an approach called semantic markup. Traditionally, a great deal of HTML markup has been dedicated to making pages pretty. This makes it very difficult to update sites, because, when it comes time to change the look of a site, all of the code defining the look of pages, which needs to be discarded, is mixed in with all of the content, which needs to be saved. By separating content (HTML) from presentation (CSS), HTML pages can be saved and used over and over again while CSS files are changed. HTML files can now contain only markup that actually describes the content — markup with semantic meaning.
For example, look at the navigation tabs at the top of the page. This is actually a plain old bulleted list of items — but I’ve used CSS to style it up. Why not make it a list? It is, after all, a list of all of the sections in this site. It makes sense and it’s easy to work with. As a bonus, the high content-to-markup ratio gives high search engine rankings to pages built using semantic markup high search, and using meaningful elements to describe content makes it easy for new and unexpected browsers, such as those in cell phones, to render pages appropriately.
Another advantage of setting things up this way is that the tabs above work automatically — they know what section you’re in and bring that tab to the front. Each tab is labeled with the name of the section it’s for, and the whole list is labeled with the name of the section the current page is in. The CSS file tells any tab whose name matches the name of the whole list to appear to be in front of all of the others. Simple and foolproof!
Of course, I have to get all of this content in here somehow. I use a tool called Moveable Type (MT) that makes it easy to manage Web sites. I can type all of the content for this entry into a form, click save, and MT automatically generates the page for me using the template I’ve specified. It’s easy to add plug-ins to MT to expand its functionality, and I use something called MT-Textile to make it easy to style the text in my pages. The combination is powerful and easy-to-use, perfect for a small-to-medium site.
So that’s my look and how it’s accomplished. Hope you like it! If you don’t, well, comment away!