Cascading Style Sheets: The How and the Why - A more advanced style sheet example
(Page 5 of 6 )
Now that we've seen a basic style sheet enabled HTML page, I will demonstrate some of the more “nifty” uses for style sheets. Using your favorite text editor, create a new file called advancedstyle.html and enter the following code into it:
<html>
<head>
<title> A More Advanced Style Sheet Example </title>
<style>
h1
{
color: #636594;
font-family: verdana;
}
.CoolText
{
background: lightyellow;
border: inset;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
color: #a00808;
font-family: Verdana;
text-decoration: underline;
size: 18pt;
cursor: wait;
letter-spacing: 3pt;
}
</style>
</head>
<body>
<h1>Hello There!</h1>
<span class="CoolText">
This is some wild colored, bordered, cool text!
</span>
</body>
</html>Load the page into your browser and you should get something like this:
In Internet Explorer, when you move your mouse over the bordered text area, your cursor should change to an hourglass. Unfortunately, Netscape doesn't adhere to IE's style sheet implementation, and IE doesn't fully adhere to the specifications set in place by the WC3 (World Wide Web Consortium).
Our HTML file contains an inline style sheet. The h1 part of the class changes the font family and color of any H1 tags on the page. The .CoolText line may look confusing. This is a style sheet class and can contain code just like the <h1>'s style declaration. Style sheet classes are prefixed with a dot and can be used like this:
<span class="CoolText"> Some text </span>Or, like this:
<p class="CoolText"> Some paragraph text </span>Or as the class attribute of any tag that can format its display, such as tables, lists, input fields, div tags, etc. You can add a style sheet class to our example page. The general format of a style sheet class is:
.[Class Name]
{
[Attribute]: [Value];
[Attribute]: [Value];
[Attribute]: [Value];
}Where [Class Name] is the name of the class, starting with an alphabetic character (a-z) and containing only alphanumeric characters such as MyText, BlueBold, BigGoldWriting99, etc. Each [Attribute] tag should contain the name of the attribute being changed, such as font-family, color, border, etc. Lastly, the value tag should contain the value that will be assigned to the attribute on the left of the colon.
Next: Conclusion >>
More HTML Articles
More By Mitchell Harper
