CSS - Fun and Fiction

There are numerous ways a Cascading Style Sheets (CSS) can improve our web design and it's not difficult to implement a few to make our website look better and more user-friendly. I'm all about visually appealing websites. Plain or downright unattractive just doesn't cut it with me. With the tools designers like myself have today, there is no excuse not to create a site that can be considered eye candy. And to truly design a spectacular website, you will need to make use of, and fully understand, the concept behind Cascading Styling Sheets, or CSS for short.

With CSS your website can easily be launched into the category of superior designing, and looked upon as a digital work of art. Without it, we're left with only a basic styling framework, and none of the special effect features that CSS allows for.

Take for example text or box shadowing. I love to highlight headers using text shadow because it causes the text to jump out at the visitor, making it easy to see that it is more important than the rest of the text on that page. And let's face it, with most people scanning pages instead of reading every line, we need to design our pages so it grabs a visitor's attention, causing them to slow down a little and take notice.

Box shadowing is a similar concept. Many websites use boxes to contain content, but the main problem with throwing a box up and adding text over it, is normally it doesn't look very pretty, which unfortunately sends a message to the visitor that they can skip over that content. But... if we use a simple box shadow to make the box a little more appealing, the content becomes more attractive, and our chances of the visitor taking the time to read what's in it increases at least two-fold.

Round corners for boxes or images are another way to make your content a little more interesting, and add a little bit of flair. In times past you had to create the box and corners yourself using Photoshop or some other photo editing application and then save the images as a PNG so they maintained their transparency level. Finally, you had to place them in a dozen or so strategically positioned DIV tags, so they all fit together and looked like a single image, and of course hope that every browser out there read the markup the same.



With CSS you don't need to do all of that. Now you simply create a rule for a DIV tag with a contrasting background color, like say a white area on a black background, and then add the additional rule to round off the corners ( moz-border-radius: 10px;). If you want a shadow for the box, then simply add (box-shadow: 10px 10px 5px #888;) for that class or id in your CSS file.

But let's not kid ourselves here. The problem with these techniques, as wonderful as they are, is that they are not generally recognized by Internet Explorer. Not without some serious additional coding that is, and even then it's tricky and will depend on the version of IE the visitor is using. This leaves some designers scratching their heads wondering if it's worth the effort.

For me, the answer is a resounding yes. According to my site's analytic data, the majority of my visitors are using Firefox or Chrome, which do recognize the CSS rules previously mentioned. So why would I leave these nifty tools out of the equation? I shouldn't and neither should you.

There are literally hundreds, if not thousands of CSS tricks you can use to fancy up your site. Some of the more popular ones are transparency or opacity settings, image rotating, hover boxes for image previewing, alert boxes, round corners, text shadowing, CSS based navigation menus and much, much more.

I say use them as you see fit. Maybe Microsoft will eventually realize they're product is missing the boat and they'll actually incorporate allowances for these great code techniques into a future version of Internet Explorer. Until then, I guess those visitors are just missing out.

It's sad to think that Microsoft led the way in implementing Cascading Style Sheets, first in Internet Explorer 3.0, then improving that support significantly in Internet Explorer 4.0. But while Microsoft's implementation of CSS1 has thus far always been the best available, it has also failed in completeness and quality to offer a viable alternative to HTML-based layout and formatting techniques.

There are some problems with CSS however, or at least some areas of caution that you should take note of, and I would be remiss if I did not at least mention a few of them. Positioning is probably the main area of difficulty that I see with new coders. Getting some text or an image placed exactly where you want it can sometimes be difficult, especially if you're trying to center a horizontal menu bar. It's not impossible of course, but it does take a little more expertise than what the amateur website designer might have.

Next on my list is the wonderful world of floats. Ah yes, float that tag to the left, float that one to the right, now clear. When to do it and when not to float are questions that must be answered individually, and according to the specific site your building. When to clear should be obvious... when floating is no longer desired.

Finally, I'll mention the reset. So many newbies don't even consider resetting all of the elements at the beginning of the CSS file. For me, its second nature. It must be done. Why? Because you want the visitor's browser to clear itself of any "settings" that it may have lingering around from the last site it visited, not to mention the last time they visited your site. This is a very simple process in which you name the tags you want to reset, separated by commas, and then add in the elements to reset, followed by a zero. (i.e. html, body, h1{ margin:0; padding:0; border:0; font-size:100%;}

My advice to learning CSS is to take your time and play with the various settings. In time, you'll learn what works and what doesn't. One of the best resources out there in my opinion is the book "CSS, The Missing Manual" by David Sawyer MCFarland. It's nearly 500 pages of extremely handy and useful information, and right about $21 from Amazon, as of the time of writing this article.

Article Source: http://EzineArticles.com/6704453