Decorating Images with CSS

From the old and nostalgic days when Tim Berner Lee brought it to Life, the web has been not only a creature in constant evolution, but one that now owns the largest audience worldwide. What’s more, a number of surveys have revealed  that, for many users, the web is the Internet. This is conceptually wrong, but perfectly understandable from a beginner’s point of view.

There are numerous reasons that might justify this misleading opinion, which are out of the scope of this article. At least two of them should be kept in mind, however: first, the web is by far the easiest platform to deal with (especially when compared to other application-level protocols such as FTP, SMTP or POP3), and last but not least, it’s unquestionably the most appealing, too.

Without a doubt, a web site providing carefully crafted content can attract many visitors. However, one offering the same quality of content, but delivering it through a polished interface and loaded with a bunch of eye-catching images, will attract many more. The moral of this story is ridiculously simple: images are of great help when it comes to building a professional-looking web site, but quite possibly the most challenging task is to give them a pleasant appearance without having to be a Photoshop guru.

Here’s exactly where style sheets come into play. It's possible to provide online images with a fresh look by using only a few basic mixtures of CSS properties. These are extremely easy to code, even for beginning web designers.

If I've caught your attention now, in this three-part series, I’ll be exploring some proven CSS-based techniques that you can use to make your images stand out from the crowd, ranging from using borders and padding, to working with background images. But wait a minute! Images that decorate other images? That sounds like a confusing, recursive thing. Well, it’s not, trust me.

Even so, if you want to make your doubts disappear in the flicker of an eye, start reading!