Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Pseudo-Elements: ::first-line and ::first-letter

Posted by Melody Schech
Melody Schech
2,977 Points

the basic styling is not working

This is my html, the style.css is in the same folder as the html

<!DOCTYPE html> <html> <head> <title>Pseudo-Elements</title> <link rel="stylesheet" href="style.css"> </head> <body> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam lobortis elit id sem placerat sagit. </p> </body> </html>

This is the basic styling:

body { color: #222; font: normal 1.1em/1.5 Sans-Serif; margin: 80px auto; width: 60%; }

But I am getting the paragraph across the whole browser page. What am I missing?

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

You wouldn't apply sizing to the body element, instead what you could use is a container, for example a div or section element, where you can apply a width and auto left and right margins for centering. Perhaps something like this:

<title>Pseudo-Elements</title>
<link rel="stylesheet" href="style.css">

<div class="container">
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam 
    lobortis elit id sem placerat sagit.
</p>
</div>

and

body { color: #222; font: normal 1.1em/1.5 sans-serif;}
.container{margin: 80px auto; width: 60%; }