8. Can you swing it - It says that I got code correct and I can move to next lesson but I think I got it wrong


#1

Okay, Instructions for this module is

  • Make all p tags have a font-family of Garamond. (Do NOT use the universal selector for this! There's a better way; see the Hint for help.)

  • Make the introduction paragraph and the summary paragraph have a font-weight of bold (this is a new property for you, but it works just like the others you've learned).

  • Make the synopsis paragraph have the color #7AC5CD.

  • Make the paragraphs in the unordered list have the color #000000 and text-decoration underline.

I have a problem with something: It says "Make the introduction paragraph and the summary paragraph have a font-weight of bold" But with code I wrote it made all paragraphs bold even the ones in list.

I understood this lesson that introduction and summary should be bold, not all paragraphs. I didn't know how to make just those two paragraps bold without making them all bold.

Pics:

CSS:


#2

You seemed to have passed? introduction and summary paragraph are both direct children of body, does that help?


#3

Yes and exactly the fact that I passed concerns me. Because it said: Make the introduction paragraph and the summary paragraph have a font-weight of bold (this is a new property for you, but it works just like the others you've learned).

It didn't say that ul and stuff that it contains should be bolded. Honestly I didn't find a way to bold introduction and summary bold without making all paragraphs bold.


#4

well, both introduction and summary paragraph are both direct children of body. You know you can grab direct children with >? So then we have body, > and p which we can combine till a css selector which will only grab introduction and summary paragraph, you do understand how direct children work, right?


#5

I think I skipped previous lesson where there was no code to write by pressing submit by accident. I'm trying to grasp whole concept of using ">".

Since you were so helpful I sat and think about ">" and I succeeded.

I guess that correct code that will bold only int and sum paragraphs without bolding everything is

body> p{
font-weight:bold;
}

Thank you so much!


#6

yea is like mine. But tells me that is not correct. How you swing it?


#7

Well, first off, is it the english course? Could you show us your code?


#8

Hi - are we supposed to be modifying the HTML here or just the CSS? I added in some more DIV tags to the html so I could single out the Intro and Summary paragraphs and the output seems to be correct, but it's saying it's wrong and I can't move on. I have copied HTML and CSS below it:







    <div>
        <p>Introduction: Cascading with CSS</p>
    </div>

    <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.
        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>
    </div></div>

        <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>
    </div>

</body>

CSS

/*Add your CSS below!*/
p {
font-family:Garamond;
}

div > p {
font-weight:bold;
}

div div p {
font-weight:normal;
color:#7ac5cd;
}

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


#9

Actually, fixed it using the body >p from above :0 thanks, I can now move on!


#10

good you fixed it, the whole point is of this exercise is to use css only.

for next time, use one of the two following options to make your code/indent is visible (it wasn't full visible now):

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard