<style>
/*Base css*/
h1 {
color: black;
text-align: center;
}
/*First ID overrides base H1 CSS*/
#id {
color: grey;
}
/*Second ID also overrides class CSS*/
#id2 {
color: blue;
}
/*Base CLASS CSS - overrides base H1 CSS*/
.class {
color: red;
}
/*This ID3 is being overridden by inline-styling*/
#id3 {
color: yellow;
}
/*Overrides base CLASS because it comes sequentially after .class in the CSS style sheet
Notice that this does nothing to the class wrapped in the DIV #WRAPPER*/
.class2 {
color: brown;
}
/*This uses hierarchical references overriding base H1*/
#wrapper h1 {
color: purple;
}
/*This does nothing because #WRAPPER .CLASS is after this in the style sheet*/
#wrapper .class3 {
color: skyblue;
}
/*This overrides #WRAPPER H1 using a class*/
#wrapper .class {
color: orange;
}
/*!Important trumps everything unless there is an !IMPROTANT in hierarchical precedence or inline styling*/
.class4 {
color: pink!important;
}
</style>
<html<
<h1 id="id">1st Heading</h1>
<h1 id="id2" class="class">2nd Heading</h1>
<h1 class="class">3rd Heading</h1>
<h1 class="class class2">4th Heading</h1>
<div id="wrapper" class="div">
<h1>5th Heading</h1>
<h1 class="class class2">6th Heading</h1>
<h1 class="class class3">7th Heading</h1>
<h1 class="class class4" style="color:black!important">8th Heading</h1>
</div>
<h1 id="id3" class="class" style="color:green;">9th Heading</h1>
</html<