COMPUTATION AND PROBLEM SOLVING
EXERCISE 11: INTRO TO CSS: THE INHERITANCE, THE CASCADE, AND
THE SPECIFICITY WARS
Name: ____________________________________
PURPOSE
The purpose of this exercise is to learn the basics of how to write CSS. We will learn about the three possible
places where CSS can be written, the proper syntax for writing CSS rules, our first CSS property (color), how to
target HTML elements for CSS rules, and finally we will learn about the cascade, inheritance, and how to win the
specificity wars.
ACTIVITIES
Perform each of the following activities. It is important that you perform these steps in the specified order. If you
have questions, issues, or doubts, please ask for help and do not just guess.
1) Unzip the file C11_ Exercise11_Baseline.zip
2) Open the C11_ Exercise11_Baseline folder in Brackets and make the following changes to the style.css file:
a) It is time to write our first CSS rule:
i) div { color: green; }
b) That was pretty easy. We targeted all of the divs in index.html and gave them a rule that states that
their text color is green, and all of the text on the page is now green. Wait a second — a div is a block-
level container element that does not actually have any text to turn green. What happened? Why is all
of the text green?
c) Inheritance
i) All of the text in this file is inside of div containers, so by setting the text color of the divs to green
the text objects have inherited the color green. Think of the divs as the parents and the text
elements as the children — the children have inherited their green color from their parents.
d) Let’s write our second rule:
i) div { color: red; }
(1) Now all of text is red. Why?
e) The Cascade
i) This is a big one. CSS actually stands for Cascading Style Sheets. This simply means that rules
cascade like a waterfall, and the latest rule in a style sheet takes precedence over the previous
ones. Let’s try writing a couple more rules that demonstrate the cascade:
ii) div { color: blue; } — all of the text will turn blue
iii) div { color: #ff0000; } — all of the text will turn red. (Notice instead of writing the word red we used
the hexadecimal code for red.)
f) Now let’s fight some specificity wars!
i) In the index.html file, there is an opening and closing <style> tag in the head section. Write the
following rules between these tags:
ii) div { color: yellow; }
