Tutorial: Page (1) of 1 - 06/13/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

CSS Font Handling

Take control of your website fonts using cascading style sheets By David James Rockingham III

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.

Lets Get Started
First, lets choose to use the font Arial which is one thats available for Mac and PC users. When youre creating web pages without any type of text formatting, your pages would look similar to the following:

Your unformatted text looks a bit plain right now but with a little CSS you can take control of your website's appearance.

Now heres what the same text would look like using cascading style sheets:

Change the appearance of your text using cascading style sheets
WOW! That was quick, right? Change the appearance of your text using cascading style sheets. Take a look at the CSS code below to get a better idea how the text changes were made.

<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}

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 youre 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 theres going to be times during your web design career that those neat WYSIWYG programs wont be available. You can then dazzle your boss or clients with your hand-coding skills.

Finishing Touch
Now that youre more familiar with the use of cascading style sheets to manage your websites 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.

Page: 1

David James Rockingham III is a former radio disc jockey and network administrator. An avid gamer and technology guru who enjoys rock music, sunsets, Star Wars video games, Visual Pinball, classic hot rods and superhero movies (except The Hulk). You can find David James answering questions on DMN Forums (http://www.dmnforums.com). His articles appear on Consumer Electronics Net (http://www.consumerelectronicsnet.com) and Digital Media Net (http://www.digitalmedianet.com).
Related Keywords:css font handling, cascading style sheets, css, css font, font control,


Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved