Use Attribute Selectors to Style Elements 1

Use Attribute Selectors to Style Elements 1
0

#1

How to fix this ?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;
  }

  [type='radio'] {
margin: 10px 0px 15px 0px;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="radio" name="personality" checked> Loving</label>
    <label><input type="radio" name="personality"> Lazy</label>
    <label><input type="radio" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements


#2

Nothing is wrong with your code. However, the exercise is asking you to change the margins on the Checkbox, not the Radio buttons. You’ll need to adjust that in your code above.


#3

I have added the margin too , Don’t know why it’s not accepted


#4

I still don’t get it !! Where should i or how should place it ?


#5

Somehow all of your label input types have been changed to “radio”. Of the 5 labels, your last 3 label input types should be “checkbox” (the labels of Loving, Lazy, and Energetic.

    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>

Either reset your code on this exercise to return to the default code or make the change yourself manually. From there, make sure you style your css to reflect what the exercise is asking for which is to change the margins on the “checkbox” only.

[type="checkbox"] {
margin: 10px 0px 15px 0px;
}

#6

Thank U… It worked!