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

Adding A Little Style - 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

You can also add emphasis to your text with the "font-style" property,
which takes the values "normal", "oblique" and "italic". Check it out!

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: serif; font-style: italic} /* italic font */
</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>

Speaking of emphasis, the "font-weight" property allows you to control the level of emphasis either via keywords like "normal", "bold", "bolder" and "lighter", or via an absolute scale going from 100 to 900. Take a look:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-weight: bolder}
.answer {font-weight: 900}
</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>

And finally, the "font-variant" property allows you to specify the capitalization of the text - your options are either "small-caps" or "normal". Note that Netscape doesn't seem to support this property yet.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-variant: small-caps} /* replace all lower-case characters with
upper-case characters */
.</STYLE>

</HEAD>

<BODY>

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

</BODY>
</HTML>

In the second part of this article, you'll learn how to control margins, padding, borders, background images and a whole lot more. Make sure you come back for that one!



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