Inline Style: CSS For Styling A Blog Post.

Posted by Neville on July 7, 2011 under Blogging, How To, Resources, Training | 2 Comments to Read

Using Inline Style In Blog Posts

dotrim

CSS Inline Style

So now it’s time to begin to add some style to your blog posts. To do that you can use inline styling. In this post I will discuss and demonstrate how to do that.
But first, what can you do with Inline styling.

1: You can makeĀ  a simple button to link to another site.

2: You can use commands to set out your text in different ways.

This paragraph has extra spacing between letters.

This is normal spacing.

3: Adjust the font.

The font size is set to 36 pixels

4: Change the Font Face.

This is Arial Font, size 24 pixels and Bold

These examples just scratch the surface of what is possible.

So now I guess that you are asking how is it possible to do these little tweaks.

All of these variations to the normal text and features of a blog post have been achieved by adding some basic CSS code into the HTML editing box when the post was being prepared.

Using the first example, the basic button, the effect was made by

  1. Editing the post in the HTML editing box.
  2. Preparing a division (the <div> and </div> tags) to take the code and to hold the result.
  3. In the <div> tag set up the style selector. In this case a box with a border. (eg <div style=”font-size:24 etc”>)
  4. Add the link code into the division.
  5. Publish the post.

Please note that using Inline styling is not the most efficient way of adding style to your blog if there are some features that you want to repeat on other posts. This type of styling needs to be set up each time that you want to use it.

A later post will outline the more efficient way of using CSS, the Stylesheet. 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.
  • Don Dousharm said,

    Hi Neville,

    I understand the inline style by adding direct into the html. I guess my question to you is, on an ordinary html page (not blog) you can also add scripting in the head tag as you would in an external style sheet as to manipulate multiple actions. Can this also be done by adding code in the head tags of a WordPress blog? Also wouldn’t that affect all pages on a blog? I ask this because by using the WordPress editor I am not sure if that is all based on external style sheets or if the head tags are internal….

  • Neville said,

    Don,

    I’m not sure that I am, at this stage, able to answer the question effectively. I have only considered using CSS code using Inline Style or External Stylesheets. The next post will introduce the process for manipulating the Stylesheet. My reasoning is that, basically, the only parts of a blog that I would want to modify would be in the posts. Inline style and External Stylesheets are the most convenient for that.

    My best guess answer to your question is that, if you can get access to the head for various other components (such as the Header and Footer) then any CSS code you add there would then affect the style of all examples of those on the blog.