- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- CSS
- Convert Content to CSS
- Step 4
Converting Existing Content to CSS, Step 4
Basic Font Designations with CSS
by Shirley E. Kaiser, M.A., SKDesigns
Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.
On this page:
Now let's add some very basic font information for your paragraphs and other basic content.
Font Sizes
If your main content has been previously designated with font tags as:
<p><font size="2">Text here.</font></p>
or
<p><font size="-1">Text here.</font></p>
you can obtain a similar font size with CSS. To designate the font size within a paragraph, for example, you'd designate the style rule for the p (paragraph) element within your style block as highlighted below:
<style type="text/css">
p {
font-size:small;
}
</style>
Providing for a relative unit rather than a fixed unit typically allows the greatest flexibility. There are cross-browser, cross-platform considerations and accessibility considerations that are beyond the scope of this tutorial, though. You can learn more about font sizes via the section, Cross-Browser, Cross-Platform CSS Font Issues and Solutions here at WebsiteTips.com.
Font Families
The equivalent to the HTML font face element for CSS is the font-family property. Therefore, instead of using HTML to designate the font face within a paragraph:
<p><font face="verdana,geneva,helvetica,arial">Your text goes here.</font></p>
you can use the CSS font-family property within your style block, as highlighted below:
<style type="text/css">
p {
font-family:verdana,geneva,helvetica,arial,sans-serif;
}
</style>
Your Web page will also be so much cleaner:
<p>Your text goes here.</p>
Especially when you multiply that for an entire Web page, your Web page file size will be dramatically reduced! In addition, it's much easier to update your text content when there's so much less HTML markup cluttering up your content behind the scenes. In addition, as shown in Step 6: External Style Sheets, you can actually manage an entire site's look and feel via one external style sheet. For now, let's continue with learning these basics first.
Combining Style Rules
It is also possible to combine style rules for an element. The following combines the font-family and font-size properties for the paragraph element, as highlighted below:
<style type="text/css">
p {
font-family:verdana,geneva,helvetica,arial,sans-serif;
font-size:small;
}
</style>
You can combine this even further by combining the font-family and font-size properties into one declaration:
<style type="text/css">
p { font:small verdana,geneva,helvetica,arial,sans-serif;
}
</style>
Why bother? You'll save file size and bandwidth.
You can also designate background color, font color, line height, margins, padding, and more.
Combining Style Rules for Elements
In addition to combining rules for an element, it's also possible to combine rules for elements with the same style rules.
For the sample HTML document, since the paragraphs and list items have the same font size and font family, let's combine the style rules for them, as highlighted below:
<style type="text/css">
p,ul,li {
font-size:small;
font-family:verdana,geneva,helvetica,arial,sans-serif;
}
</style>
As noted previously, you can also combine the font-family and font-size properties, too:
<style type="text/css">
p,ul,li { font:small verdana,geneva,helvetica,arial,sans-serif; }
</style>
It's also a good idea to include some basic font rules for the body element, especially to cover cross-browser inconsistencies (Netscape 4.x primarily). In the sample below, note that the font family is added to the body element:
<style type="text/css">
body {
background:#fffff0;
color:#336666;font-family:verdana,geneva,helvetica,arial,sans-serif;}
</style>
Here's what your markup should look like now. The new style rules are shown in bold red.
Markup with basic font-related style rules added. (A separate window will open.)
What Does This Look Like Now?
Your Web page should look something like this:
The results. (A separate window will open.)
Adding Heading Colors
Using the color palette for the page that we introduced in Step 3: Basic Colors, we'll add some heading element color rules to the style block. We'll also add the heading element tags (h1, h2, h3, h4) to your Web page body content.
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
 |  |  |  |  |
#fffff0 | #336666 | #669966 | #999966 | #669999 |
Step 1: Adding the Heading Element Rules to the Style Sheet Block
The top 4 levels of heading element rules have been included for the sample. Below the sample is the code for you to copy/paste into your style block.
h1 {
color:#336666;
font-size:2.1em;
background:transparent;
}
h2 {
color:#669966;
font-size:1.8em;
background:transparent;
}
h3{
color:#999966;
font-size:1.5em;
background:transparent;
}
h4{
color:#669999;
font-size:1.2em;
background:transparent;
}
Notice the designation of 'transparent' for the background color? Here's an explanation of 'transparent.' (A separate window will open.)
Here's what your markup should look like now. The new style tags are shown in bold red.
Markup with basic heading element style rules added. (A separate window will open.)
Step 2: Adding the Markup to the Body Content:
Now let's add the heading element tags within the body content area. Here's an example. I just did a copy/paste of some of the words for the heading element tags, and I added paragraph tags too.
<body> Lorem Ipsum
<h1></h1><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<h2>Stet clita</h2><p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Lorem ipsum dolor</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h4>At vero eos</h4><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></body>
Your markup should now look like this:
Markup with content markup added showing heading element tags and p (paragraph) element tags. (A separate window will open.)
What Does This Look Like Now?
Your Web page should look something like this:
The results. (A separate window will open.)
Important note:
There is a lot to consider with cross-browser, cross-platform issues and accessibility issues; however, for now we're keeping this simple to learn the basics. I wholeheartedly recommend gaining an understanding of those issues and working with them, too.
