Intro to CSS Solutions

Warm Up

It’s recommended that you make an anchor chart with some of the ideas that get shared out. That way, time isn’t wasted trying to think of an idea.

Try It: Add Some Color

See the Pen Try it: Add Some Color by Turing KWK (@turing-kwk) on CodePen.

Try It: Add Classes

See the Pen Try it: Add Classes by Turing KWK (@turing-kwk) on CodePen.

What happened to the paragraphs? Is that what you expected? Talk with your partner about why this may have behaved this way.

  • The paragraph with the class followed the rule for background color, but kept its font color.
  • This happened because rules written for classes take priority over rules written for elements. Similarly, rules written for IDs take priority over rules written for classes.

Turn & Talk

<div>
  <p>Space is completely silent.</p>
  <p class="space-fact">Nobody knows how many stars are in space.</p>
  <p class="space-fact" id="nasa-suit-cost">A full NASA space suit costs $12,000,000.</p>
</div>

p {
  color: darkred;
}

.space-fact {
  color: slategrey;
}

#nasa-suit-cost {
  color: midnightblue;
}

Looking at the HTML and CSS above, what color do you predict each paragraph will appear?

  • Paragraph 1 will be darkred
  • Paragraph 2 will be slategrey
  • Paragraph 3 will be midnightblue

Based on what you know about the syntax for rules for classes, what do you think the syntax for IDs is?

  • Use a # before the ID name

Try It: Borders

See the Pen Try it: Borders by Turing KWK (@turing-kwk) on CodePen.

Try It: Sizing Images

See the Pen Try It: Styling Images by Turing KWK (@turing-kwk) on CodePen.

Try It: Does Order Matter?

Order of Rules:

  • CSS stands for cascading style sheets
  • If you write two conflicting rules, the rule written lower on the sheet will override the rule higher on the sheet. In the example below, the p will be orange.
p {
  color: red;
}

p {
  color: orange;
}

Order of property/values in a rule:

  • Very rarely, you will see a conflict, but it usually doesn’t matter. Like the previous point, if you have a conflicting property/value, you will see the rule written below will override the previous one. In the example below, the p will be green.
p {
  color: pink;
  color: green;
}

Practice: CSS Rules

See the Pen Practice: CSS Rules by Turing KWK (@turing-kwk) on CodePen.