Although most of the time the styles of a web-page's author would suffice, the Opera browser has long provided facilities for its users to modify the appearance of the page, and all recent Opera versions up to and including 12.17 allow user style-sheets. Versions beyond this point, version 15.xx was essentially next, have not permitted such facilities. The 12.17 version is perhaps preferred over 12.16 for those who like the old style, since it was created to fix the Heartbleed bug.
To continue, the local user can provide several style-sheets, one for general use that affects every page, and others that are used instead when specific pages are opened. The browser also has a number of built-in style sheets to improve viewing for the visually impaired and for testing.
Changed styles are perhaps best regarded for making a page easier to read, but the study of the CSS cascade itself requires an ability in styles adjustment. Another more obvious use is the design of a web-page, where endless testing is the rule as opposed to the exception.
Contrary to popular belief, those interested in studying CSS styles need not purchase expensive program packages. Whereas such programs have advantages for those seeking quick results the web itself is the best source of examples, and can be studied at any time. With the introduction of web-developer software to browsers all of the necessary features are already available.
This page explains how to configure the style settings of the Opera 12.16 browser for its main areas of use, and provides some sample text files and tutorials to assist in their study.
The Style Options settings select the style sources that will participate in the browser's CSS cascade. The settings can be switched between either of two complete sets of selections called Presentation Modes, or just modes.
There are two main modes of working, named the Author Mode and the User Mode, and these can be selected within the main menus of the browser. These names for the modes are necessary to identify them but are in fact poorly chosen, as will be explained later. Specifically, modes are switched in the browser's View / Style menu. However, the default mode selection, the one that applies after every start or restart, is made within the browser's preferences with View / Style / Manage Modes... / Presentation Modes / Default Mode. Switching via the View / Style menu does not require a restart, while any change to the default selection always does.
Each of the modes is represented by a column of detailed selections of its own in the browser's preferences at View / Style / Manage Modes... / Presentation Modes. If identical selections were to be made in each of these columns then both modes would include the same features for the cascade; that is to say they both can do the same thing. To further labor the point, the so-called Author mode could just as easily be set up to contain only user features and vice versa.
However, it is perhaps as well to honor the fixed names of these modes, until such time as Opera allows them to be chosen by the user. By making different selections in these columns, two completely different configurations can exist, and can be applied by simply switching modes. For example, it would be possible to set the default to Author Mode, and its associated column with a single selection of Page Style Sheet, (Opera code for all of the author styles). The other column, for the User Mode might have two selections, Page Style Sheet and My Style Sheet, (Opera code for the entire set of user sheets). In this way the modes could be easily switched from normal browsing to normal browsing plus user styles.
The user ranks are formed from three separate sources. These are Opera's Built-in style-sheets, the User style-sheet user.css, and any of a set of selectively used Site-specific style-sheets. Depending upon which of these is installed or selected at any one time, any one or all of them might be merged in the browser's styles cascade at the user levels.
The generally accepted terminology that is used within the subject has no doubt evolved in its use, but has been largely delivered by the World Wide Web Consortium (W3C). It is of interest here only because it needs to be distinguished in meaning from some of the terminology used in the settings of the Opera browser.
These are a few of the commonly accepted meanings:
Style-sheet: A text file that contains styles for a web-page. It is distinguished from other text files by its .css suffix.
Style Sources: Locations of styles such as author styles, user styles, and the browser's own client styles. It is also used to describe any sub-sets of these three, such as head styles, in-line styles etc.
User Agent (UA) Style Sheet: Styles in the browser's own style-sheet, or its equivalent.
The User Styles: Styles written into a local style-sheet held on the user's computer.
The Author Styles: Styles from the author's linked style-sheets, the document head styles, and any in-line styles.
Inheritance: Propagation of styles to a child element from a parent element when it has no such styles of its own.
Initial Values: CSS Property values used as defaults when all other styles acquisition has failed.
The meanings below are far from intuitive, bearing in mind the complexity of the cascade, so it is important to understand them. Within the Presentation Modes dialog these terms mean:
'Page Style Sheet' : This means The Author Styles. That is styles from the following sources:
The author's linked style-sheets, and
The document head styles, and
Document in-line styles.
'My Style Sheet' : This means any or all of the sources, (set of user style-sheets) that comprise:
The local user style-sheet user.css, and
Site-specific local style-sheets, and
Opera's built-in style-sheets
'Author Mode': A mode label of convenience. It refers to one of two identical columns of selections that can be set to include any or all of the style sources for the cascade. It need not in fact pertain only to author styles.
'User Mode': A mode label of convenience. It refers to one of two identical columns of selections that can be set to include any or all of the style sources for the cascade. It need not in fact pertain only to user styles.
The browser's presentation modes can be set to allow the full cascade or some filtered version where some importance ranks are excluded, and the sections below (Mode Selections in Detail) itemize these inclusions and exclusions for the various settings so that there is no ambiguity. The cascade rankings in Table 1 are those for CSS Level 2, though their number is set to increase in Level 3.
Style declarations can have a special marking to give them added priority over normal declarations and they use the !Important keyword to identify them. They are called Important declarations. In sorting its lists the browser segregates the important declarations from any normal declarations. The browser then recognizes the five Importance Ranks, or Importance Layers, of Table 1, where rank 1 has the lowest importance and rank 5 has the highest.
Table 1: Cascade Importance Ranks for CSS Level 2
rank 1
The Browser default styles Styles listed in the User Agent (UA) Style Sheet, or some equivalent implementation.
rank 2
The User Normal Style Declarations Those in the user style-sheet without an !Important marking. Normal declarations from any active site-specific and built-in style-sheets are also merged here.
rank 3
The Author Normal Style Declarations Those in the author's set without an !Important marking. They comprise styles from the document head, linked style-sheets, and in-line styles.
rank 4
The Author !Important Style Declarations Those in the author's set with an !Important marking. They comprise styles from the document head, linked style-sheets, and in-line styles.
rank 5
The User !Important Style Declarations Those in the user style-sheet with an !Important marking. !Important declarations from site-specific and built-in style-sheets are also merged here.
Browsers resolve the styles for a page tag by tag. In establishing which of several competing property values is to be selected for an HTML tag, browsers first sort all of the relevant styles by their property names. Then within any similar properties, they are sorted according to their importance ranks. If the matter is still not resolved, they are further sorted for their specificity. If after all of this they still are matched in priority, they are selected according to their source order; that is to say, the one that is encountered last by the browser is selected. Refer to The CSS Cascade for further details and a detailed example of the process.
Although there are many possible scenarios in which Opera's presentation modes might need to be set, they fall into four main categories:
The default behavior of the browser: All author and user CSS styles are excluded from the cascade. In this setting the browser's default style-sheet applies and very little else. It is maintly of interest for those who need reassurance as to the content of the default style-sheet or the priorities of the preference settings.
The author-styles-only configuration. All user styles are excluded from the cascade. This is the main browsing setting for Opera, and includes all of the author's linked, head, and in-line styles.
The user-styles-only configuration. All author styles are excluded from the cascade. In this mode only the set of user sheets can apply. This mode allows good separation from all author styles, and finds use in testing and user style-sheet design.
The combined author-user configuration. All style sources are cascaded. This is the mode to study the full interaction of styles in the CSS cascade. In particular, it is needed to confirm the correct switching of site-specific style-sheets and the importance rank effects of an user.css style-sheet.
For a quick setup of Presentation Modes and styles, the following is recommended:
Default Style Mode Setting: Select Author Mode. The browser will always start in this mode for normal web browsing.
Author Mode column: Select only Page Style Sheet, the best mode for normal web-browsing.
User Mode column : Select only Page Style Sheet and My Style Sheet, the best combination for full-cascade working. You will need to install a suitable user.css style sheet to take full advantage of this setting, though it could be installed as an empty style-sheet and added-to later.
With these recommended settings the casual user can easily switch between them using the View / Style menu choices. For those who need more assurance, the sections below itemize the inclusions and exclusions in detail for each selection.
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.
There is good deal of blurred or downright misleading terminology used in Opera's own help pages, and some facilities touted by the browser itself would seem to be inoperable. Although it is fair to say that all of its main features work well, these clarifications may help:
'My style sheet' means the user style-sheet made by the computer user, and any site-specific variants. Perhaps more surprisingly, it also includes any or all of Opera's built-in style-sheets. The reason is that all of these are logically merged into one user style-sheet for the cascade.
'Only ONE user.css' should exist. If more than one user.css file exists, even in different folders, styles confusion will result at some stage. Use site-specific style-sheets rather than several user.css files. This author is convinced that there is still more to understand on this point, but that the restriction described here will control the matter. Knowledgeable persons are invited to modify this understanding accordingly.
'The @Import rule' that allows an author style-sheet to itself import more style-sheets should not be used in any sheet within the user set, though of course it can form the heading of any author's sheet.
'Page style sheet' means the entire author styles source; the in-line styles, the head styles, and the imported style sheets, and not just the style-block in the document head section.
'User mode' versus 'Author mode' has little or no meaning since at present identical style cascades can be created with each. That is to say, although the mode descriptions in the sections below have used the Author mode, making the same selections in User mode will do exactly the same thing. The duplication of these selections seems at first sight to be fairly redundant, but it allows fast switching between any two mode constructions.
Fast presentation mode switching allows the user to have a different set of selections in each of the Author and User modes and a fast change from one to the other. The best way to change these modes is to use Opera's View / Style menu, since it requires no browser cache-clearing or re-start. The mode choice in the Presentation modes dialog could also be used but it is a default setting and would need a restart. However, for long sessions and to avoid confusion it is more convenient to change the default setting to the one that is of most interest.
Redundant modes? Both of the Page fonts and colors and the My fonts and colors have defied understanding. Until more information becomes available to the contrary, it might be best to leave these modes unchecked. My link style is intended to change link colors to the settings in Tools / Preferences... / Webpages, but it has been found to be inoperative in recent tests.
'Site-specific style-sheets'. The site specific style-sheets (any number) are just substitutes for the user.css style-sheet, and the choice between the two is made automatically whenever the special site is accessed. They work only in a mode where the My style sheet is selected.
Site-specific style-sheet installation uses the right-click method. The method is as follows: With the Opera browser displaying the site for the intended site-specific style-sheet, right-click and select Edit Site Preferences.... This adds the current site and selects it for edit. Select Display then add the path to the css file for the specific site. Press OK and reload the site if necessary to see the effect. There is no way to switch off the general use of site-specific style-sheets, though the list of those sites so installed are found at Preferences / Content / Advanced / Manage Site Preferences.... Using this list instead of the right-click method to add style-sheets has proved troublesome.
Opera's 'built-in style-sheets' can be applied in any presentation mode that allows the cascading of user style-sheets, that is, any mode with a My style sheet box ticked. In this event they are merged at the user style-sheet level, most often with an !important marking.
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.
The Default Behavior of the Opera Browser
To study default behavior, all of the applied user and author styles must be excluded. Figure 1 shows the settings for this configuration.
Excluded
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
Included
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.
The Author-styles-only Configuration
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.
Excluded
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
Included
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 User-styles-only Configuration
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.
Excluded
These are excluded:
The author's in-line CSS styles
The author's downloaded style-sheets
The author's document head styles
Included
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
The Combined Author-user Configuration
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.
Excluded
There are no style sources excluded provided that they exist.
Included
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
Site-specific Style-sheet Modes
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.
Other Presentation Modes
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.
These introductory points explain and distinguish between the three user style-sheet types within the user set.
There are two kinds of user style-sheets that can be applied; the first is the kind that is applied for all sites in general, and called user.css, and there is only one of these; the second is a set of site-specific style-sheets, each of which is applied to a particular site. Site specific sheets can have any reasonable name with a css suffix, except user.css. The site-specific sheet will be automatically applied instead of user.css, in any situation where My style sheet has been selected in the Presentation Modes. Sections have been provided below to explain the installation of both of these style-sheets, but the reader should refer to details elsewhere in the main page for the use of the various presentation modes.
There is another set of style-sheets built into the Opera browser. These are listed via the View / Style menu, and those that are selected are merged with user style-sheets. This can happen in any mode where user style-sheets can function.
The installation of each of the three kinds of user style-sheet is explained in the sections below.
Make a Blank user.css Style-sheet
Open Notepad, the Windows accessory.
Open the save-as dialog.
Ensure that the save directory is your documents folder.
Change the Save-as type: selector to All Files (*.*).
Enter the file name as user.css, making sure that any txt suffix is removed.
Press Save.
The user.css file need not have any styles in it before installation. Styles can be added by editing the file in Notepad at any future time.
Installing the User Style-sheet user.css
The Opera browser can be set to merge the Author and User styles in accordance with the full use of the CSS cascade, or it can be set for author styles only, user styles only, or no styles at all. These settings are made in the browser's Presentation Modes section, and a drop-box tutorial has been enclosed on the main page to explain exactly what each selection does.
To make use of and study the full five-rank cascade, a user style-sheet needs to be added to the browser. This section explains how to install the user style-sheet and at the same time sets the mode for the possible merging of all five style sources. The configuration does not distinguish between local web pages and external ones, so this setup is ideal for both local study and the style modification of pages made by others.
Installing Site-specific Style-sheets
A site-specific style-sheet is best thought of as an automatically applied substitute for the user style-sheet user.css. 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.
That is not to say that the specific sheet takes over all formatting on its own, but that it is cascaded in the usual way. It is true to say that an installed site-specific style-sheet will work 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.
There are issues in trying to install a site-specific style-sheet in Opera, but there is a way that works. It has been found that the only working method is to use the right-click menu while the site in question is already displayed on the screen. The procedure is:
Make sure that the user.css style-sheet is installed for the general case, whether or not it has any styles in it. If there is no such sheet then install one in accordance with the instructions elsewhere on the main page, and make sure that presentation mode in use has My style sheet selected. Make another style-sheet (with a different name) for your specific site. This sheet can have any reasonable name with a css suffix.
Display the page intended for site-specific styles
Right click the chosen page. Select Edit Site Preferences... then Display. This reveals the My style sheet address box. At this time the dialog applies only to the displayed site.
Enter the path to the intended style-sheet for that site, or find it by browsing.
Press OK to exit the dialog.
Reload the site to see the effect, and confirm that it is specific by selecting another site to see its unmodified styles.
The site-specific style-sheets will operate whenever there is a setting that allows the user.css style sheet to participate in the cascade, and the switching process will be automatic. Any number of different site-specific style-sheets can be made and for any number of sites.
If confusion is to be avoided, it is important to recall that the user set of style-sheets can be quite large.
The user style-sheet set is comprised of:
The user style-sheet user.css. There is only one of these, possibly applied to every site.
Site-specific style-sheets. There could be any number of these, but applied only to specific sites.
Opera's built-in style-sheets. About sixteen of these are selectable, and they apply to every site.
In general, style-sheets can be installed without having any styles in them at all, so the user.css sheet could well be empty when a site-specific test is in progress. The use of comment markings in style-sheets is useful for the temporary removal of styles that cause confusion.
To remove a site-specific style-sheet:
Right click the page while it is open and select Edit Site Preferences....
Choose Display and delete any file path in the My style sheet text box.
Press OK to remove the site-specific style-sheet.
In the event that the styles matter is still not resolved by its removal, the user should recall that there there might be a user.css style-sheet and built-in style-sheets under the user category. Also, if more that one user.css sheet exists, there might be further confusion.
Installing the Built-in Style-sheets
This group is perhaps the simplest to install and remove. The built-in style sheets will be added to the user set when they are selected in Opera's View / Style menu, and they are removed individually or collectively by their de-selection. For these and any member of the user set to apply, the My style sheet box must be ticked in whichever mode is in use.
Because settings made in either of the Presentation Mode columns will produce identical results, one column could be set up for normal work and another to include the user set. However, because selecting User Mode will also include any User.css and site=specific style-sheets, care is needed to ensure that their inclusion is intended.
Note that when the user mode is selected via the main browser menus, all of the selections in the User Mode column of the Presentation Modes will be applied. In fact, making the mode selection via the menus allows switching between the two modes without any need for a browser restart, whereas the similar mode switch in the Presentation Modes is a default setting, and will re-establish its selection at each re-start.
Removing the Various User Style-sheets
To remove the user style-sheet temporarily or otherwise, de-select the My style sheet box in the author column of Presentation Modes, then select OK at each dialog until you are out of the browser preferences. Note that when changes to the preferences other than the user style-sheet are made, it will be necessary to close the browser and reload the page before the changes can be seen.
In fact, because the de-selection of the My style sheet presentation mode will also prevent the use of built-in style-sheets and site-specific style-sheets, it might be as well to consider the use of comment markings within the user style-sheets for the temporary 'removal' of styles. In this way the one can be removed without affecting the other. The built-in style-sheets are more easily de-selected in the View / Style menu settings.
This section provides a sample web-document and its linked author style-sheet for testing table styles. At least, the text of each is given and it remains for the user to copy their contents into files of his own. The texts described are found in the drop-boxes below, identified as tables.css and table styles.htm, and making use of these files should save some time for those who have only a passing interest in the subject.
tables.css
/*Instructions*/
/*Copy the full contents of this text into Notepad*//* and call the file ''tables.css''.*//*Place ''tables.css'' and ''table styles.htm'' *//*in the same folder, for example, your documents folder.*//* STYLE-SHEET FOR TABLES: tables.css */body{font-family:"Bookman Old Style",serif;font-size:1em;line-height:1.6em;color:maroon;}div{background:linen;border:1pxsolidlightgrey;padding:15px;color:rgb(22,22,22);}#century{font-family:century;}#divtop{background:beige;}table{background:white;color:#000;border-top:1pxsolid#D3D3D3;border-right:1pxsolid#D3D3D3;border-left:1pxsolid#D3D3D3;border-bottom:2pxsolidgrey;border-collapse:collapse;font-size:.9em;margin:1em1em2em;}td,th{border-top:1pxsolid#D3D3D3;border-right:none;border-left:none;border-bottom:none;text-align:left;vertical-align:middle;padding:10px;}th{background:maroon;color:#FFF;font-weight:700;}table.withtext{max-width:50%;}table.withtexttd{vertical-align:top;}table.withtexttd:first-of-type{font-weight:700;width:20%;}table.withtextth{vertical-align:middle;font-weight:700;background:maroon;}table.colors{background:peachpuff;color:black;}table.rowstripestr:nth-child(2n+1){background:papayawhip;}table.rowstripestr:nth-child(2n){background:inherit;}table.withtotalstr:last-of-type{border-top:2pxsolidblack;background:salmon!important;color:white;font-weight:700;}#ptop{padding:015px015px;font-weight:bold;}p.dropcap::first-letter{/* selects the first letter of */float:left;/* paras with class ''dropcap'' */font-size:4em;line-height:0.8em;padding-top:4px;padding-right:4px;padding-left:3px;font-family:Georgia;}.centertext{text-align:center;}.lefttext{text-align:left;}.righttext{text-align:right;}.boxcenter{margin:1emauto2em;}.boxleft{float:left;margin:1em1em2em;}.boxright{float:right;margin:1em1em2em;}h1,h2,h3,h4,h5,h6{color:#000;background:none;font-weight:400;padding-top:.5em;padding-bottom:.18em;border-bottom:1pxsolid#aaa;margin:0;}h1{font-size:188%;}h2{font-size:150%;}h3,h4,h5,h6{border-bottom:none;font-weight:700;}h3{font-size:132%;}h4{font-size:116%;}h5{font-size:100%;}h6{font-size:80%;}ol{font-style:italic;}ol.lr{list-style-type:lower-alpha;}tablecaption,table.withrowheadstd:first-of-type{font-weight:700;}
table styles.htm
<!--Copy the full contents of this text into Notepad --><!-- and call the file ''table styles.htm''.--><!--Place table styles.htm and tables.css in the same folder, --><!-- for example, your documents folder.--><!DOCTYPE html><html><head><title>
Table Styles
</title><linkrel="stylesheet"href="Tables.css"type="text/css"media="screen"></head><body><h2>
Main h2 heading
</h2><pid="ptop"class="dropcap">
This paragraph is nested only between the <em>body</em>
tags, unlike others within <em>div</em> tags.<br>
Most of its styles are inherited from its parent.
</p><divid="divtop"><p>
This paragraph is nested between <em>div</em> tags, and
uses inherited and declared properties.<br>
The text is styled for font-family, font-size, color,
padding, and line-height.
</p><tabletitle="table 1"class="colors rowstripes withrowheads withtotals"><caption>
This table is styled with CSS, and with classes
declared in the table line...
</caption><tr><th>
Units...
</th><th>
Heading A
</th><th>
Heading B
</th><th>
Heading C
</th><th>
Heading D
</th><th>
Heading E
</th><th>
Heading F
</th></tr><tr><td>
First Row
</td><td>
1
</td><td>
2
</td><td>
3
</td><td>
4
</td><td>
5
</td><td>
6
</td></tr><tr><td>
Second Row
</td><td>
7
</td><td>
8
</td><td>
9
</td><td>
10
</td><td>
11
</td><td>
12
</td></tr><tr><td>
First Row
</td><td>
12
</td><td>
13
</td><td>
14
</td><td>
15
</td><td>
16
</td><td>
17
</td></tr><tr><td>
Second Row
</td><td>
18
</td><td>
19
</td><td>
20
</td><td>
21
</td><td>
22
</td><td>
23
</td></tr><tr><td>
Third Row
</td><td>
24
</td><td>
25
</td><td>
26
</td><td>
27
</td><td>
28
</td><td>
29
</td></tr><tr><td>
Totals Row
</td><td>
62
</td><td>
67
</td><td>
72
</td><td>
77
</td><td>
82
</td><td>
87
</td></tr></table></div><div><h3>
Sub h3 heading
</h3><p>
This paragraph is nested between <em>div</em> tags
also.<br>
It inherits some styles from <em>div</em>, and
<em>div</em> inherits some styles from <em>body</em>.
</p><p>
This is an ordered list with some styles for font and
label type:
</p><olclass="lr"><li>Pellentesque habitant morbi tristique...
</li><li>Aenean ultricies mi vitae est.
</li><li>Donec non enim in turpis pulvinar facilisis.
</li><li>Donec eu libero sit amet quam egestas semper.
</li><li>Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante.
</li></ol></div></body></html>
Make, Open, and Edit the Sample Files
Make Files for Testing
Make the table styles.htm File
Open Notepad, the Windows accessory.
Copy all of the text in the table syles drop-box to the clipboard.
Paste the contents into Notepad.
Open the save-as dialog.
Ensure that the save directory is your documents folder.
Change the Save-as type: selector to All Files (*.*).
Enter the file name as table styles.htm, making sure that the txt suffix is removed.
Press Save.
The htm file is made.
Make the tables.css File
Use the same method as above, with the exceptions;
Copy the contents of the tables.css drop-box into a new Notepad file.
Save the file as tables.css, in the same folder as table styles.htm.
These two files can now be used to study the effect of the style-sheet on the web document. Note that any number of such style-sheets could be referenced in the head section of the web-document, each with a separate link-tag entry.
Make a user.css File
Additionally, a user style-sheet could be made in the same way as for the tables.css example. If this is done, then it must be named as user.css. It need not initially contain any styles, and can be installed in accordance with the instructions in the drop-box labelled Installing User Style-sheets-Opera 12.16. User styles can be added to it in Notepad at any later stage.
Open and Edit the Files
First of all these points should be noted;
Saving and Caching
In general, an edited style sheet must always be saved before it can be applied to a page.
In general, an edited web-document must always be saved and reloaded before it can be viewed with its changes. To reload:
Press the reload button on the Opera tool-bar. If not displayed, the tool-bars can be configured with View / Toolbars / Customize...
Alternatively, press the Apply Changes button while on the Source window.
Re-open the web-page in the browser.
Developer utilities such as Opera's Source editor and Opera Dragonfly also allow temporary changes in a document to be viewed without saving.
At times the browser cache needs cleared before changes are seen. Choose any of these access methods:
Tools / Delete Private Data.... Clear all items except Delete entire cache, then press OK.
Tools / Preferences / Advanced / History. Press Empty Now, then Press OK.
Tools / Preferences / Advanced / History. Set the Empty on exit tick box, and restart the browser.
When Opera's preferences are changed, a browser re-start is usually needed.
All that is needed now to display the off-line web-page is to open the htm file in Opera. Because the author style-sheet tables.css is referenced in the head section of the document, it will be used to format the page.
To Open the Web-page
This can be done as follows:
In the relevant documents folder, right-click the htm file, then select Open with... / Opera Internet Browser.
Alternatively, set Opera as the default program for this file type. To do so, right-click the page, then Open with.../ Choose default program....
The web-page could also be set to open with a bookmark or a panel on speed Dial.
To Edit the Web-document
Since the htm file is just a text file it can be edited directly within Notepad. To do so, right-click the file in the documents folder then Open with... / Notepad. If it is done in this way the file needs to be saved before being opened again or re-loaded in the browser. However, there are some advantages to working on the file while it is open in Opera. For one thing, the effect of changes can be seen immediately, and the file need not be saved unless the effect is right.
To edit the web-document in Opera proceed as follows:
Open the web-page, then right-click the page. Select Source.
Make any modifications to the text in the editing window that opens.
When the changes are made, press the Source window's tool-bar button Apply Changes.
Select the tab for the main page to see the effect of the changes.
To save the changes permanently, press Save in the Source tab.
To Edit the Style-sheet
Like the htm file, the css file is just a text file and can be edited directly in Notepad.
This can be done as follows:
In the relevant documents folder, right-click the css file, then select Open with... / Notepad.
If it is not already consider making Notepad the default program for 'css files.
After making changes, save the file, and for convenience, minimize it to the task-bar.
Reload the web-page to see the result. Any of the following methods could be used to do this:
Press the reload button on the Opera tool-bar. If not displayed, the address tool-bar can be customized to include it.
Alternatively, press the Apply Changes button while on the Source window, then select the main page tab.
Figure 1: The main parts of the Opera Dragonfly display, with markings for the buttons mentioned in these notes.
The Opera Dragonfly utility is a part of the Opera browser. It allows the user to study the styles used for any web-page, and can make interactive style changes to the local copy. It occupies a part of the screen along with the web-page under study.
A full description of the utility is not possible here, but for those seeking more information, refer to the Opera page Opera Dragonfly Documentation. Some of its facilities are listed in the sub-sections below.
There are two methods that can be used to open the program:
From the Opera drop menus; proceed to Tools / Advanced / Opera Dragonfly.
By right-clicking a part of any web-page; then selecting Inspect Element from the right-click menu opens Dragonfly with the element highlighted in document code and all of its relevant styles displayed in a separate panel.
Note that when the web-page is changed, Dragonfly must be restarted to purge the data of the previous site.
The general settings for Dragonfly's use are accessed from the right-hand button menu. The facilities in use however, are chosen using the buttons on the left side of the window. The following mode settings are recommended for the study of styles, and are assumed for the majority of the points that follow: With Dragonfly open:
Select Documents in the main button menu.
Choose Select an element on the page to inspect it from the Documents sub-menu.
Choose Highlight selected element from the Documents sub-menu.
Choose Expand the DOM tree from the Documents sub-menu.
To view the HTML web-document and its relevant style-sheets.
To view the HTML code of the web-page: If it is not already selected, choose Documents from Dragonfly's main buttons menu. The code of the document appears in the left-hand panel, with a choice of layouts determined by the chosen buttons. Then, single-clicking an element of the document will select it. When this is done, the web-page will be highlighted for that element and the relevant selector is shifted to the top of the styles display.
To view the style-sheets and scrips in use: When styles are displayed in the right-hand panel, the source of each style-block is shown with a link to the style-sheet itself. Simply follow that link to open the style-sheet. Alternatively, use the Resources button on the main buttons menu to access all such features.
To modify the web-document: With the document open in the left-hand panel, double-clicking an element opens it for editing. Both text and structure can be changed in this way with an immediate update of the web-page during the changes.
Opera also allows viewing and saving of a web-document with the browser's right-click menu item Source
To study the styles used for an element of a web-page: For all of the features discussed here, first make sure that the buttons Select an element on the page to inspect it and Highlight selected element are selected in the Documents sub-menu. These two buttons allow the graphical interaction between the various panels of the program and the web-page itself. For example, when some part of the screen or the document panel are clicked with the mouse, then the following can be expected:
The clicked element of the web-page is highlighted.
The tag sequence for the selected element is displayed on Dragonfly's footer.
The element's location is highlighted in the document code of the left-hand panel.
The cascaded styles are displayed for that element in the right-hand panel, and its contents include or access these features:
Style sources, inheritances, and computed values.
The full properties set that applies to that element.
The addition of the browser's initial values.
A layout of the element's box model.
Search facilities for document text and selector interactions.
Facilities to change the styles of the active page.
When Dragonfly is not yet open, right-clicking a page element, then selecting Inspect Element will initiate similar actions.
To modify the styles used for the active page: Select the buttons as in the Study of Styles section. These changes are implemented immediately on the web-page, and of course affect only the local display:
To edit the cascaded CSS styles: A selection of typical actions includes:
Remove a CSS property from the cascade. Select Styles in the right-hand panel. Tick-boxes are revealed for each declaration when hovering over them with the mouse. Simply clear a tick-box or select it to remove or add the declaration to the cascade of styles. The effect of doing so will be shown immediately on the displayed web-page.
To edit an existing style declaration. Again, in the right-hand panel, and with Styles selected, Double-click a declaration to edit it like a text box. The result will be seen on the web-page in-process, though this feature is not available for User Client Style-sheet entries.
To add entirely new style-blocks. On the Styles tab of the right-hand panel, scroll to the bottom of the styles listing. Enter style-sheet blocks into the text box there and press Apply to show the result on the web-page. The new entries will be merged with the cascaded set, with due regard to their importance rank and specificity, and their source order is taken as if applied at the end of the cascaded set. The Apply button can also restore the page when such an addition is deleted.
To modify the web-page itself. The best way is to right-click the web-page and select Source. This opens the web-document for editing. It can be saved as a local copy with the Save button of the source page, and the changes can be applied to the web-page for immediate viewing with Apply Changes.
To search for web-page features. In each case a list is returned with an item count. Two important uses include the following:
To find text of any kind within the web-page. On the right-hand panel select Search and then in the button list that appears, select Text. Enter a search word or phrase into the text box to obtain a list of search results. Selecting any of the listed results highlights its location in the document code of the left-hand panel.
To find a list of selector targets: That is, find all the parts of the web-page whose styles will be affected by a given selector. On the right-hand panel select Search and then in the button list that appears, select Selector. Enter a selector name into the text box, either an existing selector name or a proposed one, to obtain a list of the targeted elements for its styles. Selecting any of the listed results highlights its location in the document code of the left-hand panel, and in addition highlights the affected element on the web-page itself.
A selection of brief tutorials is given below. The intention is to provide short pieces that instruct in the basics of the subject matter, rather than indulging in lengthy discourse. There is a listing on the use of style-sheet selectors, and an explanation of specificity and some other things.
For those who intend to study CSS by changing the content of style-sheets and web-documents, it may be as well to issue a standard reminder about the caching of files.
When a browser preference (option) is changed a browser re-start is most often needed before it can take effect.
When a web-page or a style sheet is changed, the expected changes are unlikely to be seen unless the browser cache is first cleared and the page re-loaded. Much confusion can result if this point is overlooked. The cache-clearing methods for each browser are different, but there is usually a feature within the browser's preferences (options). Sometimes drop-menu items provide for faster cache clearing, but at other times it may be necessary to set the options to clear the cache on closure, then restart the browser to display the change. For the Opera browser examples below, the most convenient way to empty the browser cache is by the use of the drop-menu item Tools / Delete Private Data...
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:
p {font-size: 10pt;}
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:
p, div, table, ul {padding: 1em}
When we intend to write declarations for every tag on the page, we can use the universal selector, the asterisk, like this:
* {font-family; Arial, Sans-serif}
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:
div p {line-height:1.8em;}
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;
.thetop {font-family: Arial;}
And to apply these styles to say, a paragraph tag in a document we can write the declaration in the document as:
<p class="thetop"> Some paragraph text </p>
When the following two classes are declared together in the same element, the styles of the two individually defined classes will be merged:
<div class="firstpara headings">The text</div>
If the selector is written as shown below, the styles will be applied only to elements where both classes are declared:
.firstpara.secondpara{}
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:
#Tailpiece {color:gray;}
and we declare the ID for use in the document with say;
<div id="Tailpiece" >This is the text </div>
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:
div p {padding: 1em;}
and it would be applied when the tags in the document look something like this:
<div><p>The is the text</p></div>
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:
div p.firstpara {background:green}
div p#tailpiece {font-size:30pt}
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:
[title="CSS Work"] {color: blue}
To select any element with the sub-string able in the value of its title attribute, we write:
[title*="able"] {color: red}
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:
a:active {color:purple}
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:
p:first-letter {font-weight:bold}
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:
table td:first-of-type{font-weight:bold;}
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:
table tr:nth-child(odd) {background: #FFF;}
This next example colors every table's even rows.
table tr:nth-child(even){background:linen;}
The third example shows the general form for table row coloring; this case colors every third row starting with row number two:
table tr:nth-child(3n+2){background: grey;}
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.
These are declarations in user, author, or any other style-sources with high priority. See page for details:e.g.
p{font-weight:bold !important;}
Selectors and Nested Tags
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><pclass="class1">Second paragraph</p><ol><liid="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.
Usually, with practice, the web-page builder can see the relationships within the tag sets by simple inspection, but here the nested tag pairs will be listed and explained. In the extract above, the h2 tag that is nested within a division has ''four'' possible nestings, and these imply that there are four possible ways to write selectors that ''include that tag''. That is to say, ''on its own'' or set ''at least somewhere'' between complete tag pairs.
In Figure 2 can be seen all of the possible selectors that could apply to the extract of Figure 1, with the exception of those that include the universal selector and the omitted root element <html>. Any selector that works at all can be made by joining a trail of selectors that ends with the target tag. The set that is produced should be space-separated, but need not include any more that is needed to obtain the required specificity, and any tags within the sequence could be omitted. The examples below show the simple selectors that might be written for the first heading tag of Figure 1:
The four case are:
1. The trivial case...
The tag on its own... A style-sheet selector h2 would target the first heading with a specificity of 1. Such a selector would also affect every other h2 heading as well.
<h2>First Heading</h2>
2. Nested within the div tags... A style-sheet selector div h2 would also target the first heading, this time with a specificity of 2. This selector could affect only the first heading since the second one is not nested within any div tags.
<div>
<h2>First Heading</h2>
</div>
3. Nested within body and div tags... A style-sheet selector body div h2 would target the first heading, with a specificity of 3. Because the second heading is not nested within a division, this selector could affect only the first heading.
<body>
<div>
<h2>First Heading</h2>
</div>
</body>
4. Nested within body tags...
Notice that even with intermediate tags ignored, that this is considered nesting too. A style-sheet selector body h2 would target the first heading with specificity 2. Because both headings are nested in the body, it would affect them both.
<body>
<h2>First Heading</h2>
</body>
The addition of classes and id declarations to the target tag would allow for more specific targeting of styles, perhaps avoiding any confusions that might otherwise arise. Doing so also greatly increases the number of ways to specify selectors. The section below provides an example that includes such declarations. In the interests of learning, it lists a few of the selector formats that could be encountered for a typical paragraph tag, though not all of these are the best choices for doing so.
Selectors with Classes and Id's
Figure 3: An HTML extract for the example with declarations.
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.
Figure 3 shows a fairly usual arrangement of tags where a paragraph is nested within a division tag set, and all of that is assumed to be within the body tags of the web document. In addition, note that there are declarations within the paragraph tag; one id, two classes and an in-line style. The division tag has declared an id within it. The addition of these declarations allows a large number of variations in the available selectors for the second paragraph, though from the theoretical sixty-four variations, only about twenty or so will ever find much use.
Notice also that there is another paragraph tag, but it belongs to a different nest. It is simply nested within the body tags and has no connection with the division tag pair. When styles are written for paragraphs, some styles will affect both of these paragraphs and others will affect only one or the other.
Refer to Figure 3. Any or all of the following selectors could be used to list styles for the second of the two paragraphs, the one with all the declarations. A note is provided for the cases where the first paragraph tag would also be affected.
p
A general paragraph selector. Also affects the first paragraph. Specificity=1.
div p
For a paragraph within division tags. Specificity=2.
body p
For paragraphs within body tags, where there is optionally some tag(s) in between. Also affects the first paragraph. Specificity= at least 2.
body * p
For paragraphs within body tags, where there is necessarily some tag(s) in between. Also affects the first paragraph. Specificity=2.
body div p
For paragraphs within division tags and the division tags themselves within body tags. Specificity=3.
.class1
For any element that includes the declaration class= ”class1”. Specificity=10
.class2
For any element that includes the declaration class= ”class2”. Specificity=10
p.class1
For a paragraph that includes the declaration class= ”class1”. Specificity=11
p.class2
For a paragraph that includes the declaration class= ”class2”. Specificity=11
.class1.class2
For any element that has a declaration class= “class1 class2”, with both together. Specificity=20
p.class1.class2
For a paragraph that has a declaration class= “class1 class2”, with both together. Specificity=21
div p.class1
For a paragraph with declaration class="class1" that is nested within division tags. Specificity=12
div p.class2
For a paragraph with declaration class="class2" that is nested within division tags. Specificity=12
div p.class1.class2
For a paragraph with declaration class="class1 class2" that is nested within division tags. Specificity=22
body div p.class1
For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1”. Specificity=13.
body div p.class2
For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class2”. Specificity=13.
body div p.class1.class2
For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1 class2”. Specificity=23.
body p.class1
For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1”. Specificity=12.
body p.class2
For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class2”. Specificity=12.
body p.class1.class2
For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1 class2”. Specificity=22.
#someid
For any element with a declaration id= “someid”. Can be declared only once on the page and an element can list only one of them. Specificity=100
#topid p
For a paragraph that is nested within any element with a declaration id= “topid”. Optionally, there could be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects both paragraphs in this case. Specificity=at least 101
#topid * p
For a paragraph that is nested within any element with a declaration id= “topid”. Necessarily, there must be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects only the second paragraph here. Specificity=101
*
Every element that is capable of displaying the added styles. Affects both paragraphs. Specificity =0
An in-line style within the paragraph tag
Where a paragraph contains a style declaration. Specificity=1000
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).
Specificity - Calculated Examples
p { }
Total=1, because there is only one simple tag element for the selector.
div p { }
Total=2, because there are two tag elements (2).
p.topsection { }
Total=11, because there is one tag element (1), plus one class (10).
#toppara { }
Total=100, because there is one ID selector (100)
div table p#green { }
Total=103, because there are three tag selectors (3), plus one ID (100).
style="float:left;"
Total=1000, because there is an inline style (1000)
a:hover { }
Total=11, because there is one tag element (1), plus one pseudo-class (10).
p:first-line { }
Total=2, because there is one tag element (1), plus one pseudo-element(1).
p[title] { }
Total=11, because there is one tag element (1), plus one attribute(10).
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.
Simple Inheritance
<!-- Figure 1 --><html><bodystyle="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).
Inheritance with Relative Values
<!-- Figure 2 --><html><bodystyle="font-size:16px; line-height:1.5em;"><divstyle="font-size:1.25em; line-height: 1.6em;"><pstyle="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).
The Use of the Initial Value
<!-- Figure 4 --><!-- Assume that the browser default font-size is 16px --><html><bodystyle="font-size:1.5em;"><divstyle="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.
Systematic Deduction of Inherited Value
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 Style Errors
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 in Style-sheets
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 in HTML Document Pages
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 CSS and HTML
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.
The URL Path
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.
About @import
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";@importurl('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 Inheritance
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.
Attribute Priorities
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.
Attribute Disuse
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.
