Use attribute selectors to style elements( a topic in the unit collapse courses in responsive web design)

[djmaaxu]

i dont know how to do it
here is my code can u tell me whats wrong
the question was " Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."

<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%;
 }
[type='checkbox'] {
   margin: 10px 10px 10px 10px
     // CSS styling
   }
 .smaller-image {
   width: 100px;
 }

 .silver-background {
   background-color: silver;
 }
</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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://freecatphotoapp.com/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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Challenge: Use Attribute Selectors to Style Elements

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

Hi @djmaaxu !

Welcome to the forum!

Two issues

No.1:
This is not the correct way to display comments in css.
Please delete that because it is messing with the tests.
This is how to write a comment in css

  /*comment*/

No.2:
Read through the error messages more carefully.
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.

Right now you set everything to have a margin of 10px

@djmaaxu

   margin: 10px 10px 10px 10px

But that is not what the directions are looking for.

Also, don’t forget your missing semicolon after the margin property.

If it helps, you don’t have to use the margin shorthand property if you are not comfortable with it.
You can choose to use the margin-top and bottom properties and the test will still pass

Hope that helps!