Help CSS Styling - Jumbatron:Paragraphs


#1

Im attempting the Jumbatron:Paragraphs section and have added the following html and css code.

I'm suppose to complete this:

Make a new CSS rule that selects the p element inside <div class="jumbotron">..</div>.
Set the color to #fff
Set the font-size to 20px

but I keep getting the following error message:

Oops, try again. Set the color of the p element inside <div class="jumbotron">..</div> to #fff

Can anyone help?

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>
  
  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
	  <div>
		<div>
	  	  <div>
			<h3>Travel</h3>
			<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
			<p><a href="#">See how to travel on Airbnb</a></p>
		  </div>
		  <div>
			<h3>Host</h3>
			<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
			<p><a href="#">Learn more about hosting</a></p>
		  </div>
		  <div>
			<h3>Trust and Safety</h3>
			<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
			<p><a href="#">Learn about trust at Airbnb</a></p>
		  </div>
	    </div>
	  </div>
	</div>
  </body>
</html>

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  text-transform: uppercase;
}
.jumbotron {
    height: 500px;
    background-image:url('https://goo.gl/04j7Nn');
}
    .jumbotron {
    <div class="jumbotron h1">..</div>
    color: #fff;
    font-size: 48px;
    font-weight: bold;
}
    .jumbotron {
    <div class="jumbotron p">..</div> 
    color: #fff;
    font-size: 20px;
}

#2

That is an HTML element. HTML elements belong in your index.html file, not in your main.css file with your CSS code.

If you want to select the h1 elements in your jumbotron div, then you write a selector like this:

.jumbotron h1 {

Do you see how that works now?


#3

18 posts were split to a new topic: 5. Jumbotron: paragraphs


#13

2 posts were split to a new topic: 5. Jumbotron: paragraphs


#22

8 posts were split to a new topic: 5. Jumbotron: paragraphs


#30

Thank you that worked!


#31

4 posts were merged into an existing topic: 5. Jumbotron: Paragraph


#33

5 posts were split to a new topic: 5. Jumbotron: paragraphs


#40

2 posts were split to a new topic: 5. Jumbotron: paragraphs


#47

2 posts were split to a new topic: 5. Jumbotron: paragraphs