.
Using CSS is a lot of fun, especially for bloggers. In this CSS Tutorial, you will learn how to work with fonts on your blog or website.
This CSS tutorial is based off using WordPress; however, the coding itself can be used on any website. One of the great things about learning how to customize HTML and CSS is that your knowledge can be used universally on all publishing platforms (i.e. Drupal, Front Page, Dreamweaver, WordPress).
I have read many CSS Tutorials online and I quite a few books that offer the same information. One thing that I don’t like about most tutorials is that the lesson always seems to drag on. I am not very patient and I always want to get into the meat of the lesson. With the CSS Tutorial Lessons I will be covered here on my blog, you can expect to get your feet wet right away. With that said, let’s begin our first CSS Tutorial.
Introduction – What Is CSS:
Working with fonts is very fun. Using CSS you have the ability to change things such as the font family, size, weight, style, and color. Below I will offer you some examples of using CSS to customize your fonts on your blog or website.
First let’s identify some of the basic things you can do to control how your fonts appear.
font-family, font-size, font-weight, font-style, color
The font family gives you the option to choose different fonts such as Arial, Verdana, or Times New Roman. The font size allows you to specify the size of the fonts on the page. The weight allows you to control things such as making your fonts bold. The style allows you to control things such as making your fonts italic. The color, obviously allows you to control the color of your fonts. Of course, working with fonts is only a fraction of the things you can do with CSS. But, starting to learn how to customize your fonts using CSS is an excellent way to get started with becoming a CSS Guru. So that is where we’ll begin with this tutorial.
Section One – Cascading Style Sheets:
Now before we roll through a few examples, I must explain about the three common ways of using CSS. The way I look at it is how well do you want your code to appear in the source code. What I mean by this is this. All three ways of using CSS work fine. One way is very sloppy but quick, then next way is not so sloppy and not so quick, and the last way is beautiful but takes more time.
The three common forms of writing CSS are called: Inline, Internal, and External. The proper name is called Cascading Style Sheets. WordPress commonly use an External Cascading Style Sheet. If you are familiar with the anatomy of a WordPress theme, then you know about a file called style.css. The style.css file contains all of your CSS code which formats and styles your fonts, colors, and many other things. Blogger commonly uses an Internal Cascading Style Sheet. With blogger, all the CSS CODE is found at the very top of the template file within the <head> </head> tag. Inline Cascading Style Sheets are done on the fly within the HTML code itself.
Now that I have explained about Cascading Style Sheets, let’s put together a few examples of how you can customize your fonts and then let’s give you examples of how the CSS code would appear in each of the three types of style sheets. In the next three sections will take the same CSS code and apply it to all three Cascading Style Sheets. Doing this will show you how to apply the code easier to WordPress, Blogger, and on the fly within HTML.
Section Two – Creating an External Cascading Style Sheet:
In this section, section three, and section four, the examples are going to assume that we would like our paragraph text to normal 16 pixel size Georgia fonts in black. This current section will show you how you apply these customizations in an External Cascading Style Sheet.
p {
font-family: Georgia, 'Times New Roman', Times, San-Serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
color: #000;
}
The above example could be inserted into an external stylesheet such as a WordPress theme style.css file. With that said, the above code controls ALL paragraphs in your HTML file. You may want certain paragraphs on your HTML file to look different. An example would be your sidebar. What if you wanted your paragraphs on your sidebar to be white in color and smaller in size and also an italic Arial style, while maintaining your original or MASTER paragraph customizations?
If you take a close look at your WordPress sidebar.php file, you’ll see a line of code that looks like, or similar to this:
<div id="sidebar">
If you cross reference this in your style.css file, you’ll see a line of code that looks like, or similar to this:
#sidebar {
}
The above is a <div> tag. The <div> is a block or box that visually isolates a section of a document on the page from other specified format customizations. So in the case of the <div id=”sidebar”>, we are able to isolate any HTML code within that block and create our own separate customizations that are unique to that block.
So in the above example, we want all paragraphs to use black size 16px Georgia fonts unless specified differently in various <div> blocks, such as the case with the sidebar <div> block, where we want to use white smaller italic Arial fonts. Let’s assume that the sidebar has a darker background color, such as BLACK. A white font color would be ideal. We could then create this customization using this code in our External Cascading Stylesheet:
p {
font-family: Georgia, 'Times New Roman', Times, San-Serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
color: #000;
}
#sidebar p {
font-family: Arial, Verdana, Helvetica, San-Serif;
font-size: 14px;
font-weight: normal;
font-style: italic;
color: #000;
}
Somethings I would like to point out before moving on to the next section. First, you’ll see that there is more than one font family listed, and separated by commas in the CSS code. The reason for this is because not all computers have the same fonts installed. Your computer will read left to right and choose the first font family applicable. In the case of the normal paragraph customization. Your computer will see if Georgia is installed. If not, then it will check to see if Times New Roman is installed and so forth.
Second, you may notice the quotes around Times New Roman. This does not mean that Times New Roman is the primary choice. It is proper code to put quotes around font families with multiple words such as ‘Times New Roman’, ‘Arial Narrow’, or ‘Arial Black’.
The last thing I want to point out is that an Cascading Style Sheet can get really very cluttered and full of customizations. It may be a good idea for you to make reference notes directly on the stylesheet. You can do this using comment out hashes.
/* This is an example of a comment out hash */
Here is an example of the above code using comment out references:
/* BEGIN PARAGRAPH CUSTOMIZATIONS */
p {
font-family: Georgia, 'Times New Roman', Times, San-Serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
color: #000;
}
/*END PARAGRAPH CUSTOMIZATIONS */
/* BEGIN SIDEBAR PARAGRAPH CUSTOMIZATIONS */
#sidebar p {
font-family: Arial, Verdana, Helvetica, San-Serif;
font-size: 14px;
font-weight: normal;
font-style: italic;
color: #000;
}
/* END SIDEBAR PARAGRAPH CUSTOMIZATIONS */
Section Two – Creating an Internal Cascading Style Sheet:
Creating an Internal Cascading Style Sheet is very similar to creating an external one. The main difference is that the CSS Code will appear directly on the HTML file you’re working on, rather than being stored on a separate file. The advantage to this style is speed. Making changes to your CSS customizations can be done much quicker compared to toggling between two files. The disadvantage is that the CSS code adds to the size of the HTML file. Some would consider this to be less than optimal if you’re coding pages to be SEO’ed (Search Engine Optimized). As you know, an External Cascading Style Sheet goes into a separate file, such as with WordPress, the style.css. Within the <head> </head> tag a line of code would need to be added to call on the external file.
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Sara
http://pianonotes.info
Many thanks for the information, now I will not commit such error.
Thanks for the great info.