Use Attribute Selectors to Style Elements, please help me to crack this challenge

HTML-CSS
1

**Tell us what’s happenin
i am stuck here, not getting idea where to apply code and how please somebody help me?

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;
  }
</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.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

2

hey :grinning:
you suppose to put it in your style

3

i put it but nothing happens
can you please show me an example

4

[type=‘checkbox’] {
margin: 10px 15px 15px 10px;
}
is yours like this?

5

put it right on top of the </ style>

6

[type=‘cheakboxes’] {
margin: 10px 0px 15px 0px;
}

7

just copy mine. its right

remember:
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.

and just call it checkbox

8

your too doesn’t worked

9

is anything i have to write anywhere else

10

show me the code if you can because it works when i tried it

11

i am sending you my whole code, please identify my error

.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=‘checkbox’] {
margin: 10px 0px 15px 0px;
}

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit
12

your margin should be
margin: 10px 15px 15px 10px;

13

i tried this also, but in the challenge it is given
Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.

14

ah the lesson is bugged.
it happened to me just moments ago where my code was right but it didnt go through
Just go to the next lesson

15

how to skip this one

16

ok i got it
but how to learn that previous lession

17

wait i think its your quotes on the checkbox
try using double quotes . i know it suppose to be singles quotes but it seems like when i copied your code
on to my code it, your single code become dark and huge

try double quotes

18

oh bro i have tried it much earlier

19

okay go to the freecodecamp sign on the top left corner of your screen & click on it.
you will find yourself on the home page . the click on the word curriculum

20

ah i did it
actually i was typing cheakbox but it has to be checkbox