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

Daniel Day
PLUS
Daniel Day
Courses Plus Student 413 Points
Posted by Daniel Day
Daniel Day
Courses Plus Student 413 Points

whats wrong with my code

what am i doing wrong iv tryed the css code it is attached bellow can anyone help me and tell me whats wrong

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

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

  </body>
</html>
styles.css 
.main-pg{
border:4px;
  border-color:red;
}

2 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

You're missing a property.

The challenge said, "Give the paragraph a border that is 4px wide, solid and red." And you set the border width and color, but you did not set the border style.

Now you can add "border-style: solid;" to the other settings you already have, or you could combine all three and set them at the same time using the border shorthand property as Karsten suggested:

     border: 4px solid red;
Alexander Gyger
Alexander Gyger
14,237 Points
Alexander Gyger
Alexander Gyger
14,237 Points

In your example you were actually mixing both shorthand and the specific, longer version.

"border: 4px;" is same as "border-width: 4px;"

"border: red;" is same as "border-color: red;"

"border: solid; is same as "border-style: solid;"

In the shorthand version you can simply combine them in the same rule:

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

Mixing is ok. But it's good if you are aware of which kind you are using.

Later in the track you will often first use the shorthand to define ground styles and then use the specific version for changing specific properties like in animation or for other purposes.