Home arrow Style-Sheets arrow Page 5 - Understanding Style Sheets (Part 1)

Playing With Type - Style Sheets

The first in a two-part tutorial on Cascading Style Sheets, thisarticle explains how to create and use style rules across your Web site,and then demosntrates a few basic CSS properties. Also included:inheritance, classes, contextual selectors and some lightbulb jokes.

TABLE OF CONTENTS:
  1. Understanding Style Sheets (Part 1)
  2. Into The Light
  3. More Pseudo-Gibberish
  4. The Colour Of My Eyes
  5. Playing With Type
  6. Adding A Little Style
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 33
September 27, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
How about changing those fonts around a little? Well, CSS comes with a whole bunch of properties whose sole raison d'etre is to give you more control over typeface. The first of these is the "font-family" property, which allows you to specify the font to be used when rendering a particular block of text.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: "Verdana"}
</STYLE>
</HEAD>

<BODY>

<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.

</BODY>
</HTML>

You probably already know that if the font specified isn't available on the client computer, the browser will use the default font (usually Times New Roman). And here's where CSS scores over the <FONT> tag - it allows you to specify a list of alternative fonts in the style definition.

P {font-family: "Verdana", "Arial", "Arial Black"} /* first try Verdana,
then Arial, then Arial Black */

You have the option of using a generic class of typeface - pick from "serif", "sans-serif", "monospace", "cursive" and "fantasy". Try it and see for yourself.

P {font-family: serif} /* font of type "serif" */

You also have a number of options when deciding font size, since the CSS "font-size" property allows you to specify the size of your typeface in a number of different ways.First, there are absolute sizes, which are usually one of the following seven values: "xx-small", "x-small", "small", "medium", "large", "x-large" and "xx-large". Try this example out to see how this works:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: xx-small}
.answer {font-size: x-large}
</STYLE>

</HEAD>

<BODY>

<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.

</BODY>
</HTML>

Next, there are relative sizes, which allow you to specify a font "larger" or "smaller" than the size of the surrounding text.

.question {font-size: larger} /* font size larger than the parent element
*/

.question {font-size: smaller} /* font size smaller than the parent element
*/

You can also specify an actual size in terms of points or percentages, like this:

.question {font-size: 16pt} /* font size is 16 points */

.question {font-size: 300%} /* font size is three times larger than usual*/



 
 
>>> More Style-Sheets Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: