HOW DOES THE BROWSER APPLY CSS RULES?
Figuring out exactly how some information on a page is styled can be a tricky process. There are two issues you need to keep in mind:
(1) which tag's rules to apply and (2) what are the CSS settings that take effect for a particular type of tag.
Once you know which tag's rules to apply, you must then systematically figure out which CSS settings are applicable
for that type of tag. (Once you understand all of the following rules, try to understand the example below.)
Part 1 - Figure out which tags' rules to apply
The first thing that you need to do is figure out which tags contribute to the styling of the information in question. In general CSS rules are applied based on the closest tag to the information being styled. Theoretically, all tags that contain the informtion have an effect on the styling of that information. This is true whether the information appears directly inside a tag or is nested several levels deep inside the tag. However, the rules for "closer" tags will override the rules for more "distant" tags.
Example: To figure out the CSS rules that apply to the word "Hello" in the following document follow the steps listed below:
<body> ... <p> ... <strong> ... <em>Hello</em> ... </strong> ... </p> ...<body>
- First apply rules for body and compile a list of settings.
(To figure out which settings apply for the body tag, follow the steps listed below under STEP 2)
- Then apply rules for the p tag overriding any existing settings
(To figure out which settings apply for the p tag, follow the steps listed below under STEP 2)
- Then apply rules for the strong tag, overriding any existing settings
(To figure out which settings apply for the strong tag, follow the steps listed below under STEP 2)
- Then apply rules for em, overriding any existing settings
(To figure out which settings apply for the em tag, follow the steps listed below under STEP 2)
- What you are left with are the settings that are used to actually display the word "Hello"
Part 2 - Figure out which rules apply for a particular type of tag
- Start at the top of the HTML document
- Look for all <link> and <style> tags
- Create a list of all the rules from the linked files and style tags in the order they appear in the html document.
- Look for the rules for a tag starting from the top of the list you compiled
- Settings in rules that appear later in the list override settings in rules that appear earlier in the list
- Settings in "inline" rules override settings from all other rules from the list, e.g. <p style="color: blue; background-color: yellow;"> ... </p>
CSS Cascading Example
This example uses two files. Click on the links below to see the files.
By studying the HTML and CSS code carefully you should be able to figure out the color, background-color and font-size for each word that is displayed on the web page. The following Microsoft Word document contains a table to fill in the actual values. Some of the values were filled in already to start you off: