In the first part of this article series, we looked at how CSS got its name. Cascading Style Sheets are a set of style rules that describe the look and feel (i.e. presentation) of a web page and these rules can be defined at four different levels, which get cascaded to a single virtual rule set when a web page is viewed in a browser. Now that we know why CSS is called that way, let’s try to understand the value of style sheets.
Content vs Presentation
CSS is used to define how a web page should look like. As we already know, this aspect is technically called the presentation of a document. The other main aspect of a document is its content. Content is the actual body of information carried by a document. The aspects of content and presentation are not limited to web pages; they are common to any document.
Let’s spend a little bit more time trying to understand the difference between content and presentation. Say you are typing a document in MS Word. You will start off with a title and perhaps a sub title. And then you keep on entering your ideas and soon you’ve filled a couple of pages. Now you see some structure emerging in your ideas and therefore you put in some headings and sub headings. Then you apply various styles such as Heading 1 and Heading 2. You make certain text bold, use different fonts, colors and so on.
Once you are done you have a document with some content formatted nicely as well. If you now do a Select All (Ctrl + A), open Notepad and paste what you copied, you will be left out with the content of your document. In other words, Notepad will strip off all the presentation aspects from your document. So what you have in the Notepad is the content and the Word document has the same content with some presentation aspects applied.
This example should help you to understand the difference between these two aspects. (However, in a strict technical sense, the fact that a certain piece of text is Heading 1 and another portion is Heading 2 is also part of the content. What belongs to the presentation is how Heading 1 and Heading 2 look. i.e. the fonts used, its size and color etc. When we copy to Notepad we lose this structural information as well)
Why CSS?
Mixing the content and the presentation of a document is considered a bad practice in a technical sense. HTML had this technical problem. Though HTML was originally designed to describe content that can be linked to form a web of documents, due to the immense popularity it received, it developed certain markup to define presentation aspects as well. The font and b (bold) elements are examples.
With CSS we can correct this problem. In other words, CSS helps us to separate the content from presentation. That way, we can use HTML to define the pure content of a web page and then style it (or define its presentation) using CSS. Now this is the reason why CSS is so critical in today’s web site development.
To understand how this works, let’s consider an example. Consider a first level heading in a web page defined using an h1 element.
We will write a simple HTML document with a plain h1 element and two more h1 elements with the same content, but styled using two different CSS rules named H1A and H1B. The HTML part of that page will be as follows.
<h1>This is a Level 1 heading</h1>
<h1 class="H1A">This is a Level 1 heading</h1>
<h1 class="H1B">This is a Level 1 heading</h1>
</body>
The two styles H1A and H1B are defined as follows. As you can see, these two styles define different fonts, sizes and colors which can be applied to the h1 element.
font-family:Verdana;
font-size:14pt;
color:red;
}
.H1B {
font-family:Monotype Corsiva;
font-size:36pt;
color:blue;
}
The result is shown below. The same content is made to look different just by applying two different styles. This is the power of CSS! (The full example is available here)
We applied the styles H1A and H1B to the h1 element using an attribute called class. This is where the CSS selectors come in to play and it will be the focus of the next episode of this series.
