This section will explain briefly how to set the browser's presentation modes for the four main areas of use. These are:

• The default behavior of the browser: All author and user CSS styles are excluded from the cascade.
• The author-styles-only configuration. All user styles are excluded from the cascade.
• The user-styles-only configuration. All author styles are excluded from the cascade.
• The combined author-user configuration. All five importance ranks are included in the cascade.

The Presentation Modes dialog can be accessed in Tools / Preferences / Advanced / Content / Style Options / Presentation Modes, or via the View / Style / Manage Modes... / Presentation Modes menu selections.

To study default behavior, all of the applied user and author styles must be excluded. Figure 1 shows the settings for this configuration.

In this configuration, very few styles are applied; specifically excluded are:

• The set of all user style-sheets, i.e:
  • The user stylesheet user.css
  • Site-specific style-sheets
  • Opera's built-in style-sheets
• The author's downloaded style-sheets
• The author's document head styles
• The author's in-line CSS styles

These are included:

• The browser's default style-sheet
• The author's in-line HTML attributes

and in addition, at all times and in every configuration:

The Opera browser applies limited font settings from the Preferences/ Advanced / Fonts dialog as if they had been merged with the appropriate selectors of the browser's default style-sheet. The detailed font families and font-sizes are applied, for example, correctly sized main body font, headings, pre tags, etc., but the properties for each font seem limited to:

• font-family
• font-size/line-height

The font item shown in Preferences/ Webpages is just an extract of this set so it could be said also to apply. The user's choice of link colors are not applied, but this feature can be selected independently. Notice that apart from various text boxes, the default browser style-sheet does not contain font declarations for the body of the document, these being supplied by the preference settings.

This configuration specifically excludes the user style-sheet, but allows all of the features introduced by the web-author. Figure 2 shows the settings for this configuration. It is used also to remove the user style-sheet at times when it intrudes, and allows normal browsing of both local and external web-pages. The list item's name might well be responsible for the confusion that surrounds these settings; the term Page style sheet seems to imply a reference to the internal sheet's styles in the head of the document, but as shown below, it applies to all of the author's styles.

The following are excluded:

• The set of all user style-sheets, i.e:
  • The user style-sheet user.css
  • Site-specific style-sheets
  • Opera's built-in style-sheets

These are included:

• The author's in-line HTML attributes
• The author's in-line CSS styles
• The author's downloaded style-sheets
• The author's document head styles
• The browser's default style-sheet

This configuration is useful for testing a user style-sheet made by the PC user, and for studying or modifying the formats produced by the built-in set of Opera style-sheets. It is not usually the choice for normal browsing since it is likely to produce too complex a format.

This configuration excludes all of the author styles, and applies only the user style-sheets. Here the term user style-sheets includes any installed user style-sheet, and any built-in style-sheet selections from the list on the browser's menu View / Style. The user style-sheet is not physically changed but rather a logical merging of these two takes place, acting in the cascade as if selections from the built-in set were added to the end of the user style-sheet. It is assumed, but at present unclear as to whether or not the sequence of these built-in style-sheets is maintained in their listing.

Figure 3 shows the settings for this configuration.

These are excluded:

• The author's in-line CSS styles
• The author's downloaded style-sheets
• The author's document head styles

These are included:

• The set of all user style-sheets, i.e:
  • The user style-sheet user.css
  • Site-specific style-sheets
  • Opera's built-in style-sheets
• The author's in-line HTML attributes
• The browser's default style-sheet

This configuration allows the best opportunity for study of the full cascade behavior. The combination of these two settings permits the inclusion of all five of the importance ranks, as well as the introduction of the browser's built-in styles.

Figure 4 shows the settings for this configuration.

There are no style sources excluded provided that they exist.

These are included:

• The author's in-line HTML attributes
• The author's in-line CSS styles
• The author's downloaded style-sheets
• The author's document head styles
• The browser's default style-sheet
• The set of all user style-sheets, i.e:
  • The user style-sheet user.css
  • Site-specific style-sheets
  • Opera's built-in style-sheets

