The best thing about Cascading Style Sheets is that they are amazingly simple to set up. They don’t require plug-ins or fancy softwarejust text files with rules. A CSS rule specifies the HTML to which a style definition applies, and then defines the style, or how the selected HTML should behave in the browser window.

You can set up rules to tell a specific HTML tag how to display its content, or you can create generic rules and then apply them to tags at your discretion.

The three most common selectors, or ways to select the HTML to which a style applies, are:

  • HTML . The HTML element’s name is used as a to redefine the associated HTML tag. For example, the for the <H1> tag is H1. The HTML is used in a CSS rule to redefine how the tag displays.
  • Class . A class is a “free agent” that can be applied to any HTML tag. You can name the class almost anything. Because it can be applied to multiple HTML tags, a class is the most versatile type of .
  • ID . Much like classes, IDs can be applied to any HTML tag, but only once on a given page to a particular HTML tag, to create an object for use with a JavaScript function.

The Parts of a CSS Rule

All CSS rules consist of a and a declaration block. The declaration block, which is surrounded by curly braces, is made up of declarations, which are pairs of properties and values separated by a semicolon (;):

  • Selectors start each rule, appearing before the left curly brace. The can be an HTML tag , a class, an ID, or a combination of these.
  • Properties identify the style that is being defined. There are several dozen properties, each responsible for an aspect of the page content’s behavior and appearance.
  • Values are assigned to a property to define its nature. A value can be a keyword such as “yes” or “no,” a number, or a percentage. The type of value used depends solely on the property to which it is assigned.

Tags or Selectors: What’s the Big Difference?

An HTML element name is the text part of an HTML tagthe part that tells the browser what type of tag it is. So when you define an HTML in CSS using the element name, you are, in fact, redefining the HTML tag. Although the two components, tag and , seem to be identical, they aren’t: If you used the full HTML tagbrackets and allin a CSS rule, the tag would not work. So it’s important to keep these two ideas separate.

Uppercase or Lowercase Tags?

HTML tags are not case-sensitive. That is, the browser does not care whether the element and attribute names (the text) in the tags are uppercase or lowercase. Most people prefer to use uppercase for tags, because this makes them stand out from the surrounding content.

I counted myself in that camp until the release of the XHTML standard. One important characteristic of XHTML is that it is case-sensitive, and all element and attribute names must be in lowercase. Therefore, to prepare for the next evolutionary step of HTML, I have started using lowercase selectors in all my HTML tags.

For more about the CSS Selectors, check out http://www.w3.org/TR/REC-CSS2/selector.html

Quotation from “Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition Book”

Tags: ,