Interesting video tutorial.

As a rule of thumb, you should always use relative font sizes to make the reading comfortable to your visitors. By doing so, users can actually resize your text and are not forced to get closer to their monitor. CSS provides two useful relative lengths for this purpose: ems and percentages. However, browser are really quirky when it comes to font resizing with these lengths. During all these years, fortunately, some developers found out two useful font size constants that form the base of a successful font sizing:

1. 62.5% – equals to 10px
2. 76% – equals to 12px

First example with 62.5%:

body {font-size: 62.5%;} /* 1em = 10px */

h1 {font-size: 2em;}  /* 1 * 2 = 20px */

Second example with 76%:

body {font-size: 76%;} /* 1em = 12px */

p {font-size: 1.1em;} /* 1 * 0.1 = 13px */

As you can see, it's very simple to make font size calculations using these constants.

Surely the header of our Blogger blog is one of the first things we need to stylize with CSS. For example, given the following markup:

<div id="wrapper">

    <div id="header">
    
        <h1><a href="http://onwebdev.blogspot.com">onwebdev</a></h1>
    
    </div>

</div>

we can add the following styles if we want our header appear with a tiled background image:

body {
    font-size: 76%; /* 1em = 12px */
    margin: 0;
    padding: 0;
    background: #fff;
    color: #333;
}

#wrapper {

    width: 100%;

}

#header {

    height: 190px;
    background: #def url(img/header.png) repeat-x 0 0;
    position: relative;

}

#header h1 {

    margin: 0;
    font: normal 8em Georgia, serif;
    color: #339;
    position: absolute;
    bottom: 0;
    left: 0.5em;
    

}

#header h1 a {

    color: #339;
    text-decoration: none;

}

The background image is repeated horizontally using the background-repeat property. Note that we've also specified a background color for our header. This is considered a best practice to follow in order to make sure that a correct contrast between background and foreground colors is provided to users who have turned off images in their browsers. To achieve the effect of a title put at the very bottom of the header, we use absolute positioning on the h1 element. This work because its parent element has the declaration position: relative. This is called contextual positioning. You can see the final result here.

Handling floated images can be actually a tedious task, especially when we don't want that the elements following those images be still affected by floating. For example, if you have a markup like this:

<p><img src="image.png" alt="Image" class="alignleft" />Paragraph content.</p>

In this case, it's very likely that the elements coming after the paragraph are still affected by floating, because the content of the paragraph is not sufficient to contain the floated image. You can easily fix this problem by adding the following class to the paragraph:

.cleared {
  overflow: hidden;
  height: 100%; /* IE6 */
}

However, you still have to add this class manually. You can automate this task by using jQuery. For example:

$(document).ready(function() {

    $('img').each(function() {

      var $img = $(this);

        if($img.hasClass('alignleft') {
             
              $img.parent().addClass('cleared');
        }

    });

});

By doing so, floated images inside paragraphs are automatically cleared and contained.

Wide images can actually break your layouts if not handled properly. Suppose that you don't want to use the Blogger upload function. Instead, you want to insert an image this way:

<img src="http://www.somesite.com/img/wide-image.png" />

You open your post page and you notice that your layout is broken. Sure, you can specify the dimensions of each image through HTML attributes, but to do this you have to know in advance the exact dimensions of each image. CSS provides a simple workaround to this problem:

img.wide {
  display: block;
  width: 100%;
}

By doing so, the width of each image will always fit the width of its container. This technique works because we've turned our images into block-level elements and then we've applied percentages to them. You don't have to worry about the exact dimensions of each image anymore. Really useful!

The CSS reset technique deals with browser default styles. Each browser has its own default styles used to handle HTML elements when no other styles are provided. Sometimes these default styles can actually interfere with the design that you want to get. So it's better to reset them by normalizing all HTML elements. However, you have to make a choice: if you want to perform a global reset, just use one of many CSS reset templates that you can find with a Google search, otherwise you have to select which elements you want to normalize. Here's a basic example:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, dd, blockquote, pre, address, form, fieldset, legend {
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
}

As you can see, we've chosen some elements that we know as affected by the default styles of browsers. Of course you can add even more elements to the list, for example by including table elements. The choice is up to you. Bear in mind, however, that sometimes relying on default styles is useful. For example, paragraphs have all top and bottom margins set to 1em. If you reset them at the very beginning of your CSS file, you have to specify these margins later in the source if you want to achieve the effect of some white space above and below them.

Sometimes we cannot get the effect that we want with CSS due to some cascade and specificity problems. The first and most noticeable problem is that related to inline styles. Inline styles are those attached to a single HTML element through the style attribute. According to CSS specifications, these styles take precedence over other styles. For example, if you have the following markup:

<p style="color: red;">Test</p>

with this CSS rule:

p {
  color: blue;
}

The text of the paragraph is still red because of the higher specificity of inline styles. If you want to override them, you have to use the !important statement, like so:

p {
  color: blue !important;
}

You can use this statement in many cases, but not in all. Suppose that your template contains the following rule:

#wrapper .post {
  font-size: 1.2em;
}

An innocent coder would be tempted to use the !important statement, as follows:

.post {
    font-size: 1em !important;
}

It doesn't work, because the former rule is still more specific than the latter. Instead, you have to write:

#wrapper .post {
  font-size: 1em !important;
}

Also remember that the source code order is relevant: if two rules have the same specificity, the winner is the rules that comes after in the source. This also applies to the source code position of stylesheets: if all the embedded styles are put within the style element, make sure that your linked styles (via the link element) come after this element, like so:

<head>
<style type="text/css">
...
</style>
<link rel="stylesheet" href="http://mywebspace.com/style/blogger.css" type="text/css" media="screen" />
</head>

By doing so, your styles can actually override the others in case of rules with the same specificity.

Although you can easily download and install a new Blogger template, it's always a good thing to understand how CSS layouts are actually handled by Blogger. First, CSS styles are embedded inside your main HTML page template inside the style element, like so:

<head>
<style type="text/css">
...
</style>
</head>

If you want to embed new styles, just put them inside this element. Otherwise, you can even use an external stylesheet that you can upload elsewhere and link in your template using the link element, as follows:

<head>
<-- more here -->
<link rel="stylesheet" href="http://yourwebspace.com/style/blogger.css" type="text/css" media="screen" />
</head>

Now one important thing to take into account is how your HTML page template is structured. You should bear in mind that you can actually edit your design through the visual design editor provided by Blogger. When you make a change to the layout using this editor, this change is automatically added to the embedded stylesheet used by your template (in the style element, remember?) through Blogger variables which start with a $ character.

Further, you have to deal with widgets. Widgets are HTML snippets used by Blogger to contain all the sections of your blog. When you edit your HTML template, you have to select the option "Expand Widget Templates" to see their inner HTML structure. Why so? Suppose that you want to stylize the main container of your blog. You expand widgets and find out that its name is wrapper. So you can write the following CSS rule:

#wrapper {
    margin: 0 auto;
    width: 90%;
}

I don't recommend you to modify this widgets through the HTML editor, because their names are used internally by the CMS to make your blog work. If you want to add or remove widgets, use the GUI provided by Blogger.

A useful video on PHP installation.