There is no separate mode for site-specific style-sheet use since it is just a part of the user set. When the My style sheet selection is made, then all three of the following sheets are active provided that they are installed, and in the case of the built-in sheets, provided that they are selected. The user style-sheet set is comprised of:

• The user style-sheet user.css
• Site-specific style-sheets
• Opera's built-in style-sheets

The site-specific style-sheet is best thought of as an automatically applied substitute for the user style-sheet. When a site previously identified to the browser is opened, the prevailing user.css style-sheet is replaced by the specific sheet. When the site is changed to one without specifics the user.css style-sheet is used again.

It is true to say that an installed site-specific style-sheet will never be cascaded with a standard user sheet, because these two are alternatives to one another, but that a selection from the built-in set could become cascaded with either of these. Whereas separating the built-in set involves just a de-selection, doing so for the other two without the need for eventual re-installation becomes awkward. The solution may be to leave both in place and to comment out the styles rather that removing the sheets themselves.

The site-specific style-sheet will work automatically in any mode where the user style-sheet can work, namely whenever the My style sheet presentation mode setting is chosen, regardless of whether in an Author or User setting.

The function of some remaining modes has been elusive. Both of the My fonts and colors and the Page fonts and colors modes seem to do nothing at all. In fact, they resemble the default behavior, so they might well be redundant features. The My link style mode allows the user to select colors for the hyperlinks on all web-pages, so might cause confusion when building style-sheets. It has been de-selected in these notes.

Tag Selectors

Tag selectors are the simplest selectors. They are just the text-part of the HTML tag whose style is being defined. In general however, a selector is so-named because it is used to select or target a part of the web-page with its styles. It can also be compounded with other terms to provide for more selective targeting.

It is the left-most part of a style expression, up to but not including the first curly bracket.

A simple style with a paragraph tag's selector looks like this:

and the above style could be applied automatically to all simple paragraphs on a web-page. Sometimes the selectors are grouped to save typing; then the same styles can be made to apply to the entire comma-separated group, like this:

When we intend to write declarations for every tag on the page, we can use the universal selector, the asterisk, like this:

We can also conditionally style paragraphs. If the styles were to apply only when the paragraph tags are nested within div tags, we could write the selector for that as:

Class Selectors

A class-selector is a selector that is allied with a class; that is, a complete set of styles. To use it the class name must be declared within the associated tag. It has more specificity than a simple tag selector, but less than an ID selector. The class can be used as many times as necessary throughout a page, and several classes can be declared within one element. In the style-sheet we could define the class with say;

And to apply these styles to say, a paragraph tag in a document we can write the declaration in the document as:

When the following two classes are declared together in the same element, the styles of the two individually defined classes will be merged:

If the selector is written as shown below, the styles will be applied only to elements where both classes are declared:

ID Selectors

These should only be used once in a page, and only one can be declared within an element. They have the greatest specificity, second only to in-line styles. A typical id definition can be written in the style-sheet as:

and we declare the ID for use in the document with say;

Contextual Selectors

These describe the styles to apply when tags are nested within one another. In this example the selector will only apply to paragraph tags that are nested within division tags. For that we write:

and it would be applied when the tags in the document look something like this:

Combining a few of the above ideas, here are the styles for the same nested paragraphs, but now one has declared a class and the other an ID:

Attribute Selectors

These are selectors that have an attribute in square brackets modifying their action in a conditional way. To color all items with a title of "CSS Work" we might write in the style-sheet:

To select any element with the sub-string able in the value of its title attribute, we write:

Other attributes might include alt, class, id, lang, style, title,and html attributes such as align, cellspacing ect.

Pseudo Classes

These are classes that condition behavior, like that of selecting links on the page. We might write:

Pseudo Elements

