Saturday, March 28, 2009

CSS Basics – Part 4

This will be the final part of a series of articles which introduced the basics of Cascading Style Sheets (CSS). In this one, we will take a look at what makes up a style sheet. One might think that this is something that we should have looked at the very beginning of an article series for CSS basics. However, I took a different approach here in first explaining the why before looking at what.

First a quick reminder; part 1 was about how CSS got its name, part 2 covered its use in separating content from presentation and part 3 was about how the separated presentation (i.e. style) is hooked up with content with the use of selectors.

A style sheet is nothing more than a collection of rules. Each rule has a name (or selector to be precise) and a declaration block. A declaration block is a collection of declarations enclosed within a pair of braces (i.e. “{}” ), where each declaration consists of a property name, followed by a colon, followed by one or more comma separated values. Each declaration in a rule should be separated with a semicolon.

If the above sounds complicated, take a look at the following figure, which illustrates the anatomy of a CSS rule. What is shown on top there is an exploded view of a rule marked with Label (1). This exploded view highlights the important elements of a rule described above; i.e. the selector, the block delimited by opening and closing braces, the declarations and their constituent parts property name, colon, values and the semicolon.


You normally see rules as shown by Label (1). However, the whitespaces (i.e. tabs, spaces and line breaks) have no significance to the computer program (usually a browser) that processes these rules. Therefore, rules shown by Labels (2) and( 3) also have the same effect as the rule tagged as Label (1).

This format is technically referred to as the syntax of a CSS rule. Think of it as the grammar of a natural language, say English. To write proper English you must use its grammar correctly. Likewise, proper adherence to CSS syntax is a must. When you define a CSS rule, you have be very careful to put the braces, the colon and the semicolon in the required places. If you miss any or add more than what is required, your style sheet can go haywire and as a result you web page or blog can end up in a mess.

All right, this brings us to the end of this four part series covering the basics of Cascading Style Sheets in simple, non-technical English [as much as possible :)]. Hope you found it useful. For the more interested readers, I recommend the CSS Tutorial at W3Schools and the more comprehensive CSS Guide by Westciv.

Saturday, March 21, 2009

CSS Basics – Part 3

In the two previous parts of this series, we looked at why CSS is called by that name and the importance of CSS to web designing. In this part, we will cover selectors, which is absolutely crucial in understanding how CSS works.

Linking Presentation and Content
In part 2, we learned that CSS helps us to separate the content of a web page from the presentation of that content. This separation is a very much desired technical feature that enables web designers to vary the presentation (or style) of a web page without much of a hassle.
Though this separation is technically better, it becomes useless if we don’t have a way of attaching a given presentation aspect (i.e. a CSS rule) to some given content (i.e. an HTML element). This is where the selectors come in handy. Selectors are the means by which we link the separated content and presentation.

What is a Selector?
A selector identifies an HTML element in a web page. In other words, a selector selects an HTML element and applies the style rules defined in it, to that selected element.

If you open your Blogger template in Edit HTML mode and scroll to the template skin area, you find many CSS selectors applicable for that template. a, .sidebar, #main-wrapper are some examples for selectors found in most of Blogger’s templates.

Types of Selectors
There are many types of selectors in CSS. Out of them, the following three are very important.

  • Type (Element) Selectors
  • Class Selectors
  • ID Selectors
Type or Element Selectors identify basic HTML elements. p (paragraph), a (anchor), body, table are all examples for basic HTML elements. An Element Selector is defined simply by using the element's name as the name of the CSS rule. For example, the following CSS rule selects the entire body element of an HTML page and changes its background color to black.

body {
background-color:black;
}

A Class Selector is applied to one or more HTML elements which have their class attribute set equal to the name of the Class Selector. A Class Selector is defined using any name with a dot ( . ) in front. There should not be a space between the dot and the name of the CSS selector.

A Class Selector called “myclass” is shown below.

.myclass {
color: red;
font-size:10pt;
}

To apply the above CSS rule, we have to add the required HTML element to that class using the class attribute.

<p class=”myclass”>
This paragraphs text will be in red color size 10 fonts.
</p>

An ID Selector is applied to one and only one HTML element in a web page that has an ID equal to the name of that selector. The name of an ID selector is preceded by a hash ( # ) character.

#outer-wrapper is an example for an ID Selector with the name outer-wrapper and the following div element has its ID set to outer-wrapper so that the #outer-wrapper CSS rule gets applied.

<div id=”outer-wrapper”>
</div>

Note that when Class and ID selectors are applied to HTML elements, the values given for the class and id attributes include only the name of the selector. The dot or the hash characters are not used for the attribute value.

The Class and ID selectors are functionally similar. They differ due to the fact that a Class Selector can be applied to a group of HTML elements whereas an ID Selector is limited to a single element.

There is a lot more about CSS selectors. Pseudo selectors, descendant selectors, child selectors and specific class and ID selectors are other important concepts. However, as this article series is about CSS basics, I will limit the discussion to the above three.

Sunday, March 15, 2009

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.

Sunday, March 8, 2009

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.

Friday, March 6, 2009

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.