DesignBash

web magazine and more…

What is CSS?

What is CSS?

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:

posted by admin in CSS and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment