Changing Blogger Font

As you can probably tell, the fonts used in the Bakery sidebar are different from the standard font styles that we get with Blogger templates. I had also changed the font for the post headings but down at the bottom of the sidebar I still have a few Blogger widgets using the original Blogger font:


I'm going to leave the capitalized headings as they are but I'll change the font used in "blog archive" and "categories" widgets on the right side vertical navigation bar.

As you can see from the code, these links are part of a list. They are wrapped in a "widget-content" div.


Since "sidebar" is the parent div, I'm going to target the li's that are descending from "sidebar". So I write my descendant selector as:

.sidebar li {
font-size:11px;
color:#999999;
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
}

.sidebar li a {
color:#999999;
}

And we get:


I'd like to give the contents of Blog Archive and Categories some intendation.

.sidebar li a {
color:#999999;
padding-left: 8px;
}

Final result: