Stylesheets: CSS Styling For Blog Posts

Posted by Neville on July 8, 2011 under Blogging, How To, Training | Comments are off for this article

Using A Stylesheet to Style your Blog.

This method is the most efficient way to use CSS code in your blog. The elements, classes and ids that you set up in the stylesheet can be used over and over, without having to insert the whole code into its location, just the details that will call on what you want to happen.

The following examples come from modifications that I made to the stylesheet for this theme.

1: Shadows around boxes or divisions to make them stand out from the ordinary text.

This slab of text is enclosed in a division that has been given the class that makes a shadow around the box. This is ideal for text that  you want to highlight. It may be a quote from another source, or an important point that you want to emphasise.

 

 

2: To modify the standard values for elements. eg to make a bigger headline text.

This is the standard headline size 1.

This is styled headline size 1

Please note that a text shadow command has been used above, in addition to the change in size and colour.

3: To modify images. For example, adding round corners.

How to use the Stylesheet for adding features to your blog.

IMPORTANT: Before you begin:

Back Up Your Blog.

  1. Prepare the code to be added.
  2. Open the Editor from the Appearance menu on the Dashboard
  3. Locate the Stylesheet. In this theme it is called style.css
  4. Decide on a location to add your code. I choose to put it at the end, where it is easy to find if necessary to edit or remove.
  5. Paste the code on to the stylesheet
  6. Save the file. You are now ready to add the code to your posts.

A future post will outline how to add the code that calls the commands from the stylesheet. Once again, stay tuned.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments are closed.