12. Font and Positioning

With our new content in, it’s clear that we require further work on the presentation so let’s add some properties that will change the text on our page:

I’ve compacted the site a bit so you can see all the changes I made…here’s my updated rule for the “site-header” class:

.site-header {
   font-family      : "Hobo Std", sans-serif;
   font-size        : 32px;
   font-weight      : bold;
   text-align       : right;
   color            : #084b8a;
   margin           : 0px 0px 5px 0px;
   padding          : 15px 15px 15px 15px;
   border-radius    : 10px 10px 10px 10px;
   background-color : #f5bca9;
}

You can see I’ve added quite a bit here, I’ll walk you through all the new properties we’re now going to be using.

font-family
This is the property that informs the web browser what font to use. You can separate your fonts with a comma and if the computer this page is being viewed on doesn’t have your first choice, the browser will check for the others. Notice my first font is in inverted commas? This is because it has more than one word, my second one is just one word (albeit with a hyphen in the middle) and so it doesn’t need a set of enclosing quotes.

Also notice that my second option is not actually a system font. It is a CSS phrase that informs the browser to find a “sans-serif” font which basically means a non-cursive one.

font-size
This is a pretty obvious property but one that you will most certainly find useful. There are different ways to represent the size of something in style sheets but rather than confuse you with all of them, let’s just stick with pixels!

font-weight
This is how you set all the text inside this rule to be bold. You can actually have strengths of boldness by putting a number like “200” or “700” instead of the “bold” value but I think we’ll just stick with “bold” for now.

text-align
Once again, a pretty obvious property. There are three possible values you can use here, “right“, “left” and “center“.

color
Notice we have “background-color” and “color“. One is for the background, one is for the text. Isn’t CSS simple!

So now that you know how to alter the text properties of your web page, go ahead and do it. You don’t have to make it look like mine but you should try getting all your sections looking different. Just don’t worry about the menu for now, it’s gonna be done a bit differently later on!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>