The Power of CSS For Design
By trade I’m not a designer, I’m a programmer. There is a definite dichotomy between programming and design, however, the design layout still needs to be coded in a logical manner to make it scalable for easier maintenance in the future. Simply put, the more complex the design, the more time and care needs to be put into the planning of the design, but it doesn’t mean that the code has to be more complicated.
For those of you who may be eager to “think” ahead and think I’m about to rant on using pure CSS for page layout and tell you to stop using tables, you’re wrong. If you want to use tables, or CSS to layout your pages, then by all means do so, but what ever method you choose to layout your page designs, keep in mind that CSS if very powerful and to overlook it can be costly, especially if you’re trading time for money.
Let’s take a simple concept I want to make a web site, but it will have 3 distinct sections, we’ll call them Alpha, Beta and Cappa. I want a cohesive look and feel for each section, but I want each section to be unique and easily identifiable when viewing the different pages. Alpha will be red, Beta will be blue and Cappa, green.
What I’ve experienced is that the design adept will set out to build 3 templates based on the same code, but each will define the color base for the 3 sections of the site. AHHHHH! Why? Just in case you don’t understand the question, I’ll make it more wordy… Why would you want to build 3 templates instead of building 1 template and 3 style sheets?
Let’s have a quick review of what CSS is and how it works. “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.’,as quoted by the W3C [http://www.w3.org/Style/CSS/] Notice in the W3C’s example the second thing they mention is color.
Logical thought no. 1: Create a different style sheet for each color. Sticking with our example we can create a style sheet for red, blue and green.
Will will also need to address the styles for fonts, spacing and etc, also mentioned in the W3C’s statement of CSS. In the vein of “Work smarter not harder.”, we need to determine which section of our website will have the most pages. Because I’m writing the article, I say Alpha will have the most pages, and so we’ll declare that red will be our default color scheme.
Logical thought no. 2: To ensure that all pages will have the proper design, style and format, our default style sheet will assume that every page is going to be red. All pages in Beta will have the blue style sheet added to it, and all in Cappa will have the green style sheet applied to it.
From here on out, the logic starts to become design specific, and you’ll simply have to do your best. Whether you decide to go with tables or a pure CSS layout, what ever you decide, don’t stop thinking about how you can improve and reduce your work load.
This is where we separate the “Ah-Ha!”’s from the “huh”’s. If you understand CSS, and I’ve conveyed my thoughts clearly, you should be able to understand exactly what needs to happen. You may not fully understand or know how, but you should be able to see the bigger picture and the power of CSS. If you’re completely lost and clueless, either I’ve done a horrible job of conveying my thoughts or you simply don’t understand the power of css.
Here’s the example site that I just laid out above:
http://www.figmentthinking.com/the-power-of-css/
Watch what happens when you switch between the different links, and remember that this each page has the exact same code, just different style sheets.
