CSS - Coloring a single <p> tag without affecting others


#1


Hi Guys,

This is first issue i have had to outsource since starting to learn HTML and CSS. I hope you can assist.

I have two p tags under the body, and i simply need to input some CSS code that tells the summary line (last p tag at the end of the HTML code) to be the colour (color) of #7AC5CD. I cannot do this without making the 'Introduction: cascading with CSS, p tag the same colour (color). You cannot do a tag or a p style=..., it needs to be in CSS.


**HTML**

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Ultimate Text Challenge</title>
	</head>
	<body>
		<p>Introduction: Cascading with CSS</p>
		<div>
			<p>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
			If, however, you change that same property to a different value for a more specific instance of p,
			that change will <em>override</em> the 'general rule'.
			</p>
			<ul>
				<li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
				<li><p>BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
					   in Garamond, and 'p's INSIDE 'li's will be in Verdana.
				</p></li>
				<li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
			</ul>
		</div>
		<p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
	</body>
</html>

**CSS**

p {
    font-family: Garamond;
}

body > p {
    font-weight: bold;
    color: #7AC5CD;
}

ul p {
    color:#000000;
    text-decoration: underline;
}


#2

you need to make the introduction and summary paragraph bold, both this paragraphs are a direct child of body, so using > this should be possible

then the synopsis paragraph (which is a direct child of div) needs to be a color, again, with > you should be able to pull this off


#3

Hi Stetim94,

Thank you for replying so promptly.

The introduction sentence cannot change, so if i typed:

body > p {
color: #7AC5CD;
}

This would change both p tags?


#4

You have a synopsis paragraph, and a summary paragraph. (and no, they are not the same). Take a good look at where these paragraphs are located, the first word of the paragraphs tells you what you are dealing with


#5

I have had another close look. I apologise, but as far as i can see there are two p tags inside the body, and the rest are inside the div. I cannot see what you mean....


#6

the two paragraphs inside the body, are the introduction and summary paragraph which should be made bold

the paragraph inside the div should have a color


#7

I have been doing a lot of HTML today i think i should call it a day after that!

FYI i have sorted it. It wasn't even the html, i just didn't read it correctly! Thank you, waste of a ticket and your time!


#8

i was trying tell you, you didn't read correctly. Good you sorted it :slight_smile:


#9

You were indeed. I was paying to much attention to the html rather than reading the question again.

Thanks again for your help :slight_smile:


#10