Working with Style Precedence


When more than one style applies to the same element, the browser displays the attributes of each style in combination with the other stylesand those styles might conflict with each other. In case of such a conflict, the precedence of styles is determined by the cascading nature of CSS. Understanding how to manage and order your styles can help you to avoid unexpected results.

CSS is applied cumulatively; that is, each style builds upon other styles if they apply to the same element in an ordered sequence according to the following rules of origin, specificity, and order.

Origin

The origin, which is the source of a style, is evaluated first. The sequence of style origins is as follows, beginning with the lowest prioritywhat the browser uses first:

  • Browser defaults (lowest priority)

  • Styles created by the user

  • Styles specified by the Web page (highest priority)

This means that browsers use their default formatting specifications unless there is a style sheet that overrides those defaults. A user-specified style sheet overrides browser defaults, whereas styles specified by the Web page override user-specified styles.

1.

Windows users: open the Internet Explorer browser, choose Tools > Internet Options, select the General tab, and click the Accessibility button near the bottom of the dialog box. Mac OS X users: open the Safari browser, choose Safari > Preferences, select the Advanced category, and use the Style Sheet pop-up menu to choose your own previously-created style sheet.

Tip

If you do not have Explorer or Safari installed on your computer, you can use any Web browser to complete this step. The exact location and title of the section in which a user style sheet is specified might vary from browser to browser and from version to version. As a Web developer, it is recommended that you become familiar with a variety of browsers, so you might want to repeat this step for other browsers. If you can't find the option for specifying a style sheet, try looking in the browser program's help or documentation.

Visitors have the option to instruct browsers to apply style sheets of their choosing to the pages they visit. This option can provide greater accessibility by allowing users to adjust the appearance of Web pages through a style sheet that is optimized for their needs. This is an important option for users who might have visual disabilities. For instance, if a user has a hard time distinguishing small text against backgrounds that don't contrast well, that user can specify a style sheet with large text and a color combination with a dramatic contrast such as black text on a white background. Although this option is available, the majority of your visitors will most likely have no style sheet specified, so it is still important to consider the accessibility of your design when developing a site. Keep in mind the fact that some users might not know this option existsdon't rely on your visitors to make your site viewable. The more work they have to do to see your site, the less likely that they'll stick around to view the content. Design with the experiences of your audience in mind and aim to present sites as complete, seamless, and as easy to use as possible for the best results (more visitors!).

If there are conflicting styles between a style sheet specified by the user and one specified by the Web page, the one specified by the Web page will be used. If a style sheet specified by a user defines the default font face as Verdana, and a style sheet specified by the Web page defines the default font color as green, the default text style will be both Verdana and green. This cumulative effect is known as inheritance.

You can close the browser Preferences (Macintosh) or Tools (Windows).

CSS Weight Declaration

