This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course » View Exercise

115 points
518d72ac005261ed4b00204e_821620169
Submitted by
Maciej Kedzierski
over 2 years ago

If the CSS is in the style tag for the heading, why is the body affected?

I thought I recognized this same thing before in other lessons but now only do I fully understand it. The CSS is in the style tag. The style tag is in the heading tag. However, the CSS effects the body tag, which is outside of the heading tag. Can someone explain this to me? The code looks like this:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: purple;
                font-family:cursive;
            }
        </style>
        <title>Result</title>
    </head>
    <body>
        <p>Check it out! I'm purple!</p>
    </body>
</html>

1 vote

permalink

We have 3 options when it comes to styling, inline style:

<p style="color: red;">some text</p>

internal stylesheet (what you have in your question)

and external stylesheet (which means you put the css in a different file and you link to it)

the body section is for everything which needs to be visible on the page (everything the needs to read would be a better way of putting it)
your head section is for everything not on the page. Long ago (not so long) people agreed on the body and head section of a web-page. and everything the user needed to see was in the body. all thing users didn't need to see (style being applied, meta-tags (title is a special case), view-port etc) should be in the head section. The style is in the header, but you do want the user to see how beautiful your page is, so you want to influence the bit in the body. plus, you did that, you use the css selector p to tell css: heey, i want you to change the color and font-family of the paragraph

2822 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

1 Comment

5334fc819c4e9db930001a0d_32139218 Leon over 2 years ago

you use the css selector p to tell css: heey, i want you to change the color and font-family of ALL the p-tagged HTML Elements in this HTML-Document.