These are elements that can access such features as the 'first-line' and 'last-line' of paragraphs, and that allow additional control in the page. For example, they also allow the targeting of the first cell in a row, or every even or odd row.

To make the first letter of all paragraphs bold, we could write:

The first of type pseudo element selects the first child element of its parent that matches the construct. For example, to make the entire first columns of all tables bold we could write the selector as:

The last of type pseudo element selects the last child element of its parent that matches the construct. This selector draws a totals line above the last row of tables declaring the totals class:

The nth child and nth of type pseudo elements can used to selectively target elements by pattern. This first example below colors every odd row of every table:

This next example colors every table's even rows.

The third example shows the general form for table row coloring; this case colors every third row starting with row number two:

To color even columns, two pseudo elements can be compounded as follows. This example colors every even cell in every row of every table. Both of these parts could take more complex arguments.

Important styles

These are declarations in user, author, or any other style-sources with high priority. See page for details:e.g.

Nested elements are elements whose opening and closing tags are themselves bounded by a complete set of other tags. The examples below will make the matter clear. The html code below is used for demonstration. In it there are many nested tag-sets (representing elements). For example, the table is completely nested within a pair of division tags, and all of that is completely nested between a pair of body tags.

The notion of nesting is not limited to adjacent tag pairs. That is to say, in the above example, the table is also considered to be nested within the body tags, despite the fact that the division tags are located between them. In determining which selectors might apply to a particular tag in the document, the browser gives consideration to the nest in which the tag is located. In the example below it is assumed that the browser is attempting to find the relevant nested tags for the first heading tag, h2.

Figure 1: An HTML extract to show nested tag pairs.

<!--  Sample html code for the nesting example 
Go to the examples below for an explanation -->
  <body>
    <div>
        <h2>First Heading</h2>
        <p>First paragraph</p>
        <table>
          <th>Column 1 Heading</th><th>Column 2 Heading</th>
          <tr>
          <td>Cell 1 text</td><td>Cell 2 text</td>
         </tr>
        </table>
    </div>
    <h2>Second Heading</h2>
    <p class="class1">Second paragraph</p>
    <ol>
      <li id="id1">First list item text
      <li>Second list item text
    </ol>
  </body>

Figure 2: This diagram shows the possible selectors as nodes. It follows the extract of Figure 1. Notice that where declarations exist there are two possible routes to specifying selectors, one for the tag with the declaration and one without.

Figure 3: An HTML extract for the example with declarations.

<body id="topid">
<p>textA</p> 
<div>
  <p id="someid" class="class1 class2" style="color:blue;">textB</p>
</div>
</body>

Figure 4: This diagram shows the possible selectors as nodes. It follows the extract of Figure 3. Notice that where multiple declarations exist they can be combined to produce more complex selectors. Most of these would never find use in practice.

Specificity is to the extent to which declarations lack generality; the extent to which they apply to a tag on the page as opposed to their applying to tags in general. The method of deciding such a matter has been developed to a considerable extent.

The method that is used calculates a weighted sum that represents the specificity. The way to calculate specificity is as follows:

For any given style-sheet entry, examine its selector, for example, ''div.p''. The selector is sometimes simple, having only one element, or like this, complex, with more than one. Construct a value for its specificity by adding to a total as follows:

• For a universal selector (*) or an inherited value, add zero to the specificity total.
• For an in-line style, add 1000 to the total. These are found only on the document.
• For every ID selector mentioned, add 100 to the total.
• For every class, pseudo-class, or attribute, add 10 to the total.
• For every simple tag element and pseudo-element, add 1 to the total.

The highest value of specificity among competing style declarations within any one level results in its representing that level in the overall cascade. (See the graphic within the main page).

The inheritance of styles means the use of styles from a parent element when suitable styles have not been specified for the child element. The inheritance of styles takes place after the cascade, filling in the missing property values where possible, and when this cannot be done, by applying initial values, default values for the CSS properties themselves. Note the following points:

