CSS Basics – Part 2

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.

<body>
<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.

.H1A {
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.

Related Posts

• CSS Basics - Part 1
• CSS Basics - Part 3
• CSS Basics - Part 4

CSS Basics – Part 1

Cascading Style Sheets, or CSS as it is commonly known, is a vital ingredient of today’s web site designs. This is the first in a series of articles attempting to cover the very basics of CSS, in a manner as simple as possible so that the non technical bloggers can get an idea of what it is all about.

Why are they called Style Sheets?
First of all, let’s try to find out the meaning behind the phrase style sheet. In the context of web site design, style refers to the look and feel or appearance of a given site or web page. In this regard, style means things such as the fonts used, their sizes and colors, the various background colors and images etc. Not only fonts and colors, even aspects such as border formats and thickness etc can also be defined using CSS. For example, the double-bordered box in the header section of a Minima template is applied using style sheets.

The formal technical term used to refer to the look and feel of a web page is presentation. In other words, the style aspects are more formally refers to as the presentation aspects.

The name style sheet, therefore, comes from the fact that a style sheet is a collection of some rules or instructions given to a web browser on how to present a web page to a reader of that page. If we think of the browser program as an artist, the style sheet is like the color palette and the brush set of that artist.

Why Cascading?
The CSS rules can be defined at various levels. In fact there are four levels at which CSS rules are defined. The first and the least priority level is the browser’s default set of values. Then comes the external style sheets followed by internal (or embedded) style sheet in the third place. Fourth and the highest priority level is called the inline style definition. (Here we will not try to go in to the details of these levels)

For every web page, all of these 4 levels may not be present. But, every time a web page is loaded in a browser window, the available levels of styles sheets cascade to a single virtual style sheet with the high priority rules taking precedence over the low priority ones. For example, if the same rule is defined at inline and external levels, the inline rule prevails over the other.

In other words, the four levels of style sheets get combined in to a single logical style sheet before they are applied. Hence the term cascade.

All right. Now you know why the Cascading Style Sheets are called by that name. In the next article, we will try to understand the value of style sheets and why they are used in designing web sites.

Related Posts

• CSS Basics - Part 2
• CSS Basics - Part 3
• CSS Basics - Part 4

Centering the Dots Header

In a previous post, we looked at how we can make the header widget of the Dots (and Dark Dots) template go across the blog. If you have a somewhat longer blog title, that tweak will allow you to have it across the blog rather than having it stuck inside the left sidebar.

In this post, we look at another simple tip that will center align the title and the description of such a widened header widget. All you have do is to add a single CSS rule to the #header-inner selector.

This change is illustrated in the code snippet below.

#header-inner {
text-align: center;
background-position: center;
margin-left: auto;
margin-right: auto;
}

Yes, that's all. Just add the line shown in red above and you will have the title and the sub title centered in the header.