Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Treehouse Club - MASH MASH - CSS Changing Your Stuff in Your Stylesheet

Posted by Elizabeth Molina
Elizabeth Molina
1,130 Points

In MASH................ What is a '.highlight' rule in your CSS.

I don't know what this mean?

style.css 
/* Body Styling */
body {
  background: blue;
  color: #ccc;
  font-family: Arial;
  font-size: 27px;
  line-height: 1.65px;
  margin: 0 auto;
  padding: 40px 10px;
}

.highlight:
  font-size: 18px;
  line-height: px;
  margin-left: 30px;
  opacity: 0.5;
}
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <title>MASH</title>
</head>

<body>
  <form action="" method="post" id="mash">
    <h1 class="title">MASH</h1>
    <p class="sub-title">Make sure to list five under each category.</p>

    <div class="choice-bucket">
      <h4 class="highlight">What will your profession be?</h4>
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">What kind of animal will you have?</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">Where will you live?</h4>
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
    </div>
    <div class="choice-bucket">
      <h4 class="highlight">What kind of car will you have?</h4>
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
    </div>

    <input type="submit" value="Tell My Future">
  </form>

  <div class="answers">
    <h3>You will live in a <span id="home"></span></h3>
    <h3>You will be a <span id="career"></span></h3>
    <h3>You will have a <span id="pet"></span></h3>
    <h3>You will live in <span id="location"></span></h3>
    <h3>You will drive a <span id="car"></span></h3>
  </div>

  </body>
</html>

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The '.highlight' rule is the 2nd one, the one which begins with the selector '.highlight'.

And don't change the selector line, it needs to keep the open brace and it does not need a colon.

In this challenge you will only be changing values of the properties.