Use an id attribute to style an element issues

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 in <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 background-color:green;}>
  <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>

The assignment is to give the form a green background. Please, I need hints on how to go about it.

Challenge: Use an id Attribute to Style an Element

Link to the challenge:

Hi there,
This is an example of how you set CSS properties for the HTML elements using their id

#cat-photo-element {
  background-color: green;
}

You need to do the same for the HTML element with the id of cat-photo-form in this lesson. Give it a green background.

1 Like

This is what I did to the HTML element:

id="cat-photo-form" 
{background-color: green;}

Where did I go wrong, please?

For this challenge, you want to apply your styles within the <style> tag, not in the HTML element itself, (although it is still possible by using the style attribute).

1 Like

You refer to the id of an element in CSS with #
Here just insert a # and write the id of that element right after it. Similar to this:

#id {

}
1 Like

You mean like this:

id=#cat-photo-form {background-color:green;}

Please, how can I use the style attribute in the HTML element?

I still need help, please. I’m still stuck in this assignment.

This is how you give an HTML element an id.

<p id="someSelectorName">Some paragraph text</p>

This is how you use that same id in the CSS as a selector.

#someSelectorName {
 /* CSS properties and values goes here */
}

The form element has this id id="cat-photo-form" so how do you think you should write the selector in the CSS?

1 Like

Please, I’m still stuck in this assignment.

This is how I added the id attribute to the CSS style tag:

#cat-photo-element{background-color:green;}

This is what my HTML tag looks like:

<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">

The assignment is to give a green background to to my HTML form. I have given the id attribute, how can I give the green background, please?

The name of the ID in your HTML element just needs to match the ID selector (#) in your CSS style tag.

At the moment your #cat-photo-element is looking for an HTML element with the id=“cat-photo-element”.

Hope that makes sense :slight_smile:

I have done that, and it comes back wrong, and I changed it back to ‘form’

You need to pay close attention.

This is the id you have on the element:

id="cat-photo-form"

This is the selector you have written:

#cat-photo-element

They do not match.

It keeps saying '‘your form element should have the background-color of green’.

Thank you. I just realized my error. I appreciate

Thank you. I have seen my error. I appreciate your help.

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