CSS Tips to Add Pizazz to Blogs

CSS Tips to Add Pizazz to Blogs

What is CSS, you ask? CSS is the acronyn for Cascading Style Sheet. Style sheets instruct the browser on how the elements such as fonts, colors, sizes, colors should be displayed on a page.  You can modify almost any aspect of your blog's appearance just by changing the stylesheet in your template. There are three parts in CSS: 

  1. Selector.  A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table>.
  2. Property.  A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border.
  3. Value.  Values are assigned to properties. For example,  color property can have value either "red" or #F1F1F1 

The syntax (structure) for CSS is:  

selector {
property: value

css-tips


If you want to convert all text within your paragraphs to purple, you could code: 


p {
color: #573a62


To add more than one style at a time to the same selector you can use code like this: 


p {
color: #573a62;
font-family: tahoma;
}


If you want to add more than one property, just add a semi-colon to the end of all the selectors (see the semi-colon up there after the six character color code and the font name?).


Types of Stylesheets

There are three types of stylesheets:


1) Internal stylesheets go inside a page’s header, after the <head> tag and before the </head> tag. 
Internal stylesheets must be surrounded by these HTML tags to tell the browser where it starts and stops: 


<style type="text/css">
p {
color: #00ff00
}
</style> 

The following example shows how to set a background color with an internal stylesheet: 


<style type="text/css">
body {
background-color: #c0c0c0
}
</style> 


2) External stylesheets are saved as style.css files and linked to from a page’s header as follows: 


<link rel="stylesheet" type="text/css" href="style.css">


3) Inline styles are included in specific element tags as follows (in a way they defeat the purpose of using CSS in the first place): 


<p style=”color: #bf932e;”>This text would be gold.</p>

 

If you are wondering which method of inserting CSS is best, it depends on what you want to do. If you have only one file to style, then Internal will work fine. If you are planning on styling multiple files, then the external file method is the way to go.


Commonly-Used Selectors/Properties/Values


Background color:
body {
background: #ffffff;
}


Background image:
body {
background: url(http://domainname.com/image.jpg);
}


Modify font size and color:
body {
color: #000000;
font-family: arial, tahoma;
font-size: 14px;
font-style: italic;
font-weight: bold;
}


Remove underline from links, change link color:
a {
text-decoration: none;
color: #000081;
}


Add underline on links when mouse makes contact with them:
a:hover {
text-decoration: underline;
}

 

Of course, there are a lot more things you can do with CSS. Start with the CSS tips here to add pizazz to your blog. Once you have learned the basics, you might want to try using Divs and Classes to apply styles just to certain elements or areas of your blog pages. 

 

signature

About Online Biz Boomer Babe

Rachel Lavern is a Certified Business Coach and founder of My Booming Online Business--a blog for middle-age, global, uptown women. She is on a mission to transform entrepreneurs' finances by teaching the action set, mindset and skill set needed to get launched + make money.

Comments

  1. Thanks for the tips. I know a little bit about CSS, but don’t like to get too into it in case I mess something up! LOL Having a tutorial makes me feel better about it!
    Debi recently posted…Spicy Buffalo Cauliflower PocketsMy Profile

  2. There is a lot that I need to learn about adding pizzazz to my blog! This is very helpful, although it might be a little bit too advanced for me! But still, it does give me ideas. Thank you.

  3. Thanks for sharing these tips. You make CSS look so simple and fun.

  4. Thanks for these detailed instructions Rachel. You obviously know your stuff. I dabble in it a bit and have to go over to the HTML side of things – especially when things are not saving on my blog correctly. I am learning on a ‘needs basis’. I have picked up extra tips today.
    Thankyou for that.
    Have a great week.
    Liz
    Liz Delaney recently posted…When it’s Cool to “Mockup”My Profile

  5. Thank you, Rachel, for the great tutorial.

    It is always good to know the code.

    Where do you insert this on a WordPress blog – in the Stylesheet of the theme?

    I appreciate that you share your knowledge!
    Cheers,
    Yorinda
    Yorinda Wanner recently posted…Understanding ourselves through Hand AnalysisMy Profile