Blog Styling Tips: Introduction

From the Archives: July 1, 2009
Updated: Today every blogger needs to know basic coding terms. Even when copying code for a coupon widget, a bad format can mess up your entire sidebar. It's useful to know how to make an offsite link open up a new window. Also your comments stand out when you can add images and other formatted text on others' blog posts.

This article holds the index for tutorials on blog styling tips, related resources and some background on CSS/HTML for the beginner. Every successful blogger needs to know the basics for some Do-It-Yourself post formatting and template design.

Note: Tutorial code may contain a green arrow to mark line continuation. Hover the mouse over any line. Small toolbar pops up. Click second icon to copy the code to clipboard. Then paste into your html editor. Use third icon to print.

image by squidoo.com

We need to take a quick detour--- look under the hood --- before we get into some styling tips to personalize your blog design or gussy up blog posts. Skip this section if you know about using html to change page properties. The page source or html instructs the browser how to display your home or individual post pages. If you want to see html for this screen then right click the page, select ‘view page source’. You write the post content, but everything else comes from the blogging platform and template code. They work magic behind the scenes and most of us could care less.

Quick Definitions

These are some quick definitions and terms used in our tutorial:

1. Tag - this is the html language that tells your browser to interpret something. The 'something' appears between the less-than, greater-than markers: example for the image tag
   < img> -This interpretation is sometimes referred to as parse or read programming code.Tags come in pairs, one to 'open' and one to 'close'.
   </img> -The close tag starts with a slash and repeats the tag name.
   
2. Element - the 'something' inside the opening and closing tags that needs to be parsed or interpreted by the browser or platform editor like WP or Blogger. For example a text link for our blog's url:
   <a href="http://bloggingwithsuccess.net">BloggingWithSuccess </a>
   
3. Attribute - often you have multiple attributes for one tag, so you can specify different values and customize to your liking. For the link tag you can use href= for the url or image address and target= for the type of window. This example opens the page in a new window:
   <a href="http://bloggingwithsuccess.net" target="_blank">BloggingWithSuccess </a>
   

CSS/Html Background

We use WP or Blogger's WYSIWYG editors to style text color, boldness and alignment. The editors turn this into html instructions for the page source. For example, a bullet list displays :

On Your Screen	In Html Page Source
Item one	<ul><li>Item one</li></ul>

1. “External” - The method that makes us cringe involves CSS (Cascade Styling Sheet) and Html of the actual template/theme you’re using. Most bloggers’ eyes glaze over when you mention “opening up the CSS or Html code.” Although many bloggers on Blogger.com are more apt to dig into the ‘HTML’ tab using a good tutorial, most WP users search for a plugin or new template. Example of bullet styling of items in an unordered list:
   

   .post ul li {
   list-style-type: square;margin: 0, 0, 2, 15 ;
   padding-top: 1,0,0,0;}

2. “In-line” - The second method is used within the post or gadget to override template defaults. The html view in Blogger or WP lets you add and override template styling. The page source code for the bullet above would be
   

   <ul><li style="list-style-type: square; margin: 0, 0, 2, 15 ; padding-top: 1,0,0,0;">
   Item one</li></ul>

   Notice the same values but external style definition uses the { } while in-line uses the keyword style=" " with values in quotes. To override the bullet type for a circle image you would use:

   <ul><li style="list-style-type: circle;">

   letting other values default from the template.

Summary

Even if our tips show in-line styling, you can translate it to the template CSS if you want it to become your blog's default. You just need to know the element to attach the styling (e.g. header, post, comment, etc.)

Just take a minute to reread this and understand the methods rather than the details of what the keywords mean. One is your template language CSS while the second is your post or gadget html. The CSS guides the way each element of your page is shown on the screen and becomes html attached to each element. It's important to note that when you view html in the post Editor, you do not see the default or 'inherited' styling from the template! After all, that would get very very messy (take a look at that page source again if you dare!)

Bookmark this page for future tutorials which we'll add periodically.

Happy Styling. and Good Job, your eyes glazed over only three times! Leave a comment here to prove you read the highlights at least  .  We look forward to any suggestions.