Attribute Selectors for Style Elements

HTML-CSS
1

Tell us what’s happening:

The type attribute selector should be used to select the checkboxes.
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.

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,15px;
    }
</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="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" 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 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

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

2

you need to select things of type ‘checkbox’ not ‘radio’
(also use margin-top and margin-bottom to specify the required margins)

1 Like
3

how do i achieve this?. i still don’t understand

4

sorry my bad. I thought you were trying to do something else.

Ok so what you need is this: (it selects the checkboxes and sets their margin )

[type='checkbox'] {
    margin: 10px 0px 15px 0px;
  }
1 Like
5

am i to apply this in between style ?

6

first you have to remove radio value and write checkbox instead of that, then you have to put margin property and give the value of top and bottom margin like this - 10px, 0px, 15px, 0px;

1 Like
7

i got it!. it was kind of confusing

1 Like