Creative Design: Change Your Style with CSS

Be fussy. Be fickle. Be creative!

I can never really decide how the Dirt Cheap Web Designs site 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 way of controlling 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 look of your website, every single page had to be edited. Now we can do it by changing just one external file.

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.
Header / Logo Box Side Navigation Box link 1 link 2 link 3 Main Navigation Box Body Content Box Your stuff goes here.

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. In fact, there are so many possibilites that I'm not even going to try to cover them here.

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 other 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.

More 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
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.