CSS tutorial for Blogger users: basic concepts

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.

Leave a Reply

Note: Only a member of this blog may post a comment.