Leveraging CSS Styles
Page content

Introduction

The Cascading Style Sheet 2 standard (CSS2) is a great way of pre-defining styles for rendering HTML elements in the client’s browser. Going one step further, CSS2 selectors allow the style definitions to be extended to descendants and child nodes.This minimizes repetitious class and style attribute assignments. The example below uses a div element wrapped around a ul and subsequent li elements.

The ul element is a descendant of the div element and the li element is a descendant of the ul element. The sample code below shows how to set the style for the li elements using CSS selector syntax. This eliminates the need to set the class or style attributes for each li element in the list.

CSS Selector Syntax

To see how this works, paste the code views into your editor.

Code view: paste into the head section

Code view paste this into the document body section

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 1
  • List item 2
  • List item 3
  • List item 4

Conclusion

As you can see, CSS selectors are a powerful way to apply formatting given various constructs. It saves a lot of time and trouble when developing web sites. CSS2 is widely implemented in the recent browser versions as well as legacy versions. Some references on CSS2 and selector syntax is provided below

W3 Schools CSS2 Reference

W3 Org Selector Syntax

This post is part of the series: Web Design using DHTML and the DOM

Creating web sites with DHTML based on the DOM can increase server performance, lower bandiwdth utilization and solve most cross-browser compatibility issues.

  1. Getting Elements Using the HTML DOM and JavaScript
  2. Applying Events to DHTML Web Pages Using Javascript and the DOM
  3. Validating Input at the Client: Check for blank or required fields
  4. Validating Input at the Client: trim the field
  5. Validating Input at the Client: check numeric value fields
  6. Leveraging CSS Styles
  7. DOM getElementsByTagName Method for Bulk Element Formating
  8. Unraveling the JavaScript Switch Statement