Styles can also be modified by the weight declaration, a method of establishing priority that is primarily intended to give the user an option for control over the style precedence. To increase the weight of a style, !important is included at the end of the style declaration, after the attribute values. Any style defined with !important in a style sheet specified by the user will override conflicting styles specified by the Web pageregardless of whether the styles defined by the Web page use the !important modifier. Older CSS standards allowed styles containing !important and originating from the Web page to override user-specified styles containing !important. The change to give user-specified styles containing the !important declaration priority is intended to give users control over stylesthis can be important for visitors who need to view pages in certain ways. Use the modifier with discretion and consider whether it is truly necessary. A style using the !important modifier would appear as follows: body { color: #339900 !important }.


Understanding Specificity

The precedence of style types depends on a system that determines which style is the most specific. Style specificity is based on values in the format of abc as follows:

  • a is the number of IDs in the style

  • b is the number of attributes that are defined by the style

  • c is the number of element names in the selector.

Styles with higher specificity values are given priority over styles with lower values.

Examples of How Specificity Is Determined

Sample Styles

Style Type

a

b

c

Specificity

(abc) Value

p { color: 000000 }

Tag

0

1

1

11

This style specifies that text contained within paragraph blocks will be black.

div p { font-size:22px }

Advanced

0

1

2

12

(Contextual Selector) This style specifies that text contained within a paragraph block(s) that is contained within a div will be 22 pixels.

h5 { font-family: Verdana, Arial, Helvetica, Sans-serif; font-size 18px }

Tag

0

2

1

21

This style specifies that text formatted as a Heading 5 will be displayed in Verdana, Arial, Helvetica, sans-serif at a size of 18 pixels.

.quote { font-style: normal; font-weight: bold; color: 0033CC }

Class

0

3

0

30

This style specifies that text to which the .quote style is applied will use the normal font style, be bold, and use a dark blue color (#0033CC)

#left { font-size: 22px; color: #000000 }

Advanced (ID and Contextual Selector)

1

2

0

120

This style specifies that the text marked with the unique ID left will be 22 pixels and black.


2.

Switch to the sangha.css style sheet in Dreamweaver. Calculate the specificity values for the following styles: the <h4> tag, the highlight class, and the <ul> tag.

After you have calculated the values, you can compare them with the values listed at the end of this step.

The following figure is how your current style sheet should appear. The specificity values listed below the example of how specificity determines the order of styles are calculated based on the style sheet you see here.

Here's an example of how specificity determines the order of styles: The Heading 3 tag style that you created earlier in this lesson overrides the font defined by the style that was created when you set the default font to Arial, Helvetica, sans-serif in the Page Properties dialog box at the beginning of this lesson. Although the style that was created was initially an internal style, it was exported along with the other internal styles from the top-level index.html document to create the external sangha.css style sheet. The <h3> tag style has a higher specificity value (41four attributes and one selector) than the default text style (23two attributes and three selectors). The default text style appears in the CSS document as: body, td, th { font-family: Arial, Helvetica, sans-serif; color: #000000 }; the heading 3 style appears as h3 {font-family: "Courier New", Courier, mono; font-size: 18pt; font-weight: bold; color: #660066;}

Notice the commas separating the selectors in the style defining default text color: body, td, th. These commas indicate that this style is not a tag combination similar to the one you created earlier for div p; instead this style defines a number of selectors as a group. It is more efficient to group selectors when their attributes will be identical, as opposed to creating three separate styles.

In the sangha.css style sheet, the specificity values you calculated in this step should be:

  • h4 (Tag): a = 0, b = 2, c = 1 (for a value of 21)

    There are no IDs (a) in this style; there are two attributes (b) of font-family and font-size; and there is one selector (c), H4.

  • highlight (Class): a = 0, b = 1, c = 0 (for a value of 10)

    There are no IDs (a) in this style; there is one attribute (b) of background-color; and there are no selectors (c).

  • ul (Tag): a = 0, b = 3, c = 1 (for a value of 31)

    There are no IDs (a) in this style; there are three attributes (b) of font-size, weight, and color; and there is one selector (c), ul.

Note

CSS specificity uses a large arbitrary number base to calculate the values of stylesit does not use base 10 because styles can potentially have more than 9 IDs, attributes, or elements. Suppose that a style has no IDs, 14 attributes, and 5 elements. In base 10 such a style would use a = 0, b = 14, and c = 5, so the value would be 145. In a numbering system with a large base, a = 0, b = E, and c = 5, so the value is E5. This is important because a style with one ID, one attribute, and zero elements would have a value of 110 in both base 10 and a numbering system with a larger base. In base 10, the first style with a value of 145 would override the second style with a value of 110. However, in a numbering system with a larger base the second style with a value of 110 would override the first style with a value of E5, which is the correct order of specificity.

Understanding Order

The order of styles, which concerns where styles are located, is as follows, beginning with the lowest:

  • Browser defaults (the formatting that is farthest away from the text; lowest priority)

  • External CSS styles

  • Internal CSS styles

  • Inline CSS Styles

  • Local HTML formatting (the formatting that is closest to the text; highest priorityoverrides any options set in the styles above if there are conflicts)

Best Coding Practice: Avoid Inline Styles and Local Formatting

An inline style is an instance of a style that is placed directly in the code. The use of inline styles is generally not recommended. <h1 style="color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif"> is an example of an inline style. Inline styles are defined within the content of the document and do not use any style sheet information at the top of the document (as internal styles do) or in a separate style sheet (as external styles do). Internal and external style sheets are significantly more powerful because inline styles merge content with formatting and because they are single instances of a style definition that can't be used elsewhere.

Local HTML formatting overrides all styles. HTML formatting is no longer used by Dreamweaver to format text because the <font> tag is deprecated (marked for deletion) in HTML 4.0, as discussed in Lesson 2. Although formatting with the <font> tag is still supported in manual coding through Dreamweaver as well as by browsers, taking advantage of the new standards enables you to design a more flexible and functional Website. It is best to avoid using the <font> tag.


3.

Click the index.html tab to switch back to the index.html Document window. Apply the highlight style to the text Universal Principles of Alignment in the last line of the list. Click the Current button at the top of the CSS Styles panel.

The background color defined in the highlight style is combined with the style that controls the formatting of the list.

The Current view of the CSS Styles panel gives a summary of all properties and values that apply to the current selection in the top portion of the panel, in the order of which they are applied. The bottom property is the one that is closest to the current selection. In the lower portion of the panel, you will see details regarding the property that is selected in the summary. In this case, the highlight class is shown, including information about the style sheet in which the rule is located. You can select any of the properties in the summary to find out more about them. The Properties segment of the CSS Styles panel that you used to edit a style in the previous exercise remains visible.

If there is more than one style applied by the author of the Web page (the origin) to the same text with conflicting attributes, priority is given to the specifications from the innermost style (the style closest to the current selection). The most recent styles are nested inside earlier styles. Because the last formatting attributes you apply are physically the closest tags to the text, they take precedence over earlier styles and control the final look of the text.

If your document uses an external style sheet, the styles in that sheet are applied across your document. Suppose, for example, that the external style sheet has definitions for Heading 3 and Heading 4, and that you also created an internal style within your document that redefines the Heading 3 tag. The internal style takes precedence if the attributes conflict with those in the external style. For example, if the internal style defines the h3 tag to be red and the external style defines the H3 to be blue and bold, the h3 tag will actually be red and bold. Only the attributes that conflict are affected.

Text formatting applied manually to ranges of text can also take precedence over other styles. In the example just presented, suppose that you used the Property inspector to apply a different color to one of the Heading 3 lines. Dreamweaver defines color and formatting selections from the Property inspector as internal custom styles. The Style menu on the Property inspector includes both internal and external styles.

If you have attached a style sheet to a document and the browser does not display the formatting that you expect, check your style sheet and your document to see if you have other styles or local formatting that is overriding the styles you expect to see used.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net