Using CSS to Dress Up Your Blog

To view your new blog entry, just click View Blog in Blogger or navigate to the address of your blog, which is http://yourblogname.blogspot.com/. In the example, the address of the blog is http://mcmafia.blogspot.com/this page is shown in Figure 21.7.

Figure 21.7. The Music City Mafia blog shows the blog entry that was just created.

By the Way

Notice that the URLs of blogs on Blogger are specified relative to blogspot.com, not blogger.com. This is an important detail that you don't want to miss.

You'll notice in the figure that the blog assumes the look of the default template that was selected earlier when you first created the blog. Surprisingly enough, the default template isn't a terrible match for the hockey player page you've seen a few times throughout the book. However, it is still helpful to fine-tune the template to get exactly the look you want.

Click the Template tab on the Blogger page to get started altering the CSS style sheet for the blog. Figure 21.8 shows the Template area of Blogger with the Music City Mafia blog template in view.

Figure 21.8. The Template area of Blogger provides access to the layout and formatting of your blog via HTML and CSS code.

If you pay close attention to the code shown in the Template area of Blogger, you'll notice that it doesn't just contain CSS code; it's actually a complete XHTML-compliant web page with special Blogger-specific tags that insert blog content. More important, it includes a hefty internal style sheet that serves as the template for the blog. You can make changes to this style sheet to change the look of your blog.

As an example, the following code contains the CSS style rule for the blog's body element:

 body {   background:#fff;   margin:0;   padding:40px 20px;   font:x-small Georgia,Serif;   text-align:center;   color:#333; } 

The first change to the blog style sheet involves altering the font of the body to match the hockey player style sheet, which relies on the Verdana font. If that font isn't available, the style sheet falls back on the Arial font. Here is the new body style rule with the font change:

 body {   background:#fff;   margin:0;   padding:40px 20px;   font:x-small Verdana, Arial;   text-align:center;   color:#333; } 

If you recall, the hockey player style sheet also used special formatting for links. Following is the link formatting code that is present by default in the blog template:

 a:link {   color:#58a;   text-decoration:none; } a:visited {   color:#969;   text-decoration:none; } a:hover {   color:#c60;   text-decoration:underline; } 

And here are the modified link styles borrowed straight from the hockey player style sheet:

 a:link, a:visited, a:active {   color:#19619A;   font-weight:bold;   text-decoration:none; } a:hover {   background-color:gold;   font-weight:bold;   text-decoration:none; } 

The new link styles no longer show an underline for links. Additionally, a light shade of blue is used for the link text, and a gold background is drawn when the user hovers over a link.

In an effort to tie a bit more gold into the blog, it might add some punch to change the blog title so that it has a gold background with navy text. Following is the original CSS code for the header of the blog:

 #header {   width:660px;   margin:0 auto 10px;   border:1px solid #ccc; } 

And here is the modified header that sports a gold background:

 #header {   background-color:gold;   width:660px;   margin:0 auto 10px;   border:1px solid #ccc; } 

The navy color for the blog title is specified in a separate style rule, #blog-title, shown here:

 #blog-title {   margin:5px 5px 0;   padding:20px 20px .25em;   border:1px solid #eee;   border-width:1px 1px 0;   font-size:200%;   line-height:1.2em;   font-weight:normal;   color:#666;   text-transform:uppercase;   letter-spacing:.2em; } 

This code is for the default blog title style rule. Following is the modified version with navy text and small caps, which is consistent with the style of the hockey player style sheet:

 #blog-title {   margin:5px 5px 0;   padding:20px 20px .25em;   border:1px solid #eee;   border-width:1px 1px 0;   font-size:200%;   line-height:1.2em;   font-weight:normal;   color:navy;   font-variant:small-caps;   letter-spacing:.2em; } 

The last section of style code to take a look at is the title of each blog entry, which could also benefit from a navy color and small-caps font. Following is the original style rule for this element:

 .post-title {   margin:.25em 0 0;   padding:0 0 4px;   font-size:140%;   font-weight:normal;   line-height:1.4em;   color:#c60; } 

The modified version of this style rule simply adds the color and font-variant properties to the end of the rule:

 .post-title {   margin:.25em 0 0;   padding:0 0 4px;   font-size:130%;   font-weight:normal;   line-height:1.4em;   color:navy;   font-variant:small-caps; } 

Figure 21.9 shows the hockey blog with the new style modifications applied.

Figure 21.9. The hockey blog with a modified template now more closely matches the hockey player pages.

If you compare this page with the page shown in Figure 21.7, you'll notice that the changes have a significant effect. Perhaps more important is how the blog page now matches up stylistically with the hockey player page that will link to it. Look ahead to Figure 21.10 to see this page.

Figure 21.10. The blog link is now plainly visible near the bottom of the hockey player web page.