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...... Now change the opacity on the highlight class selector to 0.5. how do you do that?

How do you do this?

Thank You Elizabeth

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:'0.5.;}
  font-size: 18px;
  line-height: px;
  margin-left: 30px;
  opacity: 0.8;
}
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,269 Points
Steven Parker
Steven Parker
231,269 Points

All of the tasks in this challenge only require value changes to properties that are already being set. You've already done two of them, this one is very similar once you identify the setting:

.highlight {         /* don't change the selector itself */
  font-size: 18px;
  line-height: 24px;
  margin-left: 30px;
  opacity: 0.8;      /* <-- here's the opacity setting */
}