| 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. 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 selector in CSS using the element name, you are, in fact, redefining the HTML tag. Although the two components, tag and selector, 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. |
The three most common selectors, or ways to select the HTML to which a style applies, are: HTML selector. The HTML element's name is used as a selector to redefine the associated HTML tag. For example, the selector for the <h1> tag is H1. The HTML selector is used in a CSS rule to redefine how the tag displays (see "(re)Defining an HTML Tag" in Chapter 2). Example: h1 { font: bold 12pt times; }Class selector. A class is a "free agent" that can be applied to any HTML tag. You can name the class almost anything (see this book's support Web site, webbedenvironments.com/css_dhtml_ajax, for details on name limitations). Because it can be applied to multiple HTML tags, a class is the most versatile type of selector (see "Defining Classes for Any Tag" in Chapter 2). Example: .myClass { font: bold 12pt times; }ID selector. 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 (see "Defining ID Selectors to Identify an Object" in Chapter 2). Example: #myObject1 { position: absolute; top: '10px; }
The Parts of a CSS Rule What Is the World Wide Web Consortium? The World Wide Web Consortium (w3.org) is an organization that sets many of the standards that browser manufacturers eventually use to create their products. Created in 1994, the W3C's mission is "to lead the Web to its full potential" by developing common protocols that promote its evolution and ensure its interoperability. The W3C comprises more than 400 member organizations around the world. These organizations include vendors of technology products and services, content providers, corporate users, research laboratories, standards bodies, and governments. According to its Web site, the W3C has three goals: Web for Everyone. To make the Web accessible to all people by promoting technologies that take into account the vast differences in culture, education, ability, material resources, and physical limitations of users on all continents. Web on Everything. To allow all devices easy access to the Web. Although most access is still through desktop or laptop computers, an increasing array of devices can access the Web. Knowledge Base. To develop an environment that permits each user to make the best use of the resources available on the Web. Trust and Confidence. To guide the Web's development with careful consideration for the novel legal, commercial, and social issues raised by this technology. For more about the W3C and its mission, check out http://w3.org/Consortium/Points/
|
All CSS rules consist of a selector 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 selector can be an HTML tag selector, 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.
Figure 1.8 illustrates the general syntax of a rule. Figure 1.8. The basic syntax of a CSS rule. 
Where to Put CSS Rules You can set up rules in three places: In an HTML tag within the body of your document, to affect a single tag in the document. This type of rule is often referred to as an inline rule (see "Adding Styles to an HTML Tag: Inline" in Chapter 2). In the head of a document ,to affect a single Web page. This type of rule is called an embedded rule (see "Adding Styles to a Web Page: Embedded" in Chapter 2). In an external document that is then linked or imported into your HTML document(s), to affect an entire Web site. This type of rule is called an external rule (see "Adding Styles to a Web Site: External" in Chapter 2).
The position of a rule in relationship to the document and other CSS rules determines the scope of the rule's effect on the document (see "Determining the Cascade Order" in Chapter 2).  Tips
You don't have to include a semicolon with the last definition in a list, but experience shows that adding this semicolon can prevent headaches later. If you later decide to add a new definition to the rule and forget to put in the required semicolon before the addition, you may cause the rule to fail completelynot just that one definition, but all the definitions in the rule will fail to be used. When writing a rule with an HTML selector, don't confuse the element name of an HTML tag with its attribute names. In the following tag, for example, img is the element name and would be used as the selector, while src is an attribute name: <img src="picture.gif"> Although Netscape Navigator 4 and later and Microsoft Internet Explorer 3 and later support CSS, none of these browsers supports all the CSS capabilities, and the support varies depending on the browser version. See this book's support Web site (webbedenvironments.com/css_dhtml_ajax) to help you determine whether a particular property of CSS is supported by the browser you are designing for.
|
