Creative Website Design: Change Your Style with CSS
Be fussy. Be fickle. Be creative!
I can never really decide how my own website should look. Should it be fun, or reflect the seasons, or have lots of cute furry animals? The one thing I know for sure is that I want to have control over the layout while minimizing the time it takes to update an entire site.
Enter CSS.
Introduction: What is CSS?
CSS, or Cascading Style Sheets, is a stylesheet language used to control the appearance of a web page. Much like the HTML coding that makes up an ordinary web page, CSS has its own coding structure and rules. By using external CSS files, we can change the layout, colors, fonts, and even some images of a web page without ever having to touch the page itself.
There are many articles and tutorials available on the web that can teach you more about CSS. One great resource for beginners is the W3 Schools CSS Tutorial.
The Beauty of CSS
CSS lets us do great things with web pages, and it lets us do them quickly and efficiently. Before CSS, if you wanted to change the appearance of your website, every single page had to be edited. Now we can do it by changing just one external file.
To illustrate this point, I've created the "CHANGE YOUR STYLE" feature. (If you haven't clicked on any of the styles yet, go ahead and do it now. Don't worry, you won't leave this page. Sorry, this feature is temporarily unavailable while this site is being updated!
When you choose a style from above, a couple of things happen. This page uses dynamic PHP scripting (more info) to load the selected external CSS file. It also saves your choice in a session, or temporary cookie, to remember your selection even if you leave this page and come back later. (The session will "forget" your selection after about 1/2 to 2 hours of inactivity, or if you close your browser.)
Thinking outside the "box"
Now that we're spending less time on maintaining the look of our web pages, we can spend more time being creative!
The most common web page layout consists of a box design: logo at the top, navigation links just below the logo and/or along the side of the page, and content in the middle. Each element of the page is contained seperately in its own "box". The layout is familiar and navigation links are easy to find, making your visitor's task of finding what they want straightforward.
| Typical "Box" Layout using HTML Tables | ||||||
| An HTML table with 1 pixel border illustrates the "box" model of page layout. | The same box model with minimal CSS styling applied to the page to control colors, spacing, and the appearance of navigation links. | |||||
|
 |
|||||
Using HTML tables doesn't afford us much flexibility in changing the appearance of a page. With CSS, we're not limited to using the "box" model anymore. In the example below, I used CSS to make all text appear to wrap around the curves of one primary image.
| Page layout with text alignment control using CSS |
| In these examples, CSS is used to wrap text around the images that appear
in the main body of the page.
|
The text wrap is just one example of how we can use CSS to design creatively. With a little forethought and imagination, the sky's the limit.
Setting the mood
In any design, the mood is set primarily through the use of colors, images and spacing. These are powerful visual tools that let us convey our message to the visitor. Consider these tips for your design:
- A picture is worth a thousand words. I can't stress enough how important it is to have good photos or artwork. The initial cost of hiring a photographer or graphics designer may seem prohibitive, but it's so worth it in the long run.
- Pastels are soft and soothing. Bright, saturated colors grab attention. Whatever colors you choose, they should compliment your page content, not overpower it.
- Don't be afraid of spacing. Trying to crunch things together just creates chaos and the eye doesn't know where to look.
Other Benefits
CSS does more than just change the appearance of web pages. It lets us create navigation links that look like buttons but are still search engine friendly. Without CSS, Javascript is used to create the effect of a button being moused over and pressed. Unfortunately, search engines can't follow those kinds of links. Quite often when you see nice looking navigation links at the top of a web page along with the same links in plain text at the bottom of the page, it's because of this limitation. We want our links to look nice without sacrificing search engine optimization. CSS is the answer!
Visually impaired people will appreciate another benefit of CSS: the ability to offer an alternate page layout that uses larger (or resizable) text, with more contrast between foreground and background elements. I think my dad, who's well past 50, would say, "Thank you."
Resources for Learning and Inspiration
There are many articles and tutorials available on the web that can teach you more about CSS. One great resource for beginners is the W3 Schools CSS Tutorial.
Check out these great places on the web for some interesting ideas: css Zen Garden, A List Apart, Color Theory Tutorial by Worqx, and one of my favorites, Newark1.