Modifying Fonts To Change Appearance: CSS part 2

Posted by Neville on June 17, 2011 under Blogging, How To | Comments are off for this article

CSS Part 2:

Cascading Style SheetThis post demonstrates a couple of examples of the use of the Font attribute to change the appearance of the text in a post.

I will have to admit that it took several previews of the page to make sure that I got it right. When you use the inline style command you just have to get all of the attributes and elements right, including the quotation marks, commas and semicolons.

The editing of the post is done in the HTML editing frame. Any changes made will only affect this particular post.

To make changes that appear throughout the blog, it will be neccessary to edit the theme’s code. However, any CSS style commands used in the HTML code for a post will take precedence over that in the theme’s code. That means that this process (when you get it right) will be useful for formatting individual posts.

The downside is that the code has to be added on each post as you are preparing it. But it could still be handy to use on some posts.

Times New Roman

Arial Black

The html code to produce the results above is:

<p style=”font-size: 36px; color: red; font-family:”Times New Roman”, Times, serif; “>
Times New Roman </p>
<p style=”font-size: 36px; color: blue; font-family:Arial Black, Gadget, sans-serif;”>
Arial Black </p>

Explanation:

  • The style commands were included in a paragraph <p Selector
  • The order of Properties was important. Size and Color before the Font Family.
  • Semi-colons (;) after each Declaration (Property and Value)
  • Colon (:) separating each Property and Value.
  • Note the use of quotes. Must be in pairs. (” and “)

For much more comprehensive CSS training resources visit the CSS Tutorial at W3Schools.com

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.