Cascading Style Sheets (CSS); Learning More
By Will Bontrager
2003-10-05
Reader Rating: 
Defining And Using Custom Styles
Regardless of what type of style sheet you use, you can define your own custom styles.
When you create a custom style, the name you give the style must not match any HTML tags. When you define the style, the name must begin with a period, but when you use the style then don't type the period.
Here is an example of a basic style for common text tags and a custom style:
<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}
.reallybad {
font-size: 24px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: #CCCCCC;
background: #333333;
}
-->
</STYLE>
Custom styles are used within HTML tags to change the style of the entire tag -- DIV, SPAN, P, TD, etc. A custom style, once defined, is called a "class." Thus, to use a certain style, you use the "class" attribute and the class name as the value. When you specify a style in an HTML tag, it overrides whatever style, if any, that was previously defined for that tag. Here are a couple examples:
<p class="reallybad">Hello everyone!</p>
<p>Hello <span class="reallybad">everyone!</span></p>
In the first example line, the entire paragraph is printed with style "reallybad". In the second line, only the word "everyone!" is printed with that style ("Hello" being printed with whatever style is defined for the P tag).
You can define and use as many different custom styles as you please.
Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.
Copyright 2004 Bontrager Connection, LLC
If you found this article interesting, you may want to read these as well:
» Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
» Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)
» Cascading Style Sheets (CSS); Getting Started
|
