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

HTML Introduction to HTML and CSS (2016) Make It Beautiful With CSS Test: Styling by Element and Class

Duaa Saif
PLUS
Duaa Saif
Courses Plus Student 894 Points

Give the paragraph a border that is 4px wide, solid and red

Is .p { border : 4px solid red } true

index.html
<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>

    <p .main-pg class = "main-pg" >My amazing website</p>

  </body>
</html>
styles.css
.main-pg {} class ;
.p { border = 4px solid red 
}

2 Answers

so your paragraph has the class main-pg which should be written like this:

<p class="main-pg">My amazing website</p>

The class has to be written inside of the quotation marks only and doesn't need to be specified outside of those parameters.

then in the CSS you'll need a class selector which is a period --> . <--- and that code should look like this:

.main-pg {
   border: 4px solid red;
}

you are selecting the class that was defined in the html by using the period. Then inside of the curly brackets, you add the styling you want to apply.

and again its WHAT you want to do then a colon, then the styles and then stopping it with a semi-colon.

border: 4px solid red;
Adam Beer
Adam Beer
11,314 Points

The syntax is wrong. Just give a class to the p element in your HTML file, like this, <p class="main-pg"></p>. Inside the CSS you can use the special id name with '.', like this,

.main-pg{ <- This is the p element special class name
  border: 4px solid red; <- You should use colon instead of equal sign and you forget use a semicolon after the property.
}

Look back at the previous video if you're not sure about something. Hope this help!

Duaa Saif
Duaa Saif
Courses Plus Student 894 Points

I don’t understand, please clarify more

Adam Beer
Adam Beer
11,314 Points

Look back at the previous video if you're not sure about something. Select and Style by Class