Attribute Selectors to Style Elements

Attribute Selectors to Style Elements
0.0 0

#1

Below is my code for the Basic CSS atribute problem for type=checkbox.

I have gone through this several times and even checked here for a solution and what I found posted as an answer looks like what I have completed but I keep getting an error message. At this point I am at a wall. Any help will be much appreciated.

<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'] {
      margin: 10px 0px 15px 0px;
    } 
    name="personality" checked> Loving</label>
    <label><input [type='checkbox'] {
      margin: 10px 0px 15px 0px;
    } name="personality"> Lazy</label>
    <label><input [type='checkbox'] {
      margin: 10px 0px 15px 0px;
    } name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

thank you for the edit and for letting me know.


#4

When possible, try to use the Ask for Help button on the challenge, so that the code gets formatted automatically and the url to the challenge is in the post. It makes it easier to help you.

You are supposed to be using CSS selectors. CSS Selectors reside in between the <style> and </style> tags. You need to click the Reset All Code button and only make changes to the style section and do not modify the original checkbox input elements.