Cascade Template
This is a h2 tag and is styled by the external/global/linked style sheet
only which has color=aqua, font family=Comic Sans, background color=gray and italics
This is a h1 tag which has an "inline" style. It is typed directly into the tag.
This inline style controls the look of the h1 tag and it takes precidence over embedded/document styles and external or global or linked style sheets.
It says be purple and be 18px.
This is a h3 tag and is controlled by 3 styles: external/linked, embedded/document and inline.
-
the linked style says - be aqua, have a gray background and display in italics
- the embedded/document style (which is in the head of this document) says - be orange and use Verdana font. The font family rules over the external style sheet which says be Comic Sans
- the inline style says be fuschsia and 18pixels so this trumps the orange and the aqua and the inherent size.
The styles conflict with regards to the color, and so the browser decides who to follow by an order of precedence.
An inline style overrules an embedded/document style which overrules a linked/external/global style.
The large 18 pixels is displayed because the inline style sets that value. The gray background comes from the external/linked style sheet.
I do everything in my power to keep the Times font out of my documenmts
This h1 tag is styled by the external/linked and the embedded/document styles
This tag is controlled by 2 styles: linked and embedded.
-
the linked style says - be aqua, have a gray background and display in italic
- the embedded style which is in the head of this document says - be orange and display in small caps
- There is no inline style... yet
- The size is controlled by the browser which is why it is large and the purple one above is smaller
The styles conflict with regards to the color, and since an embedded style overrules a linked style the color is orange and the font is in caps.
The gray background and italic formatting and font family of Comic Sans come from the linked style sheet.