Tweaking your stylesheet (in Blogger)

Here is a line of code from a default blogger template that might not make sense to you:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#58a;
text-decoration:none;
}

Here is that “de-coded”:

We’re working with the body { of the page; the whole thing.
background:#fff; The page’s background is white. To change this color, pick another Hex color value.
margin:0; The page does not have a margin around it. To flow your text or boxes all the way out to the edge of the page, leave this at 0. To make a space around the content, change it to 5px or so. “px” is pixels.
padding:40px 20px 30px 90px; Around your actual content, there should be a margin of 40px on top, 20 px to the right, 30 px to the left and 90 px below. The measurements move in the clockwise direction starting with noon.
font:x-small Georgia,Serif; The font for the whole page is extra small and in the Georgia script. You can change the font size to “x-large,” “large,” “medium,” “small,” “x-small,” or “xx-small.” The last one is a little hard to read. “Serif” means if the browser does not have the Georgia font, it will default to another font with “Feet” or “Serifs.” Other common “sans-serif” fonts or those “without-feet” are Arial, Helvetica and Verdana. Stick some of those in there for Georgia.
text-align:center; The text is generally aligned in the middle of the page. If you get down later in the page, the text might be aligned left, right or justified. You can change this value from “center” to “right,” “left” or “justify.”
color:#333; The font color is #333 or grayish. Again, check the link to the Hex color generator I included above. Play around with that.
}
a:link {
color:#3366cc; Links are blue here. You can change the color.
text-decoration:none; Links are not underlined. You can change the value from “none” to “underline,” “bold,” “italic” or others.
}

What is CSS?

Cascading Style Sheets hold the answer to many of the content-design problems. With CSS, writers can put a plain version of their page on the screen and later add the styling. CSS also guarantees that some form of the page will display.
Older browsers have difficulty deciphering newer programming languages. A reader might experience misaligned fonts or words, tables that overlap in odd areas, or, worst of all, their browser might not allow them to access the page. This frustrating situation is much like a reader glancing at a printed newspaper only to find foreign fonts, a giant graphic in the middle of block of text or being unable to even open the newspaper. Web readers have come to expect kinks in their experience, but conflicting browser versions are not meant to give them trouble. Why should a site barely lose credibility for its design flaws when its print readers would be appalled to find missing pages? Web designers now are giving shape to a standard that will clearly display pages across all browsers.
Tweaking your stylesheet in Blogger is not difficult. If you’re scared to touch code that you don’t understand, don’t worry. You can’t break your site. Stylesheets are easy to reload. Play around with yours to customize your site. (Next post, I’ll talk about how to do that).

What’s a PermaLink?

PermaLinks are “permanent links” to blog posts. Theoretically, PermaLinks will exist forever, so readers can come back to your blog in fifty years and read the same post at that same address. When you’re setting up your link structure, make sure your links are named something that will always make sense to you. Later, when you’re looking at a link’s structure, how do you know which post is about banana pudding? Is it called domain.com/id=?2149823 or is it domain.com/banana-pudding.html? Take care when you’re permanently linking to articles.
“Linkrot,” a term for links that are no longer accessible but remain on a Web page because they were credible at one point, is another problem Web designers may encounter. Linkrot happens when information architects for other sites decide to change their link structure. URLs (Uniform Resource Indicators) point readers to any place on the Internet – from images to music files to Web sites. Designed by Tim-Berners Lee to make the World Wide Web accessible to anyone, URLs use a limited subset of ASCII characters so anyone with a keypad can access any content with a few keystrokes. If page addresses or site structures are changed, the URL system is unusable. Telling all the sites that link to a page to update their bookmarks is impractical. Redirection to another page only creates more confusion and is not always practical. The best way to combat linkrot is to think through URL structure before starting a patchy file management system. Link validators are also becoming more popular with webmasters; these tools perform a quick check on pages by queuing up all the links featured on a page. It will then alert the designer of any flawed links. You can type in your Web site address at the W3C site, and the validator will tell you if your links are broken.
How do you change your link structure? In WordPress, you click on the Options tab and choose PermaLinks. Change your structure to reflect whatever naming convention you prefer. I like /%year%/%monthnum%/%day%/%postname%/. That way, I know when I wrote the post and what it was about. For example, this post will be called 2005/09/30/whats-a-permalink. Isn’t that better than a string of numbers in a link?
The PermaLink structure on Blogger is already set up to be intuitive by default. That’s different from the way Blogger used to be. The PermaLink is automatically created with the tag like this: http://hiamanda.blogspot.com/2005/04/go-on.html. That’s the address, month, date and post name. Pretty neat!