CSS style bold font in paragraph to a color but not in heading

Viewed 898

I have a html document that has specific font setting for each part of the document.

I have 3 headings and a paragraph; I need the bold font in the paragraph to be red. I have created a separate css file for my styles and this is my code for that file. How do I make the bold font in the paragraph red without impacting the bold font in the header?

h1  {
    color: blue;
    text-align: center;
}

h2  {
    color: green;
    text-align: center;
}

h3  {
    color: red;
    text-align: center;
    text-decoration: underline;
}

p   {
    color: blue;
    font-family: arial;
    font: large;
    text-align: justify;
}

span.Italicize  {
    font-style: italic;
    color: green;
}

b   {
    color: red;
}

span#RedObject {
    color: red;
}

enter image description here

This is the HTML file I am building this CSS for which I cannot change.

</head>
<body>

<h1>Level 1 heading is <b>BLUE</b> and center aligned.</h1>
<h2>Level 2 heading is <b>GREEN</b> and center aligned.</h2>
<h3>Level 3 heading is <b>RED</b>, center aligned and underlined.</h3>

<p>
The text paragraph should be blue,
using Arial font of large size.
In CSS, we should specify font-size: 
<span class="Italicize">large</span>.
But for making italic in CSS, use font-style: 
<span class="Italicize">italic</span>.
Any text designated to be <b> bold </b> in the paragraph 
should also become <span id="RedObject">RED</span>.
</p>

</body>
</html>
1 Answers

You can add this to your css file:

p b {
    color: red;
}

This code colors every <b> tag that is inside of the <p> tag

Related