CPSC415A
Web Programming

Specificity

p {
    background-color: blue;
}

p.red {
    background-color: red;
}


div p {
    background-color: green;
}

div > p {
    background-color: yellow;
}

Inheritance

<div>
    <p>
        <a href="#">something</a>
    </p>
</div>

a {
    font-color: red;
}

p {
    font-color: green;
}

div {
    font-color: blue;
}

body {
    font-color: yellow;
}

Cascade

p {
    font-color: red;
}

p {
    font-color: blue;
}

<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
<style>p {font-color: green;}</style>
<style>p {font-color: yellow;}</style>
<p style="font-color: cyan;">something</p>