Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
 Discussion Forums
 HTML, XML, JavaScript...
 Software Reviews
 Editors,Others...
 Top100
 JavaScript Tutorials, ...
 Tutorials
 ASP, CSS, Databases...
 Discussion List
 FAQ, Roundup, Configure ...
 Authoring
 HTML, JavaScript, CSS...
 Design
 Layout, Navigation,...
 Graphics
 Tools, Colors, Images...
 Software
 Browsers, Editors, XML...
 Internet
 Domains, E-Commerce, ...
 WDVL Resources
  Intermdiate, Tutorials,...
 WDVL
 Discussion Lists, Top 100,...
 Technology Jobs


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us
Corporate Gifts
Compare Prices
Web Hosting Directory
Promote Your Website
Memory
Auto Insurance Quote
Phone Cards
GPS
Online Shopping
Get Business Software
Server Racks
Best Price
Imprinted Promotions
Promotional Products

Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers



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
  1. Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
  2. JavaScript Tutorial for Programmers
  3. Design
  4. JavaScript Tutorial for Programmers - Objects
  5. JavaScript Tutorial for Programmers - JavaScript Grammar
  6. JavaScript Tutorial for Programmers - Versions of JavaScript
  7. Cascading Style Sheets
  8. JavaScript Tutorial for Programmers - Embedding JavaScript
  9. JavaScript Tutorial for Programmers - Functions
  10. 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)

July 26, 1998

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

a SPAN element should be?
The paragraph is broken in an odd spot.

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.1

Example header

A paragraph without the P element loses its style. In some browsers it will lose all style, not just the style specified in the P rule but also that specified in the BODY rule.

Example Header

A paragraph preceeded by the P element retains its style.

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>

View this page with style.

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

Additional Resources:

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


Up to => Home / Authoring / Style / Sheets / Fonts




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers