What attribute, class, or id would I use for <h3>?

Question

0.00/5 (No votes)

See more:

I am at the very begining stages of learning css and well any type of programming languages for that matter.

I have this html and am working on the CSS, and am stuck on the second h3. What would I use for CSS as for the the first <h3> has a class attached to it, and dont want to make both <h3> backgrounds grey. I'm not supposed to change the HTML, only CSS. HTML, and CCS Below:

HTML

HTML

<div>
  <h3 id="id1">Red text header!</h3>
  <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 Grey background!</h3>
  <p>Green text with white background color</p>
  <p id="id2">Green text, white background color</p>
</div>

CSS

HTML

/* Your code here: */

#id1 {
  color: red;

}

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

}

span {
  background-color: blue;
  color: white;

}
h3 {
  color: red;
  background-color: grey;
}
p.class1 {

}

.class1 {

}

#id1 {

}

#id2 {
  
}

Thanks for all your help! :-)

What I have tried:

I've tried googling the issue, but its hard for me to describe to google what I am looking for

Posted 12-Mar-20 6:27am

tvanpelt

Updated 12-Mar-20 6:48am

OriginalGriff

v2

Add a Solution

2 solutions

Solution 1

If I try your code, it's not far off being there:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
/* Your code here: */
#id1 {
  color: red;
}
.class1 {
  color: yellow;
  background-color: black;
}
span {
  background-color: blue;
  color: white;
}
h3 {
  color: red;
  background-color: grey;
}
p.class1 {
}
.class1 {
}
#id1 {
}
#id2 {
}
</style>
</head>
<body>

<div>
  <h3 id="id1">Red text header!</h3>
  <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 Grey background!</h3>
  <p>Green text with white background color</p>
  <p id="id2">Green text, white background color</p>
</div>

</body>
</html>

All you need to sort our are the Green Text on a White background - and since you have got this far, that should be pretty easy for you!

Hint: do you need to define a default for the paragraph?

Try it here: Tryit Editor v3.6[^]

Posted 12-Mar-20 6:41am

OriginalGriff

Comments

Richard Deeming 12-Mar-20 12:43pm

I think it's the grey background on the first <h3> that's the issue. :)

OriginalGriff 12-Mar-20 12:56pm

Just add:

p {
color: green;
background-color: white;
}

And see what happens. The h3 elements are both closed before the Green text is shown.

Richard Deeming 12-Mar-20 13:02pm

Both <h3> elements have a grey background. The OP said: "dont want to make both <h3> backgrounds grey" :)

Edit fiddle - JSFiddle - Code Playground[^]

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-03-12T06:49:00

You have a couple of options:

1) Use :not to only set the background on <h3> elements which do not have id="id1":

CSS

h3 {
  color: red;
}
h3:not(#id1) {
  background-color: grey;
}

2) Reset the background color on #id1 to "unset", "inherit", or "initial":

CSS

h3 {
  color: red;
  background-color: grey;
}
#id1 {
    background-color: unset;
}

unset - CSS: Cascading Style Sheets | MDN[^]
inherit - CSS: Cascading Style Sheets | MDN[^]
initial - CSS: Cascading Style Sheets | MDN[^]

NB: The values unset and initial won't work in any version of Internet Explorer.