Would you guys want to give me a clue for this issue?

Tell us what’s happening:
Describe your issue in detail here.

  **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="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 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Challenge: Use Attribute Selectors to Style Elements

Link to the challenge:

HI @deinolmc !

I would look at the sample lesson again.

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

This is piece of code changes the margin for all elements with the type attribute of radio.

You will follow that basic structure to change the margin for all elements with the type attribute of checkbox.

Hope that helps!

honestly i’ve been confused for the position of that. inside the css?

Yes.
You will write it in the style tags.

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

ADD YOUR CODE HERE
</style>

still don’t work…
um maybe the classes?

That’s hard to read.

Can you write your code in the forum so I can test it?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Also, it looks like maybe you wrote radio instead of checkbox.

The challenge is looking for the checkbox attribute.

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

You are still writing radio here

But the lesson wants you to target checkbox. Not radio.
Radio was just the example to show you the basic structure.

Also this needs to be a ] not a }

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

checkbox not checkboxes :grinning:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.