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.

Tutorials- Blog Styling Tips

Text Shadow Create text effects without using images
Drop Caps Make first letter of the page stand out and span several lines

Resources

CSS Cheat Sheet To refer to when you experiment with custom styling.
Tag Reference Guide Look up html tags by category
CSS Font Family Glossary Look up web safe fonts and set a default family
Margins, Padding and Borders Explanation of the html box model for framing content
How to Gussy Up Your Best Blog Posts Tips for adding flare and lighting up post content
Note: Tutorial code may contain a green arrow to mark line continuation.greenarrow copyhtml 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.

Help-HTML-CSS

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>

There are two ways to control what gets into the page source.

  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.

Comments

  1. 2Em4KI nnlzbejcezia

  2. Stay with this guys, you’re helping a lot of peploe.

  3. Awesome posting.
    Really nice writing.
    As always ur posts are very helpful.

  4. Some small tweaks can make a better user experience. Customizing heading tags such as h1, h2 .. is good to attract the reader’s eye. Good list to consider when planning to customize a blog.

    • Welcome Sreejesh,
      Glad you see the advantages of customizing with these small tips! Thanks.

  5. Hi
    Nice blog you have here.
    Amazing what is possible with CSS. I love playing around with that kind of stuff. Great tip with the text shadow. I was not aware of that one. Thank you for sharing.

    • Thanks Thomas! It’s nice when even the IT techs find something new here! I discovered the Windows 7 Snipping tool on your blog — always looking for ways to communicate with clients and this is quite easy. So thank YOU for sharing. lol

  6. This is good advise. Anyone running a blog/website should know some of the fundamentals of coding it. Now, that doesn’t mean all in depth coding, but the basics should be known. You can pay for the detailed coding as needed!

    There a lot of resources on the internet to help avoid anyone from not knowing how to do basic coding for images, url links, and sidebar widgets.

    • Welcome Roger,
      Thank you for joining the discussion. I agree there’s lots of help out there, even on Twitter — I find myself replying to people who find themselves in a jam. I looked at your blog for an About page — would be nice to know what a bit more about you and background on your blog. I did get a flavor from your Twitter profile.. was that the plan all along? lol

  7. I know html basics but never tried to learn it in depth. That was nice post, I like the resource section, I will spend there some time to learn new skills!

  8. I agree. I’m using Thesis and I do my best to customize it.

    I know the basics of html and css, enough to get by. And whenever I have a problem, I just google it and find the solution (because I already know the basics).

    Thanks a lot for sharing.

  9. I’m just getting into the whole CSS thing, and this is a great introduction. I know enough to customize Thesis, but still am not very knowledgeable about the syntax and what everything means.

    Thanks, SBA!

  10. Great guide, i’m amazed that there isn’t a whole ebook on designing a good blog though.

    Coding i don’t think is the hard part, you just have to put it into practice or you won’t learn very well, and a blog is a perfect way to do that.

    • Hi Peter,
      Thanks for your comment. I agree the harder part is to actually start coding. The best motivation is to have something real you want to change or test out. Many premium and quality free themes come with a load of options to ‘design’ your personalized version of the theme. Often you can take it to the next level by adding bits of styling (CSS) — themes leave hooks or places to do just that.

      And yes, a test blog is a good place to start. On self-hosted sites we can define add-on or sub domains for that sort of thing. I suspect there are a few ebooks on blog design. If not that can be your next project.. lol

  11. Cool fonts can really help the way your blog looks. Lets face it if you blog is not appealing then nobody will want to read it.

    • Hello Dustin,

      Thanks for commenting. I see your blog is VERY new — still has the default theme and comment from “Mr. WordPress” ? Are you planning to use font plugin?

  12. Great info SBA – I remember when I started up my site last summer I spent most of my time learning the the coding aspect. It was very time consuming but it gave me some freedom with my design. Now, I still have a lot to learn and more styling to do…but I think that it’s an essential part of the trade. This was a great intro to styling that is still very relevant for me, so I’ll be calling on this when I need it.
    I made the re-tweet on hompage update!
    Thank you

    • I use the CSS cheat sheet often! The main point is to not be afraid and see if you can gain the freedom or control you mentioned. I sort of went crazy with my first blogspot template hacking but that ability helps me with WP tweaks. Amazing how some great free templates still don’t space lines properly for readibility. You just have to change one line in the CSS file to correct that!

      Yes, I noticed the homepage update. Looks good.

  13. Nice post. It is to the basic for those who are looking for styling their blog.

  14. Hi there,

    Its good to see a post on styling. I'm in the process of designing a WordPress theme, simple and clean and also it will be a low cost solution for bloggers. I've been learning a lot for the past few months and designing side by side and the package has come a long way. I will soon have it completed and probably bloggers and aspiring designers will come to know how useful articles like these are.

    Cheers,

    Eddie Gear

    • Eddie, I appreciate your encouragement. You can do so much more with just a few styling or html tags. CSS makes it so easy to customize even a template you purchase. Just changing the background color or header image can make a difference.

      Good luck with your template. Designing is creative, frustrating and rewarding! I'd be happy to take a preview look.

    • Best of Luck with the theme.

  15. THANKS FOR SHARING

  16. My blogging life would be so much easier if I was well versed in CSS and HTML. Seriously, it would be such a stress reliever to be able to tweak my blog without yanking out handfuls of hair.

    • CJ, you have an inner 'geek', just face it and get in touch. Create a test blog on free platform and start tweaking. You can copy over the real post you may be struggling with, look at the html and use the resources listed in this post. As always, we are just an email away if you get stuck!

    • It is not that difficult to learn CSS/HTML.

      Just keep breaking! Seriously!

      Ask SBA how I have broken our theme 196(and counting! :-) ) times! When we moved to WordPress, SBA was only member in team with good knowledge of CSS. But I kept experimenting and now I know decent CSS and PHP to edit themes!

Trackbacks

  1. Gail Gardner says:

    Introduction to Blog Styling Tips (tags, elements, attributes, CSS, html) http://twurl.nl/ok3t4s