karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part Seven /a




Let's talk about fonts (2)

This part of the tutorial will show you how to set the font for each part of your page.

I do not - repeat: NOT - advise you to select a different font and/or color for each part. Just pick the part that you want to change out of the list of examples below.




The Original Style Sheet


First let's have a look at the original:






body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }






One for all


In order to set one font for the entire page, all you have to do is to add the font definition to the body section of your style sheet and remove it from the .review div.text section.

In this example the entire blog is set to use the font "Jura" in the color green. Only the links remain blue because they are specifically set to "blue" in the line below the body section. You can change that blue to any color you like of course.

Compare the two style sheets to see the changes made in this example:






/* Sets the font for the entire blog */

body { background-color: white; font: 100% 'Jura', sans-serif; color: green; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { }







One each


This example shows how to set font and color for the various sections of the blog. Each section has its own font and color to make it easier to identify.







body { background-color: white; font: 100% 'Verdana'; color: black; }
#acctnav a { font: 90% 'Jura'; color: purple; }
.pagetitleblock { font: 120% 'Kaushan Script'; color: teal;}
.pagecommands a {font: 90% 'Istok Web'; color: red; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.headpost {font: 100% 'Jura', sans-serif; color: blue;}
.review a { font: 100% 'Istok Web', sans-serif; color: navy; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: 100% 'Jura', sans-serif; color: green; }
.review div.text a { font: 100% 'Jura', sans-serif; color: orange; }



  • body
  • Use the body section to set a default font for your blog. It will show everywhere except where you specifically change to another font.


  • #acctnav a
  • This is the top line of your blog. Since everything there is a link, the a must be added to the #acctnav.


  • .pagetitleblock
  • This section contains your User-ID and therefore is predestined for a nice cursive font. Make sure you do not forget the '.' at the beginning of the line.


  • .pagecommands a
  • These are the links just above the header. Notice that the a must be added here as well or the links would appear in the color specified in the next line.


  • a
  • This line sets the color for all the links on the page. By default it is set as 'blue'. Change it to whatever color you like. Of course you can set a special font here as well.


  • .invertlink
  • This is the color combination for the Queue link in the #acctnav section for when there's a new message for you. So basically you are the only one who will ever see the color combination.


  • div.hairline
  • This is the hairline above and below your actual blog. Adjust the color to fit your overall color scheme.


  • .headpost
  • This is your banner. Very important, because it's the first thing a visitor sees when calling up your page. So make sure you select a pleasant color and easy to read font.


  • .review a
  • This sets the font and color for the links in the header bar over each review.


  • .review div.bar
  • This merely sets the background of the header bar over your reviews. Select a nice background-color or make it transparent.


  • .review div.text
  • This sets the actual font and color for your reviews.


  • .review div.text a
  • This sets the font and color for the links inside your reviews.






Now, choose wisely :-)






Follow me to the third part of this tutorial (Part 7/b) to learn how you can set the font inside the review by using some simple HTML.



>>>> Part Eight