spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / web / dev / clockwise OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

The Clockwise Box (Principles)

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

  1. Keep the HTML simple. Aim at the lowest, dumbest, homeliest, least likely to succeed of all clients. Build on a solid base.
  2. Wrap everything you can in a container, and name the containers.
  3. Put client specific code in linked style sheets and source scripts.
  4. Write valid code. Write valid code. Write valid code.

About containers - there are three types of elements in HTML, from a formatting point of view. These are: block level elements, those with tags like <p> and <h1>; inline elements like <img>; and phrase elements, like <strong> or <b>. Inline and phrase element tags are applied to a piece of content as it lies, and do not by default display on a separate line in a browser. Block level elements are just that - separate blocks of content that are always separated by new lines from the content before and after their start and end tags.

A block can contain any number of inline elements, but generally new block level content cannot be included in a block - a <p> cannot contain another <p>. You can contain any number of blocks in a <div> element, however, including other divs. If you want to contain inline content you can wrap it in a <span> element. You can put each word or character in a sentence in its own <span>, and style or script each span, if you care to.

Put a block level element in a <div> container and inline elements between <span> tags. If you are applying a single formatting style or effect to several paragraphs, you can enclose them all in a single <div> and define its style however you like. If you establish a style for a Website from a common style sheet, you can define specific "sub styles" for these containers. Blocks of <P> tags that have a standard font-weight and margin can inherit the <div> style of the section you wrap them in.

In my newsletter reader example, I have a "pageClass" for most of the pages and a "coverClass" for the first page. Both classes inherit the same styles for the <body> and <p> elements but have individual backgrounds. There is a rule in the style sheet that overrides the generic rule for links on the cover page:

.coverClass a {font-size:1.2 em}

This makes the links on the cover page larger than the default size.

Something to keep in mind when you are writing style rules - use the default values whenever you can. Different users get used to the way their particular machines present things, like the button color or the default fonts. Don't change anything unless you have a good reason. Easier for you, friendlier for your users.

 

Dueling Browsers  Next Page

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word


spacer

Comments are welcome

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

 




URL: http://webreference.com/dev/clockwise/clockwise1.html