Rethinking the Datacenter Sponsored by HP Today's datacenters need to increase utilization, get control over power and cooling costs, and align with business objectives. Download this eBook to learn about the challenges facing the data center in a world where digital information is growing at a torrid pace and costs are being held in check. Learn more. »     Putting the Green into IT Sponsored by HP Electricity use in data centers is skyrocketing, sending energy bills through the roof, creating environmental concerns and generating negative publicity. "Going Green" means looking to technologies like virtualization, energy-efficient chips and racks, and implementing policies that extend beyond the data center. Learn more. »     Managing the Modern Network Sponsored by HP In a global economy where information crosses the globe in an instant, and where Web-based applications power business, it's more important than ever to ensure your network is safe from threats and optimized to deliver the data your business needs. »     Evaluating Software as a Service for Your Business Sponsored by Webroot Is Software as a Service just hype, or is something really going on here? See if your company can benefit as SaaS tries to change the face of the enterprise. »     Is Your Disaster Recovery Plan Good Enough? Sponsored by HP Preparing for a disaster is more often than not part of the storage planning process, and it is one of the most difficult tasks, since it includes local hardware and software, networking equipment, and a test plan. Learn how to get disaster recovery right. »

Top 10 Articles Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions JavaScript Tutorial for Programmers Design JavaScript Tutorial for Programmers - Objects JavaScript Tutorial for Programmers - JavaScript Grammar JavaScript Tutorial for Programmers - Versions of JavaScript Cascading Style Sheets JavaScript Tutorial for Programmers - Embedding JavaScript JavaScript Tutorial for Programmers - Functions Authoring JavaScript

Domain Name Lookup Search to find the availability of a domain name. Just enter the complete domain name with extension (.com, .net, .edu)

	Putting Style Sheets in Perspective Summary Part One

This should be enough to get you started with Style Sheets.

Remember to include comment tags around your rules to hide them from older browsers.

For your first style sheet, lets keep it simple. We'll design a style sheet using HTML elements as selectors, inserting it into the HEAD element of a single document. Linking to an external style sheet will come later.

Start with the Style element, adding comment tags right away so you don't forget them.

	<STYLE TYPE="text/css">
	<!--
	
	 -->
	</STYLE>

Now lets decide 'how' we want our document to look. Remember, use Style Sheets to enhance your web page, but don't design so that the page depends on them.

We can add a little color by specifying the color of different elements, a burgundy to header elements, brown for regular text, blue to italic and red to bold. A body background color of light yellow to set the whole thing off. None of these colors will in any way affect how the page is displayed in non-capable browsers, but will enhance the over all affect in browsers capable of viewing them. We'll add a touch of class with an Arial font throughout. Notice that the font-family element is specified in both the header element Selectors and the P Selector. The totally correct way would have been to put the font-family into the BODY declaration, but not all browsers will display it properly whereas if it is placed in the more specific Selectors, it will display. There was no need to put the font-family into the B and I Selectors as they inherit the property from the P Selector.

If you check the Document Source, you'll notice that even though I've specified H1 and H3 headers should be centered in the style sheet, I've also put them between the <CENTER> tags within the document. This ensures that your headers will be centered even in browsers that do not support Style Sheets. There will come a time that this method will not validate, but during the transitional phase it will. Once CSS is more widely supported and more firmly established, you will have to decide which is more important, writing valid HTML, or displaying centered text on non-CSS capable browsers.

<STYLE TYPE="text/css">
<!--
BODY   {background	: #FFFFCC;
	color		: #663300
	}		

H1, H3 {background	: transparent;
	color		: #660000;			
	text-align	: center;
	font-family	: Arial, Helvetica, sans-serif;
	}

P	{font-family	: Arial, Helvetica, sans-serif;
	}

B	{color		: red;
	background	: transparent;
	}

I	{color		: blue;
	background	: transparent;
	}			
 -->
</STYLE>

Notice in the above style sheet, that the B and I Selectors have a background property in their Declaration. The background property sets the color of the background behind the text. While it is not essential that the background property be used, it is recommended when the color property has been specified.

The same is true of the various font alternatives in the P Declaration. It is not essential to have alternate fonts, but it is recommended. Also recommended is the generic font as the last alternative in the Declaration.

Inheritance
Putting Style Sheets in Perspective: Table of Contents