Intro to CSS Notes

CSS.md

Introduction to CSS Notes

Objectives

• Explain what CSS is.
• Explain why CSS is important.
• Explain what a CSS rule is.
• Link a CSS file to an HTML document.
• Explain how specificity works in CSS.
• Practice using CSS properties and values to change styles

Guiding Questions

• What is CSS, and why is it important for making websites?

  Your answer...

• What is a CSS rule? Identify the 4 main parts: selector, declaration, property, & value.

  h1 {
    background-color: blue;
  }

  Your answer...

• How do you select all p elements on the page?

  Your answer...

• How do you select all span elements that are inside of p elements on the page?

  Your answer...

• How do you select all elements with a class of .blue that also have a class of .bold?

  Your answer...

• What are some of the properties you can use to style text?

  Your answer...

Explain how specificity works in CSS

Given this html:

<div id="main" class="container">
    <article id="content">
        <ul class="top-list">
            <li class="list-item">Item 1</li>
        </ul>
    </article>
</div>

and this CSS:

div article ul li {
    color: gold;
}

.container > #content li.list-item {
    color: forestgreen;
}

#main #content li {
    color: hotpink;
}

.container .top-list .list-item {
    color: darkorange;
}

What will the color of the li be?

Take a minute to think about your answer, then share with your neighbor.

Your answer...

Practice using CSS properties and values to change styles

Take a few minutes to research the categories bellow. Writing example code or demos may help. Write a short definition answering the question and be prepared to share your findings with the class.

1. Dimensions: What do rem units mean? How might they be useful?
2. Element Display: What is the difference between display inline vs block, vs inline-block?
3. The Box Model: What is the box model? How do content-box and border-box differ?
4. Floats: What do the float and clear do properties?
5. Positioning: Define the four types of positioning (static, relative, absolute & fixed).
6. Pseudo-Classes: Define a pseudo-class in your own words. How does the :nth-child() pseudo-class work? What about :hover?
7. Colors: Describe the four main ways of defining color in CSS.

Stretch topics:

1. Flexbox: How does the flexible box layout (flexbox) help with centering elements on two axis?
2. Media Query: What does the @media rule do? How does it help is design responsive web sites?

Bonus Challenge

Given the following HTML, write CSS that will change the text and backgrounds to their appropriate colors except in the case of any button. For buttons, the text should be white and the background should be black. Additionally, any span tags should be bolded.

  <ul>
    <li class="blue-text grey-background">
      Ice Cream
      <button>Add Favorite</button>
    </li>
    <li class="orange-text">
      Sour Patch Kids 
      <span class="green-text yellow-background">
        (Watermelon Flavor)
      </span>
      <button>Add Favorite</button>
    </li>
    <li class="brown-text blue-background">
      Cake 
      <span class="blue-text brown-background">
        (Birthday Cake)
      </span>
      <button>Add Favorite</button>
    </li>
    <li>
      Cupcakes
      <button>Add Favorite</button>
    </li>
  </ul>