There is an epic battle occuring on this page. There are four types of styles duking it out over the right to control the elements on it. Let me introduce you to tonight's competitors:
When you rely on the browser to style your page you are letting the browser walk all over your code. You don't want the other pages out there on the world wide web thinking your page is just a big wuss that the browsers treat like a doormat. No one will take your page seriously if you let that happen. The default got a few good punches in while the other styles weren't looking but overall he is a long shot in the Style Smackdown. He was only able to control the font color of the ordered list near the top of this page and as usual he chose black.
The heavyweight favorite tonight. He can control pages all across a site with just one rule. He is by far the crowd favorite but he has to make sure those other pesky styles don't slip in between him and the code. He was able to dominate tonight's event by controlling the font color of all but one of the headings and three of the paragraphs, making them a nice navy blue. He also has control of the font family throughout the entire page, even for the paragraphs that the other styles were able to make changes to. He is kind of a show off so he decided to throw in a background color just to intimidate the other styles.
The Embedded Style has to get past The External Style Sheet in order to gain a foothold but don't count him out quite yet. He was able to get control of the font color of this paragraph and turn it green. He forgot however to change the font family so The External Style Sheet still has control of that.
Inline Style is a sneaky little fella. He doesn't look very powerful. After all, he can only control one element at a time depending on which tags he is able to sneak into. On the other hand, he is closest to the code and once he has infiltrated a tag all the other styles are helpless to stop him. He turned this here paragraph a pretty purple color.
* The Browser Default is trying to make the font color black. The External Style sheet is trying to make it navy blue with a font family of Verdana. is trying to make it green with a font style of italic. The Inline Style climbed over top of everyone while they were busy struggling with each other and succeeded in making the font color purple. Default Browser just got stomped and wasn't able to change the font color, font style, or font family. Although he was able to control the font weight and size. External Style Sheet was able to hold on to the font family, making it Verdana but his font color of navy blue got over ruled by both and then Inline Style. was able to sneak past Browser Default and External Style Sheet and for a moment there his font color of green was in the lead. Then Inline Style jumped over everyone and turned the font color purple. However, he was so focused on his font color win that he forgot to over rule the font style so was able to turn it italic even though Inline Style was closer.
