This is a regular paragraph with paragraph styling The green color specified in the p tag in the style section, overrides the color style from body.
This paragraph is a member of a class This color from .myClass overrides the body style.
This paragraph is a member of a class and has an ID, both with style rules. The myClass style color definition is overridden by the ID color definition.
Note this paragraph uses the style from the external style sheet, and it is not affected by the body tag or any other style in the page-line style.
Note the 3 formats for the header. The first one is from the external style sheet. The second one used inline style definition to show that body style did not overwrite the external style sheet. The third header just used text without any tags; therefore it adopted the style defined in the body tag.
The question is this: What color will the whatColor element display? It's a member of the body, so it should be red. It's also a paragraph, and paragraphs are green. It's also a member of the myClass class, so it should be blue. Finally, it's named whatColor, and elements with this ID should be purple.
Local style: A local style (defined with the style attribute in the HTML) has the highest precedence of developer-defined styles. It overrules any other styles.
id : A style attached to an element id has a great deal of weight because it overrides any other styles defined in the style sheet.
The element style takes precedence over any of its containers.
Container element: divs, tables, lists, and other elements used as containers pass their styles on. If an element is inside one or more of these containers, it can inherit style attributes from them.
This example uses the purple note (class = n5), but I changed the color to green, and left all other style definition unaltered. Note that it is not really true for the margin-left of 100px. It counts the 100px based on the red (class = n2) margin-left: 40px To see how it works I will add a red paragraph after this paragraph.
When you have styles defined in various places (locally, page level, or externally), the placement of the style rule also has a ranking. Generally, an external style has the weakest rank. You can write a page-level style rule to override an external style.
It seems that margin-left definition did not turn out the way I expected.
Page-level styles (defined in the header) have medium weight. They can override external styles but are overridden by local styles.
Finally, I use the n5 class for p from the external style sheet, and compare it to others previously used. Note this is further indented than the first purple paragraph, and the green paragraph.
One more observation: When I increase the page display wider, the margins seem alright in IE, but not in Chrome.