• A parent element is any element whose tags totally enclose another set of tags, the tags of the so-called child element.
• Inheritance takes place from a parent element to a child element, if at all, and can be transferred to any depth of nesting where the child of one becomes the parent of the next.
• The calculated values of the previously established cascaded values are inherited and not the properties themselves. Because the cascaded values no longer have any importance rank or specificity associated with them, these factors have no bearing on inheritance either.
• If the child element has a relevant style specified for it then the parent cannot pass styles to it by inheritance.
• Even an HTML attribute can block inheritance if it exists as a relevant style in the child element. This occurs because attributes are given equivalent CSS formats to act in the cascade. They do so within the browser style-sheet.
• The initial values of CSS properties do not take part in the cascade. After the cascade, if no style was specified, then an attempt is made to solve the problem by inheritance, then if that is still not possible, the initial value as found in the CSS Property Definition Table is used. Reasons why an initial value may be taken include:
  • The property is not specified and cannot in any case be inherited
  • The property value is present but its value is set to initial .
• <!DOCTYPE html> for HTML5 Standard is assumed. These notes will apply to web-documents whose top-line entry matches the one here. For certain other doctypes the inheritance of property values might fail entirely.

The examples below help to explain the basic points.

Inheritance takes place as a part of default actions, after the cascaded values have been resolved. This assumption makes the writing of examples difficult. Therefore, the reader should assume that the styles shown in the examples below have already been resolved by the cascade as being valid for these elements.

<!-- Figure 1 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div>   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 1. In the case above the paragraph font-size and line-height will be the same as for the body tag. In this case the div tag inherits from the body tag since the div has no such properties specified. The paragraph inherits from the div for the same reason.

When specified at a given level, relative line-height is always calculated as a multiple of the same element's calculated font-size, but where line-height is inherited, the calculated value of line-height of its parent is used. The next example illustrates this. Relative font-size is always calculated as a multiple of the parent's calculated font-size.

The line height will be applied as a value as close as possible to its calculated 24px, (16px x 1.5).

<!-- Figure 2 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div style="font-size:1.25em; line-height: 1.6em;">   
        <p style="font-size:1.5em;">  /* inherits calculated line-height value as 32px */               
              This is the test paragraph
        </p>
      </div>
   </body>
</html>

Refer to Figure 2. In this slightly more complex case the div's calculated font-size is 20px and based on this, the font-size for the paragraph is calculated to be 30px, (16px x 1.25 X 1.5 = 30px)

The line-height for the paragraph is inherited from the div element, since it has no such style of its own, but it is not the 1.6em that is inherited but the calculated value of line-height as it exists for the div.

The paragraph's font-size is then 30px and the line-height becomes a mere 32px, (16px x 1.25 x 1.6 = 32px).

<!-- Figure 4 -->
<!-- Assume that the browser default font-size is 16px  -->
<html>
   <body style="font-size:1.5em;"> 
      <div style="font-family:Garamond; font-size:1.5em;">   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 4. In this example the paragraph's text will be styled in Garamond face, with font-size 36px. Attempts by the div level to inherit a specific value for the font size fails, since neither div or body tags hold a font-size measurement. The initial value however, as set by the browser's default options is 16px and this value is taken by the body tag to make its calculated value 24px. In turn, the div tag inherits 24px and then calcuates its own to be 36px. The paragraph inherits the values Garamond and the 36px from the div tag.

Figure 5: A methodical approach to determining inherited values.

The estimation of inherited values is complex for a web user, but it is rarely needed where styles are fully specified. For a browser, the matter needs to be a more methodical process.

Refer to Figure 5 for a strategy chart for such a process. After the cascade has run its course, the inheritance run then starts at the outermost tag of the document tree and works inward toward the target tag. The outermost tag that could contain a style is the html tag, the next is the body tag, and so on, and any of these tags could be required to contribute styles through inheritance.

Recall that inheritance can propagate from the parent element to the child element only if the child element has no cascaded style for that property of its own. When there is no such style but inheritance is still not possible, then the initial value for that property is taken instead. For example, this might happen in an HTML element that has no font-size declared, either in style-sheets or on the page. The initial value for font-size would be used, and might even be inherited by nested elements. All CSS properties have initial values as defaults, written into a Property Definition Table as a part of the browser's design process.

With such a model either the cascaded, inherited, or initial values will be assigned during any one iteration of the loop. In a practical situation there would not be a single run but several, not just to the deepest target, but including all of the side runs also. Nor would there be just one CSS property that is of interest, but rather all of the properties that can apply to that element. The scenario that perhaps serves best to understand the scope of what is done, is to imagine dozens of properties being considered at the same time at every iteration, then several more passes to get the rest.

When a style-sheet finds an error, it tends to ignore the feature in which it is found.

• If the selector is illegal : This might happen if some character in it is not permitted by the CSS standard. If that happens then all of the styles in the declaration block associated with it are ignored. Parsing continues with the next valid selector.
• If the declaration block is malformed: For example, there might be a missing opening bracket. When this happens the entire declaration block is ignored. Parsing continues with the next valid selector.
• If an illegal property is found: For example, there might be a misspelling. The entire declaration is ignored. Parsing continues with the next valid declaration in the same declaration block, or the next selector.
• If there is an illegal value : As in the property case, the entire declaration is ignored and the parsing continues with the next valid declaration in the same declaration block, or the next selector.
• If a semicolon is missing from the last declaration in a declaration block: The styles are unaffected.
• If a semicolon is missing from any other declaration in a declaration block: The style with the missing semicolon and the one that follows it will be ignored. Parsing continues with the next valid declaration after those two, or the next selector.

In-line styles are parsed in the same way as style-sheets, so the second of two contesting styles applies. Problems mostly arise when the parentheses are missing:

• Removing the parenthesis from the end of the block: This can cause a paragraph to vanish completely! This can be demonstrated using the in-line style for the first paragraph of the example in the main page.
• Removing the leading parenthesis: This causes more strange behavior - the first declaration of the two is applied but not the second.
• If two in-line style blocks exist: The second is ignored.
• A missing semicolon at other than the end of the declaration block: This causes the declarations on both sides of the missing semicolon to be ignored.
• A missing semicolon at the end of the last declaration: Has no effect on the styles.

Comments can be added to the style-sheet as follows:

 /*  This is my style-sheet user.css              
 These are comments and they are ignored by the parser. 
 Notice that the outside bounding characters are forward slashes,
 and that there are asterisks on the inside of each  */

p{
font-size: 30px;   /* this is also a valid comment */
}

/* comment characters can also be used to temporarily disable css styles for testing */

Comments for HTML are different from the ones for CSS style-sheets. Comments are added to HTML with:

 <!--  This is an HTML comment and it is ignored by the parser. -->
 <!--   Notice the form of the leading and end symbols   -->

White-space in style-sheets is largely ignored, so the layout can be spaced for ease of reading. Here are a few of the more obvious points.

• White-space can surround properties, values, selectors, declaration blocks, and whole style-rules.
• Individual words such as in properties, values, and selectors, should not be broken with space or line breaks.
• Line breaks are not permitted within individual style declarations, though breaks between complete declarations are to be expected.

• Declarations should not be broken with line breaks. The need for this rarely arises when a neat layout has been adopted.

When a style-sheet is referenced in the head section of a web-document, there are certain assumptions that can be made:

• If no path other than the file name is given, the browser can assume that the style-sheet is to be found in the same folder as the web-document itself.
• If a full path is given, in the case of Opera, spaces are tolerated in the folder names. In the event that a browser objects to spaces, then replacing the spaces with %20 will solve it.
• A local path can be given for a style-sheet on the local computer.

