CSS Code

Question

Does anyone know how I can change one section of code in CSS without it affecting another part? If you enter the code into the playground, you can see my problem. This is homework of my class and I am stuck.
Thanks in advance to anyone who can help.
<div>
<h3 id='id1'>Red text header with a blue border!</h1>
<p class="class1">This paragraph should have a black background and yellow text</p>
<span class="class1">Black background and white text.</span>
<span>Blue background and white text.</span>
</div>
<div>
<h3>Red text header with red border!</h3>
<p>Green text with white background color</p>
<p id="id2">Green text, white background color, dashed purple border</p>
</div>

/* Your code here: */

h3.{color: red;
background: blue;

}

.p {color: yellow;
background: black;

}

span {color: white;
background: blue;

}

p.class1 {color: yellow;
background: black;

}

.class1 {color: white;
background: black;

}

.id1 {color: green;
background: white

}

#id2 {color: green;
background: white;
border: purple dashed

}

Answer 1

You can only target one element by using id in CSS. id can only be applied on one element of the whole webpage.

Answer 2

You're right. I didn't realize I had pluralized "element" when referring to id.

Answer 3

Thank you for your help Calvin. I really appreciate your assistance!

Answer 4

Your prompt, "change one section of code in CSS without it affecting another part" is unspecific.

Being not entirely sure where you are experiencing difficulty or what your desired result is, I can only offer generic observations. (Also, I'm not sure why you didn't just leave your code in Code Playground and simply linked the code, because it would be much easier for both you and us if you had done so.)

h3 should not have a period before the curly brace. I'm guessing that you are also supposed to be adding a red border here.

.p is not a class you have employed. You should either remove it or remove the period before the p so the styling applies to your paragraphs.

.id1 is not a class you have employed. You should either remove it or change the period to a hashtag so the styling applies to the elements with the "id1" id. (Edit: Singular "element", not plural.)

There are probably more issues, but it would be helpful if you linked your Code Playground code.

Answer 5

Janning here is the link. https://codepen.io/MiMiiXV/pen/RBeQzG

Answer 6

Good job, Michelle! 👍 Looks like it works! 😊

One note: Line 8's opening tag doesn't match its closing tag.

Keep up the good work!