SOMEONE HELP! CSS Selectors - excersize 8


#1

so uh confusion!! I can’t work it out. my head cannot compute - no pun intended haha - but like seriously, I can’t use divs to bolden the paragraphs that need font-weight:bold; and so i just used the strong tags in my HTML, which works perfectly fine to bolden stuff but codecademy, being dodgy on occasion, gives me an error code, despite it working. someone help!!

thanks,
Keira


#2

which exercise is this? Please share the exercise url and your code

well, codecademy teaches you (or attempts to) how to do something in css, so not very surprising it won’t allow strong tags


#3

ok sooo excersize URL -
https://www.codecademy.com/en/courses/web-beginner-en-WF0CF/1/4?curriculum_id=50579fb998b470000202dc8b
my code - HTML -

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Ultimate Text Challenge</title>
	</head>
	<body>
		<p><strong>Introduction: Cascading with CSS</strong></p>
		<div>
		<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.
			</div>
			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>
		<p><strong>Summary: Greater specificity makes CSS prioritize that particular styling.</strong></p>
		</div>
	</body>
</html>

My code - CSS -

/*Add your CSS below!*/

p { 
    font-family: garamond;
}
ul {
    color:#000000;
    text-decoration:underline;
}
div div p {
    color:#7AC5CD;
}
div div div p {
    font-weight:bold;
}

its the last bit i can’t get right. can you help??

Thanks for replying,
Keira


#4

sorry i pasted the wrong bit thats not my html code thats the textwindow!!
heres my code

Ultimate Text Challenge

Introduction: Cascading with CSS

Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to all p tags.

If, however, you change that same property to a different value for a more specific instance of p, that change will override the 'general rule'.
  • If you say p { font-family: Garamond}, all 'p's will have the font Garamond.

  • 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.

  • The more specific your selectors are, the higher importance CSS gives to the styling you apply!

Summary: Greater specificity makes CSS prioritize that particular styling.


#5

websites are html, so trying to display the code in the environment its suppose to run, is a bit tricky, i fixed it for you.

don’t modify the html code for this one, you won’t be able to pass this way

you need to do this with css alone, although, this exercise track is no longer supported (old learning environment)


#6

it seems you are targeting the right paragraphs with the strong tags, except you need css for this

what relationship do these elements have which is unique to them? How are they nested that none of the other paragraphs are on the page?


#7

that’s my issue - I don’t really know. been on this for a couple hours, had to take some time off because my head was just like overcooked spaghetti. If i could work that out, I could get this done.


#8

what is the parent element of both these paragraphs (introduction and summary)?


#9

as far as I can work out (I’m still not completely confident in my CSS or HTML code)it’s just the body as they aren’t within a div. is that right?


#10

we are going in the right direction :slight_smile:

both these paragraphs are child of body, but if we would do body p as css selector, it would select all paragraph elements within body. Which is not what we want

these two paragraphs are not only child of body, they are … child(ren) of body. What should be on the …?


#11

should it be immediate?


#12

immediate, yea, i know what you mean. The term i prefer is direct child (or children of body)

What css trick is this exercise teaching? How we can write a css selector to only target the direct children of an element. Given both these paragraphs are the only direct paragraph children of body, sounds like something we can use


#13

could we do body > p? i think i saw that on one of the previous exercises but didn’t need to use it. or is there something else I should use?


#14

body > p is certainly the right selector to make introduction and summary paragraph bold, but do you understand why?

i don’t know, are there any other selectors you are struggling with?


#15

well, I think it’s because it’s saying the bits that are direct children more than the bits that are just p within something else. am i right with that?
all the other selectors I’ve mostly understood. the div thing where you have to use multiple divs in the stylesheet kinda confused me, but I think I’ve worked it out mostly.


#16

in case of body > p it only selects direct paragraph children of body, not all paragraphs within body (that is body p)


#17

ok so I added body > p to my stylesheet, but now it’s telling me i haven’t changed the colour of the synopsis paragraph to #7AC5CD, which i have. any advice there? I’ll add a picture of what I mean. issue11

you already have my html code so I won’t bother resending that.

what’s happened here?


#18

looking at the html code:

<!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>

(this is how the html code should be, it shouldn’t be changed in any way) i don’t see the synopsis paragraph to have two div parent elements


#19

thank you, that’s fixed my errors, my code is fine now!

thanks soo much for your help!
Keira


#20

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.