Home arrow HTML arrow Page 5 - Cascading Style Sheets: The How and the Why
HTML

Cascading Style Sheets: The How and the Why


Cascading Style Sheets have been around for a while now, and act as a complement to plain old HTML files. If you're new to HTML, then take a couple of minutes to learn a thing of two... you'll be surprised what you can do with style sheets!

Author Info:
By: Mitchell Harper
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
November 24, 2001
TABLE OF CONTENTS:
  1. · Cascading Style Sheets: The How and the Why
  2. · Cascading whats?
  3. · An example of an inline style sheet
  4. · An example of an external style sheet
  5. · A more advanced style sheet example
  6. · Conclusion

print this article
SEARCH DEVARTICLES

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:

An advanced style sheet example

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.
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials