Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

Break the <FONT ...> Habit: Other Elements

In our first example we applied font styles to an <H2 ...> element. Just about any HTML element can have style rules applied to it in the same way. Indeed, the purpose of styles is to allow you to fancy up your web page while still using plain simple HTML.

For example, suppose that you want to emphasize certain words in your page. The logical tag for this purpose is <EM>. However, <EM> is usually rendered in a rather plain italics. You can jazz up how <EM> is rendered with a style rule (in a STYLE tag or in a style sheet file) like this:

EM
   {
   color:red;
   font-weight:900;
   font-style:normal;
   }

This rule says that the color of fonts in <EM> should be red, they should have a weight of 900, and the style should be normal (instead of italic). So when you use <EM> in your page:

That is a <EM>groovy</EM> idea.

you get something that's really emphasized:

That is a groovy idea.

Font styles can also be applied to block level elements such as <P ...>, <DIV ...> and <BLOCKQUOTE ...>. For example, suppose you wanted your quoted material to have a special font. You could create a style rule that sets the quotes off from the rest of the page like this:

BLOCKQUOTE
   {
   font-style:italic;
   font-family:sans-serif;
   font-size:90%;
   }

This rule states that characters in a <BLOCKQUOTE ...> should be italic, they should be sans-serif, and they should be smaller than surrounding text. So when we use a <BLOCKQUOTE ...> tag:

<BLOCKQUOTE>
quoted material
</BLOCKQUOTE>

it is rendered like this:

(7) Charles M. Schulz's television special, `A Charlie Brown Christmas', has run for 34 consecutive years. In all, more than 60 animated specials have been created based on `Peanuts' characters. Four feature films, 1,400 books, and a hit Broadway musical about the `Peanuts' characters have also been produced.

(8) Charles M. Schulz is a leader in the field of comic illustration and in his community. He has paved the way for other artists in this field over the last 50 years and continues to be praised for his outstanding achievements.

 
 
  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire