While the average web designer already knows what CSS is, the average internet user might have no idea what this term refers to. In the hopes that budding web designers find this article, I’ll give a brief explanation about CSS (Cascading Style Sheets) and try to explain, in laymen’s terms, what it actually is.

A Non-Technical Definition

Imagine for a moment that you are writing a book. You’ve spent hours and hours developing a plot, characters, narratives, and other literary devices in the hopes that readers will enjoy your amazing story. You have finally arrived at the point where you would like to publish your content for the world to see. For the purposes of this example, we will call this content HTML. At the moment it is nothing more than plain, boring, simple text. There are no italics, there are no bolded words, there are no big headlines… just standard 10 point text.

When you finally send your story over to the book publishers, they read it over and start thinking about the best way of presenting it. Maybe your story should be written on old, torn up pages – or perhaps a more suitable brillent and pristine white finish would be more suitable? Regardless of what they decide, these are questions specifically related to presentation, not content. For the purposes of this article, presentation is CSS.

As you are probably starting to understand, there is a theoretical division between the content of your story and the presentation. They certainly influence each other, but the words that make up your story have no inherent effect on the aesthetics of your printed book.

The modern web has adopted this philosophy and creates a clear separation of content (HTML) and style (CSS). If you only take one thing away from this entire article, remember that content is HTML and style is CSS.

So what is CSS?

Now that you have a basic understanding of the division between CSS and HTML, it’s time to become a little more technical. Take a look at the little HTML snippet below. It contains a few basic tags, but nothing more…

<p>
This is a paragraph, with some <strong>bolded content</strong>.
</p>

When you look at the above HTML you can see pretty clearly what the author was intending. They wanted a paragraph with some bold text. But it’s important to realize that when a web browser (eg. Chrome, Firefox, Internet Explorer) reads this HTML, it does not have any idea what the “strong” tag actually means. It guesses that you want that text bolded, but it’s really nothing more than a guess.

Enter CSS. CSS is a way to tell the browser exactly how you would like to style your content. Perhaps within your story, you want all “strong” tags to be red instead of bold. Well, with CSS that’s really really easy:

/*
* This is CSS!
*/
strong {color: red;}

At the most basic level that’s all it is. CSS is just a way to tell the browser how it should present your content to the user. These days CSS is way more complicated than just bolding text (it’s used to construct entire layouts).

But Wait, there’s more!

In the olden days, people used to use HTML to style their content. Originally, HTML contained special tags to make text bold, italic, or even blink. The problem with this method of organization became evident when larger sites started publishing their content. Big sites would have thousands of pages, all written in HTML, with huge numbers of tags that would define how content should look.

This created situations where changing the style of your content would require going through thousands of individual documents, modifying the archaic HTML tags that would force text to be bold. With the adoption of CSS, a big site only needs to change one central file to see the changes across their entire site.

Where should I start?

If you actually want to start coding CSS and HTML, then you should take a look at the following resources. They all do a great job of explaining the basics:

• CSS Tricks
• Nettuts – CSS & HTML Basix
• Introduction to CSS Layout

As it stands, rounded corners are currently supported in modern versions of Firefox, Safari, and Chrome. Unfortunately, you’ll need to use two different declarations to get all these browsers working. The basic declarations should look something like this:

/* Supported in Firefox */
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

/* Supported in Chrome and Safari */
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

The Rounded Example

Below you will find an example of rounded corners in action. If you’re using a modern browser you should see the grey box with rounded corners. (if using IE, I’ve put in a screenshot of what things look like when using a respectable browser)

.rounded {
width: 500px;
padding: 30px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Screenshot Example For Internet Explorer (sigh…)

But What Does the W3C Say?

Due to the fact that border-radius is not officially supported by any browser, it might be a good idea to check out what the W3C has to say about the subject. I was surprised to see how detailed they were and I highly recommend checking out their official specs. As a reference, the official (but currently unsupported) declarations are:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

There are tons of neat variations you can do, but they go a little beyond the scope of this article. Check out the W3C specs for the full explanation, or, check out some of these links that do a good job documenting css rounded corners:

• CSS3 Info
• The Art of Web
• Zen Elements