Quality Management ROI Calculator - Focus on Test Automation The Rational Quality Management ROI calculator is intended to give you an idea of what return you can garner from implementing our functional testing solutions. Our quality management solutions offer tools to develop a continuous process, powered by automation to govern software delivery. » Gartner MarketScope: Application Quality Management Solutions, 1Q 08 This Gartner MarketScope provides guidance for enterprises seeking to purchase tools to manage risk and software quality. We focus on tools fit for large-scale enterprise use and that are ready out of the box to manage quality requirements and functional testing. » Whitepaper: Tips for Writing Good Use Cases Writing a good use case isnt easy, but, fortunately, our experience can be your guide. The concepts and principles assembled here represent the works of many people at IBM, and they form a foundation of proven best practices. » Whitepaper: The Role of Integrated Requirements Management in Software Delivery Learn about the critical role integrated requirements management can play in helping ensure your business goals and IT projects are continuously aligned-whether you are sourcing, integrat-ing, building or maintaining your software. It also looks at ways that integration and automation can help ensure managing projects and the required changes can be executed using manageable processes that satisfy stakeholders and development teams. »

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 It All Together

Okay, let's see if we can put this all together and come up with a decent style sheet.

Two new elements
DIV and SPAN

First, I'd like to introduce two new elements that you will find extremely useful for specifiying styles not defined elsewhere in your style sheet.

The DIV and SPAN elements, combined with style sheets will change the display in a style sheet enabled browser, but have no effect whatsoever in non-capable browsers. It will, however, cause an odd break in a paragraph if used incorrectly.

DIV is a block element; placing it within the P element will result in the odd formatting I mentioned. See what happens when you put the DIV element where

Use SPAN for inline content. Not only will it eliminate odd breaks in your text, but will retain the style specified for the P element.

Inappropriate Use of the P Element

One of the main factors in styles not displaying properly is the inappropriate use of the P  element. If you have specified an attribute that suddenly disappears from your page, check your P elements first to ensure that you have used them properly.

• P is a container element, it should not be used as a separator.
• Paragraph text should not begin immediately after the header element, the P element should be place in between the header and the text.
• P cannot contain block-level elements (including P itself). This also means P cannot contain DIV, which is a block element. On the other hand, style may be retained by including the P element within the DIV element.¹

The Style Sheet

Alright, I've gone on long enough. Here's the style sheet I used to create this page.

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

BODY  		{ color		:	Maroon;
		background	:	Wheat;
		}

H1, H2, H3	{ font-family	:	Arial, Helvetica, sans-serif;
		color		:	black;
		background	:	LightSlateGray;
		text-align	:	center;
		}	
	


P		{ font-family	:	Arial, Helvetica, sans-serif;
		font-size	:	small;
		color		:	Maroon;
		}	

B		{ text-transform:	uppercase;
		font-weight	:	bold;
		background	: 	WhiteSmoke;
		}


EM		{ font-style	:	none;
		font-weight	:	bold;
		color		:	red;
		background	:	WhiteSmoke
		}

UL		{ font-family	:	cursive;
		font-size	:	small;
		}

DL		{ font-family	: 	serif;
		font-size	:	small;
		}

DT		{ font-family	: 	serif;
		font-size	:	small;
		}

.attn		{color		: 	red;
		background	:	WhiteSmoke;
		font-weight	:	bold;
		font-size	:	larger;
		}
		

.notes		{background	:	transparent;
		font-family	:	Arial, Verdana, sans-serif;
		font-size	:	xx-small;
		text-decoration	:	none;
		}

PRE		{font-family	:	monospace;
		color		:	black;
		background	: 	transparent;
		}

A:link 	{ 	color	: MediumBlue }
A:visited { 	color	: Purple }
A:hover { 	color	: red }
A:active { 	color	: red }


-->
</STYLE>

Notes:
1. W3C: 7.5.4 Grouping elements: the DIV and SPAN elements

Additional Resources:

• Style Sheets & Guides
• W3C: 15.2 Font specification

Putting Style Sheets in Perspective: text-transform
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective