 |
|
CSS Font Handling Tutorial |
|
Written by Don Lee
|
|
Monday, 05 February 2007 |
 Building websites can actually be a lot of fun. The idea of building
the next dot-com success or just a place to put your blog can be an
exciting experience. A website offers an individual the freedom to
express oneself. Of course you want your website to look its best, but
you want to do it with the least amount of effort possible, right?
That's when you know it's time to learn cascading style sheets.
Without CSS, most websites only utilized the standard fonts available for both platforms such as Window and the Mac OS such as Arial, Times New Roman and Verdana. The only appearance changes you can do were bold, italic and underlined text. With CSS, you now have the opportunity to display text in various new ways.
You can capitalize first letters at the beginning of paragraphs, make text appear in all caps or lowercase, change colors and even position portions of your text to different parts of the screen. CSS offers all of these options but you have to learn it before you can design it.
Let’s Get Started
First, let’s choose to use the font Arial which is one that’s available for Mac and PC users. When you’re creating web pages without any type of text formatting, your pages would look similar to the following:
Now here’s what the same text would look like using cascading style sheets:
<style type="text/css">
<!--
.font1 { font-family: "Times New Roman", Times, serif; font-size: 14pt; font-style: italic; font-variant: small-caps; text-transform: lowercase; color: #6666CC }
.font2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; font-style: italic; font-weight: bold; font-variant: normal; text-transform: uppercase; color: #FFCC00 }
.font3 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; text-transform: uppercase; color: #990033 }
.font4 { font-family: Georgia, "Times New Roman", Times, serif; background-color: #FFFFCC; letter-spacing: 2pt; word-spacing: 4pt}
-->
</style>
Going from left to right (font1, font2, font3 and font4), each CSS class defined controls a portion of the sentence. As you change an element in the CSS, you change every reference of that CSS code in your webpage. The difference between using CSS and the standard HTML font tag is that every font tag reference would need to be either manually updated or done through a search and replace of the document.
<span class="font1">This is my</span> <span class="font2">CSS font</span> <span class="font3">tutorial</span>
<span class="font4">with the CSS </span>
Looking at the source code above, you can see how the CSS was implemented into the body of the webpage. As you can see, each SPAN tag makes a reference back to the CSS code in the names of "font1", "font2", "font3" and "font4." Because the CSS has already been defined earlier, the SPAN CLASS tag just makes the call to the style sheet which then wraps the text with the defined design elements.
If you've ever used a WYSIWYG web design program, then you're probably familiar with the hundreds of nested font tags that can be left behind in the source code if you only modified your webpage through the design interface instead of the source code. HTML font tags can create quite a mess and it's very tedious to manage the hundreds (or maybe even thousands) of references throughout your website.
Cascading style sheets makes this tedious task a thing of the past. By creating a well defined style sheet and attaching it to your webpages, you can change the appearance of your website just through modifying the style sheet. Imagine, no more manual editing! Just make a few changes in the style sheet and your website will take on a new appearance in a seamless transition.
Now if you’re using a WYSIWYG web design program, then implementing cascading style sheets around your text is even easier. You should still learn to code the CSS tags because there’s going to be times during your web design career that those neat WYSIWYG programs won’t be available. You can then dazzle your boss or clients with your hand-coding skills.
Finishing Touch
Now that you’re more familiar with the use of cascading style sheets to manage your website’s font appearance, you can make site wide changes without having to manually update every single web page. You should remember that while using CSS is a great compliment to your website's appearance, you should be aware that not web browsers may display the content the way you intended. As you design, view your work on the most popular browsers to ensure that most of your readers experience your website the way you intended. Web design just got a little bit easier.
|
|
|
|
|
|
|