Any number of style-sheets can be added to a web-page by making a separate link reference for each in the head section of the page. With the @import directive, additional style-sheets can be added to the linked style-sheet itself.

That is to say, any of the style-sheets listed in the head section of the document can themselves import further style-sheets. In practice this means placing a separate @import directive for each additional style-sheet, at the top of the linked style-sheet. For example: these three additional sheets will be merged with the one in which they are mentioned:

@import "first.css";
@import "second.css";
@import url('http://help.opera.com/css/styles.css');

/*   This is main.css, the sheet referenced in the web-page's head section */

body{
font-size:1em;
}

/*    etc...   */

Note the following:

• There can be no typing above the import directives, but a blank line is permitted.
• The parentheses are optional for Opera but some browsers like Internet Explorer might expect them.
• A semi-colon after each import directive is essential.
• The style-sheets will run in sequence "after" the sheet in which they are listed.
• Entries without a path will be assumed to be located in the same folder as the web-document itself.
• Optionally, the url format can be used to import a known style-sheet. See the third example above, and notice that it has single quotes.

Before the introduction of CSS style-sheets the formatting of web page elements was carried out with so-called HTML attributes. These are basic style rules, and the set differs for each HTML element. In the absence of any author and user CSS styles, the formatting of a web page is handled by a combination of:

• The browser's default CSS style-sheet, (or built-in style set).
• Any HTML attribute inheritance or CSS inheritance that may still apply.
• Settings in the browser's preferences (options).
• The HTML elements' attribute default values.
• HTML attribute values purposely written into the HTML tags.

The formats STYLE=, ID= and CLASS= are themselves HTML attributes that allow the assignment of CSS styles to HTML tags. That is to say, when we write in-line styles into an HTML tag, or declare an id or class, we use HTML attributes to do it.

Although the above list has only one CSS source mentioned (the browser's default style-sheet), it is convenient to think of most of these items as comprising the default browser set. In fact, some developer utilities such as Opera Dragonfly list the equivalent CSS properties of added HTML attributes as if they had originated in the browser's default style-sheet. For example, where there is an attribute entry align=center, it is implied as having been written in the default style-sheet as text-align:center. Additionally, the same utility lists font details from the browser preference settings as though they had also originated as CSS code within the browser's default style-sheet. Most of the time this will not pose any problems for understanding, but it is as well to bear it in mind where there is confusion.

Attribute values as well as CSS values can be propegated to child levels by inheritance. For example, align=center within a tag at any parent level will affect paragraphs at levels far below, assuming that the paragraph has no such style of its own.

Because HTML attributes and CSS styles might still be found together in web pages it is as well to comment on their relative precedence in use. CSS values supersede simple HTML attribute values when they apply to the same style on the same element. In fact, it is only when no CSS style has been expressed that an HTML attribute could apply its formats.

Because of these priorities it may be incorrect for developer tools like Opera Dragonfly to treat attributes as though they were part of the browser's default style-sheet. Clearly even a default browser's CSS style should override an attribute. These priorities are difficult to test in the absence of access to a browser's default sheet, but fortunately the number of situations where confusion might arise are becoming vanishingly small.

Until recently, some HTML attributes had been easier to apply than CSS, but increasingly, CSS styles are being introduced to fill the gaps. For example, the alignment of block elements at a page's center with the HTML attribute expression align=center can now be done with the CSS declaration margin:auto, and recent versions of CSS now allow for the convenient merging of table cells. For those who do not have access to the style-sheet (users of Wiki), and who need to apply padding for table cells, there seems to be no substitute for the table-level HTML attribute cellpadding=length, or endlessly adding padding to every cell. With each new version of HTML, various attributes fall into disuse, for example, the attribute align becomes unavailable in HTML5.

Although the CSS cascade applies only to the resolution of CSS styles, unless regard is also given to these additional default sources, the user will be denied a full understanding. Listings of HTML attributes and their element defaults are to be found in texts on HTML code itself, and will be found to vary between the HTML versions.