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:

   1. It is time to write our first CSS rule:

      1. div { color: green; }

   2. 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?

   3. Inheritance

      1. 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.

   4. Let’s write our second rule:

      1. div { color: red; }

         1. Now all of text is red. Why?

   5. The Cascade

      1. 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:

      2. div { color: blue; } — all of the text will turn blue

      3. div { color: #ff0000; } — all of the text will turn red. (Notice instead of writing the word red we used the hexadecimal code for red.)

   6. Now let’s fight some specificity wars!

      1. In the index.html file, there is an opening and closing <style> tag in the head section. Write the following rules between these tags:

      2. div { color: yellow; }

1. What happened? Why?

1. Embedded styles

   1. As you may recall from the CSS Specificity Wars card game, the embedded style was the third most powerful card in the deck. Embedded styles will always overrule styles from an external style sheet.

2. Now let’s give the first div within the <main> tags the following inline style:

   1. <div style=”color:#f00;” id=”mydiv”> (notice the short-hand hexadecimal code for red)

   2. What happened? Nothing? Wait, I thought inline styles were more powerful than embedded styles?

3. Specificity

   1. Yes, inline style may be more powerful selectors than embedded styles, but our embedded style applies to all of the divs whereas the inline style has only been applied to the outer most div. Therefore, our embedded style is more specific to the text elements than the inline style. Specificity wins!

   2. Now let’s fix this by applying the same inline style to the inner-most div:

      1. Example: <div style=”color: #f00;” class=”myclass3”>

4. Now, let’s ensure this rule can never be overruled by including the !important property

   1. Example: <div style=”color: #f00 !important;” class=”myclass3”>

   2. Great, the style on this div now has a specificity ranking of 1-1-0-0-0-0. The color of the text on this page is going to stay red! Let’s watch this style beat up a lowly universal selector on an external style sheet. In other words let’s watch a 1-1-0-0-0-0 selector destroy a 0 selector by writing the following rule in our style.css file:

      1. * { color:#000;}

   3. What happened? How could a lowly universal selector in an external style sheet overrule an inline style with an !important property?

5. Specificity wins again!

   1. The lowly universal selector won, because it targeted the text elements directly, whereas the text elements only inherited the inline color style from their parent element. Apparently, inheritance will get you only so far!

1. The main point behind this exercise is that CSS specificity can be confusing and frustrating, but we can eliminate a lot of this confusion by:

   1. Not using inline and embedded styles. It is much easier to keep track of your CSS styles if they are all in one centralized place that is separate from our HTML code.

   2. Avoid using the !important property. This property disrupts the natural flow of CSS by giving a rule more power than it deserves. The most common use of the !important property is to override an inline or embedded style, but it is much better to take the time to move all of the CSS into a neatly organized, and commented, external style sheet than to have your files littered with !important declarations because you cannot figure out how to otherwise style your HTML elements.

   3. Use CSS comments in your external style sheets to clearly explain what your markup is doing.

   4. Use element, class, attribute, and pseudo-class selectors as much as possible. The idea is to take advantage of inheritance and the natural flow, or cascade, of CSS as much as possible. Powerful selectors are very disruptive to inheritance and the cascade, and their use may require more markup and a site that will be more difficult to maintain.

2. Let’s write a few more rules in style.css

   1. First, let’s write our first CSS comments (Note, comments can single or multi-line)

      1. Example: /* This is a CSS comment */

   2. Now, write a rule that will make the <h1> tag red

   3. Make the <p> tag blue

   4. Make the <a> tag with the green title attribute green

   5. Make the <a class="yellow"> tag yellow

   6. Make the <a> tag with orange id orange

   7. Finally, make all of the <a> tags (just the <a> tags!) turn red when the user hovers on them. Hint: You may need to group multiple selectors to make ALL of the links turn red on hover.

      1. Example: div p, ul li { color: purple; })

      2. Why did we need to group multiple selectors to make all of the links turn red on hover?

3. Save your work to a zip file and upload it to the LMS.