I can't get the [type='radio'] function to work

HTML-CSS
1

Your lesson does not say where to insert it. It is supposed to work on the checkboxes and I inserted it there but it doesn’t work.

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">
  [type='radio'] {
    margin: 10px 0 px 15px 0px;
  
  <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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Use Attribute Selectors to Style Elements

Link to the challenge:

1 Like
2

try to add “for” attribute and "id " attribute

3

the information on the course says nothing about this. How does this work?

4

You didn’t put your style inside the style section. You also have a random chunk of html enclosed in your {}s.

5

Where in your course does it say where to insert anything???

1 Like
6

The second CSS lesson:

7

may i know which course you are attempting right now

8

Note that it’s important to have both opening and closing curly braces ( { and } ) around each element’s style rule(s). You also need to make sure that your element’s style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element’s style rules.

9

[quote=“perico, post:1, topic:364500”]

<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;
}
/* it stay inside the style tag not the body*/
input [type='radio'] {
    margin: 10px 0 px 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="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>

[type=‘radio’] {
margin: 10px 0 px 15px 0px; is wrong

you will need to put it inside the style tag in the head tag
and put input
input [type=‘radio’] {
margin: 10px 0 px 15px 0px;
}

1 Like
10

Thanks, but where in this course does it say to use these methods?

11

Are you doing the curriculum in order? If so, it seems like you may have gone through the lessons too quickly, because these are very fundamental to writing CSS. Also, I already told you the lesson in the curriculum that told you how to write a selector.