Understanding CSS

---

Most modern browsers (version 4 and up) support the use of Cascading Style Sheets to control the appearance of content marked up with HTML or XML tags. The exception to this is Netscape 4x, whose support for inheritance and certain properties is quirky at best and downright buggy in practice. The way styles render in different browsers depends entirely on how that browser supports the CSS specification. Before you begin to use Cascading Style Sheets, you need an understanding about what CSS is and how it works.

Cascading Style Sheets is a specification that uses its own syntax to write rules that control the appearance of content in a Web page. These rules are called styles, which together are collectively known as a style sheet. Style rules are governed by The Cascade, which in turn uses the principles of Inheritance, Specificity, and Importance to determine which rule(s) apply where conflicting rules exist.

Selectors and declarations

Style rules are made up of two parts: selectors and declarations. A selector is most often an HTML tag. A declaration is a set of properties and values written in a specific syntax. Dreamweaver knows how to write declarations, so you don't have to learn the syntax at all, but you do need to understand the principles to help you decide how to use the CSS tools and features in the program.

Selectors

There are many kinds of selectors: The simplest selector is generally an HTML tag, but it might also be a custom tag defined in Extensible Markup Language (XML). For simple selectors, the tag itself is redefined to incorporate specific properties and values that will be used every time that tag appears in the page. If you redefine the <p> tag to use Verdana text, size 14-point in green, all paragraph text will be green, 14-point Verdana.

Classes and IDs

Class or ID selectors are tags that use the attribute of Class or ID. A Class rule is independent of any selector and can be applied to different selectors in a page. The way the selector appears when a class is applied depends upon the selector and the rule's properties. The name given to a class always starts with a period, and you may not use spaces or odd characters in the name.

IDs are like classes, except they are applied only once in the page. ID rules are always started with a hash mark (#) symbol. Both classes and IDs are applied, meaning that the page author picks selectors and sets them to use a class or ID:

<p > or  <p >

Pseudo-classes and Pseudo-elements

Rules written to govern the appearance of pseudo-classes and pseudo-elements are not controlled by the structure of the document but rather by a predictable state of the element or document.

The best example would be the anchor tag's predictable states: visited, hover, and active. None of these is a selector, but instead is a state. When a link appears in a page, it may display using a defined set of property values; when the state changes, as in the users move their cursors over it, click, or visit the target page, the values for those properties change. The rule written to govern how the properties change is not applied within the page but instead depends on the state of the page to change and automatically engage the new values.

Contextual selectors

Contextual selectors combine a class with one or more selectors to create a selective and powerful rule. Applying a basic class rule to a containing element creates context. Additional rules can be set up to declare property values that apply only when the specific selector occurs within the container of that class.

Inheritance

All HTML pages are governed by their structure, which is a key part of the basic markup. For example, you cannot put the body tag into the table tag; a paragraph can't contain a table, but table cells can contain paragraphs. These basic structural rules create parent–child relationships between the elements in the page. Almost every element is either a parent or child, or both. This parent–child or ancestor–descendent relationship governs the way CSS rules are applied to the page; it's not surprising that the major principle at play in these relationships is called inheritance. Inheritance is the mechanism for determining how style rules are applied — not only for the specific element, but for its descendents, too.

For example, if the body of a page is set to use a specific text color, all text in all elements should inherit that text color unless specifically set otherwise. This is the theory and should be the case, but there are exceptions: some due to special settings, and some due to the vagaries of inconsistent browser support. Additionally, not all properties are inherited. Text color and size is inherited; border and box margin and padding properties are not. Experience through practice and careful attention to reference resources will help you gain insight to this guiding principle of CSS.

Specificity and importance

Two more guiding principles of CSS are specificity and importance. Specificity describes the relative weights of style rules. IDs have a relative weight of 100. Classes weigh in at 10, and simple selectors have a specificity of 1. This is important because it is entirely possible, even likely, that you may have rules and apply them in ways that set up conflict. For example, say you define a rule for all paragraphs <p> that sets them to use red text. You also define a custom class called mainparagraph that uses green text. When you apply the custom class to a paragraph, you end up with the following:

<p > text content here </p>

The text cannot be both red and green; which will it be? This is where specificity applies. Because classes have a greater specificity, it overrides the simple selector's rule and so this paragraph will sport green text. This is a simple example; specificity is almost always more complex than this. To further complicate matters, inherited values lose their specificity. Any explicit rule overrides an inherited rule. An example here would be:

body {color:blue} p {color: red}

If you type words into the body of the page, they appear in blue text. Make those words a paragraph and their color changes to red. Why? Specificity. Although the blue is inherited, the text within the paragraph is controlled by the properties of the explicitly defined paragraph style.

!important

!important is a declaration that can be used to override specificity; adding this to the correct position in your declaration gives the value precedence. Dreamweaver doesn't really have a mechanism to add !important to your rules, but with easy access to the defined rules, you can add it by hand. !important must always be added just before the ending semicolon of a property declaration:

p {color: #003366 !important; background: #CCCC99;}

Each property that is important would have its own !important declaration.

The ever-useful cascade

Style rules may originate in an external page or be embedded within the head of a specific page; style rules may even be defined at the block level or inline, although this practically defeats the advantages of using CSS. External style sheet(s) are linked or imported in a page, but that page may also have embedded and inline rules. It can even have more than one externally linked or imported sheet.

The cascade also determines what happens when properties for a specific selector conflict; the general rule is that the "closest" rule's property value wins, although there can be exceptions. Given the same selector and property, an inline value overrides an embedded value, which in turn overrides an external value. If the declarations are in one or more linked or imported sheets, the style value in the last sheet read has precedence. This same principle means that the author's styles override default values provided by the browser (user-agent).

CSS versus HTML formatting

If the closest value wins, what happens if you use font tags (or set a table cell's bgcolor) in a page that also contains CSS styles? Many new users of CSS try to cover their bases by including both styles and HTML markup. This defeats the purpose of CSS because the same rules that apply to CSS styles also apply to font and other HTML formatting. Cascade applies and for the most part, the HTML formatting is always closer.

Tip 

Use the Clean Up HTML Command (Commands ® Clean Up HTML) to remove existing font tags by enabling the Specific Tags option and typing in font, b, i, and any other possible HTML formatting markup.

When developing your page HTML, don't set properties using HTML methods. For example, if you plan to have all table structures use a header row with a background color, set that value using CSS. That way, if you decide to change the color later, you can simply edit the style.

CSS properties

Many properties are definable using CSS, including text, block, border, box, list, and more. Each category of property contains attributes, such as color, size, and other definable values. Many resources list which properties are acceptable for specific elements, from the W3C specification (www.w3c.org) to books and online development forums. Rather than list properties, we'll approach creating styles with properties using the tools in Dreamweaver.

---