Help with Style Precedence

Hello guys, I was wondering if you can help me with this style precedence question:

What are inline, embedded, and external styles?. What is the order of precedence? and which one trumps the other?. How one will override the other?

Thanks in advance for the help!

 

inline are like:

<a href="#" style="border:#00CC00;">link</a>

Code (markup):

embedded are like this:

<title>Some Page</title>
<style type="text/css">
<!--
body {
	font-family: "Courier New", Courier, monospace;
	font-size: 10px;
	color: #000000;
}
-->
</style>
</head>

Code (markup):

Linked external sheets are like this:

<title>Some page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

Code (markup):

Styles.css would contain:

body {
	font-family: "Courier New", Courier, monospace;
	font-size: 10px;
	color: #000000;
}

Code (markup):

Inline always takes precedence over embedded or external sheets.
Embedded always takes precedence over external sheets.

You should avoid inline styles if you can. I personally always use external sheets.

Hope that helps!

 

Thank you! All this information really helps me.
Have a nice weekend!

 

Also,

browsers have their own stylesheets too, though many people don't use them (and if they do, it's mostly for text-enlargement). These take precedence over ALL other sorts of styles.

Within a stylesheet, usually the most specific thing overrides the less specific thing.

(after doctype, head, body)...
<div id="foo">
  <h1>Foo Man <span>CHOO</span></h1>
</div>

Code (markup):

CSS:

(after other CSS)...
span {
  color: green;
}

h1 span {
  color: yellow;
}

#foo h1 span {
  color: red;
}

Code (markup):

In the above, the colour of the text in the span will be red, as red is specified in the most specific manner.

And, the last thing specified can also take precedence:

span {
  color: red;
}

span {
  color: blue;
}

span {
  color: green;
}

Code (markup):

Here, the colour will be green because it was the LAST thing on the stylesheet (and none of them was more specific than the other).