css 第2课：HTML和CSS基础知识（1/3）

Posted 2021-05-13

  <div id='heading-container'>
    <h1> Welcome to the Selector Quiz</h1>
    <p> Sometimes it can be tricky to tell what css goes with which element, so take your time.</p>
  </div>
  <div>
    <h3>Step 1</h3>
    <p class='step-text'>Make sure you read the CSS through carefully. Take a look at classes and id. They play a pretty important role in how CSS prioritizes things.</p>
    <h3>Step 2</h3>
    <p class='step-text'> Try and figure out the answers to the quiz. Give each question some time and attention, but it's okay if you don't feel 100% sure on some of the questions. </p> 
    <h3 id='final-step'>Step 3</h3>
    <p class='step-text' id='final-step-text'> Remove line 1 from the CSS to check your work. Make sure you've finished answering the questions to the best of your ability first!</p> 
  </div>

Lesson 2: HTML and CSS Fundamentals (1/3)
-----------------------------------------


A [Pen](https://codepen.io/lambdaschool/pen/wjeMjy) by [Lambda School](https://codepen.io/lambdaschool) on [CodePen](https://codepen.io).

[License](https://codepen.io/lambdaschool/pen/wjeMjy/license).

/*
Exercise I - Selector Quiz
Time: 20 Minutes

START HERE

Answer the questions below based on the HTML / CSS to the left. Do not manipulate the HTML or CSS in any way until after you have completed the quiz (no peeking!). Afterwards you may delete line 1 from the CSS to check your work (reminder this is not graded! Try and compelte this without looking). 

1. Examine the h3 element containing "Step 1". What is the text color? What is the background color?

2. Look at the h3 element containing "Step 3". What is the text and background color of this element?

3. Look at all four paragraphs. What is the text color of each of them?

4. What is the border color around the first div element? 

5. What is the background color for the second div element?

6. What is the background color for each of the three p elements with the class "step-text"?


Stretch Questions:

7. What is the text and background color of the h1 element?

8. Of the p elements, which is the largest (takes up the most space on the page)?

*/

/*
div {
  border: 3px solid red;
  padding: 10px;
  margin: 20px;
}

h3 {
  color: aqua;
  background-color: black;
  padding: 10px;
}

p {
  color: lightgrey;
  background-color: darkblue;
  font-size: 20px;
}

.step-text {
  background-color: blue;
}

#heading-container {
  background-color: blue;
  color: white;
}

#final-step {
  color: orange;
}

#final-step-text {
  color: white;
  background-color: red;
  padding: 20px;
}
*/