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).

Accessibility

Web pages cannot possibly look the same in every browser or on every device. Achieving such a feat is impossible, considering the expanding possibilities of connecting to the Web via PDAs and cell phones, not to mention the array of screen sizes users prefer. The importance of Web accessibility extends beyond merely accommodating people with disabilities. Accessibility is a helpful option similar to those found in the physical world such as ramps for people riding bicycles or people in wheelchairs. Accessible Web content is beneficial to a variety of people with and without disabilities.
Writing a Web site that looks good in one browser is easy, but writing a Web site that renders true in every browser is difficult. Designers use validator services such as the W3C’s HTML Validator to make sure their content will make sense to every reader. A page “validates” if the coding has been shown to make sense to every type of browser.

Writing for the Web

Internet readers’ attention spans are shorter, so their time is more valuable. The inverted pyramid style of writing so firmly cemented in journalists’ minds holds even greater weight online. The Poynter Institute’s eyetrack study found that when visiting a page, readers first look at briefs, captions and headlines. If they are hooked by the initial story idea, they will keep reading, usually, for longer than they would a print story. Poynter found that 75 percent of online article text was read; print audiences read 20 to 25 percent. Of course, Web stories are shorter than print, so what is included must be important.
Paper reflects light, and computer screens emit it, forcing the eye to take in an entire square screen instead of a narrow range of words. Storing content in cyberspace may have immensely improved information’s availability, but our brain power and tolerance for prolonged exposure to light do not allow us to read every word on the Web. If entire news stories are posted online, readers have trouble keeping up. As the story progresses, readers’ attention spans taper off, making the inclusion of the most relevant content of the utmost importance.
Crawford Kilian, author of Writing for the Web, cites technological limitations to Web writing’s full capacity:

Until computer screens approach the clarity of print on paper, Webtext will slow down reading speeds by up to 25 percent. This means that you are wasting your readers’ time unless you cut your text by the same amount. If print can say it in 100 words, your Web site better say it in 75 (or even fewer).

Be concise when you’re writing. As journalists, we think we are masters of precision. Take what you would normally say, and slash it. People won’t read screens full of gray text. They like lists. They like breaks. Use them.