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:
ginikaadiele1:
<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>
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?
laury
September 28, 2021, 2:07pm
4
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.
lasjorg
September 28, 2021, 4:44pm
9
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?
laury
September 29, 2021, 3:02pm
11
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
I have done that, and it comes back wrong, and I changed it back to ‘form’
lasjorg
September 29, 2021, 3:08pm
13
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.
system
Closed
March 31, 2022, 3:11am
17
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.