karenak Crown



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




Let's talk about fonts (3)

This part of the tutorial will show you how to use a special font in the occasional blog post. As ever, there is a simple method and a more advanced method.



The simple method


This is the code:

font: font size 'font name'; color: color name;


font size can be set in px, pt or %

The correct font name is listed on the Google Web Font page as shown in part 1 of this tutorial.

Color name can be any color name or hex code.


As this code is CSS, we must make it acceptable to HTML by wrapping it into the 'style' attribute.

style="font: font size 'font name'; color: color name;"


Now we can attach the style attribute to an HTML tag like e.g.

<span style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</span>

or

<p style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</p>

and several others, though these two are the most useful.


These examples result in: Here comes your text




The advanced method

Let's say you always use a special font for poems. In this case, you define a 'class' in your style sheet and use it whenever you need it.



Step 1 - define the class

In your style sheet add the following line:

p.poem { font: 28pt 'Qwigley'; color: navy; }


p stands for the HTML <p> tag.

poem is the name of the class. It can be any name you like but make it short so it won't be a bother to use it in a blog post. You can define as many classes as you like. Remember the exact spelling. Using this in HTML is case-sensitive. So if 'poem' is in lower case here, you must type it in lower case in your blog post as well.

Classes can contain all kinds of formatting like background images, borders, padding, margin and so on.

Font size, font name and color name of course depend on which fonts you loaded from the Google Web Font page.


Now you can use that class in a blog post.



Step 2 - use the class

In your blog post type:

<p class="poem">Here comes your text</p>

which results in Here comes your text




And that's it :-)





>>>> Part Eight