Can you swing it? (Apparently no I can't, please tell me where am I going wrong?)


#1



https://www.codecademy.com/courses/web-beginner-en-WF0CF/1/4?curriculum_id=50579fb998b470000202dc8b


Oops, try again. Did you remember to make all paragraphs have the font Garamond?


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

stylesheet.css
body > p {
    font-family : "Garamound";
    font-weight : "bold";
}
div > p {
    color : #7AC5CD;
}

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


#2

@sambitious,

If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.

                       html
                         |
               + - - - - + - - - - +
               |                   |
              head                body
               |                   |
           + - - - +        +- - - +- - - +
           |       |        |      |      |
         link    title      p     div     p
                        (intro)    |  (summary)
                                   |
                           + - - - + - - - - +
                           |                 |
                           p                 ul
                      (synopsis)             |
                                             |
                                     + - - - + - - - - +
                                     |       |         |
                                     li      li        li
                                     |       |         |
                                     p       p         p

    The p-Tags are located:
    html > body > p  (2)
    html > body > div > p (1)
    html > body > div > ul > li > p (3)
    p         as selector we have selected all 6 p-Tag's
    body > p  as selector we selected 2 p-Tags ==> Intro & Summary
    div > p   as selector we have selected 1 p-Tag  ==> Synopsis
    div p as selector we have selected 4 p-Tag's
    li > p    as selector we have selected 3 p-Tags under the li-Tag
    ul p     as selector we have selected 3 p-Tags under the ul-Tag

Some reference-material:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

As jQuery uses the same syntax for it's selector's
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp


#3

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