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

Michelle Dobbs
Michelle Dobbs
Full Stack JavaScript Techdegree Student 1,060 Points

This keeps coming back wrong. Does anyone see what I am missing? I am a bit lost. Thanks in advance.

```p.main-pg { border = 4px style = solid; border color = red;

}```

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
p.main-pg {
  border = 4px 
  style = solid;
  border color = red;

}

2 Answers

Steven Parker
Steven Parker
176,778 Points

In CSS, properties and their values are separated by a colon (":") instead of an equal sign.

And check your property names. A good rule to keep in mind is that all property names are either single words or words joined with underscores ("_"). There are no spaces in property names.

Also, the instructions say "create a rule for the .main-pg class"; so you don't need the "p" in the selector.

And "border" is actually a shorthand for several properties, so you can use it to set all 3 of these at the same time. Just separate the values by spaces.

.main-pg { border: 4px solid red; }
Ashley Claiborne
Ashley Claiborne
7,702 Points

Hey Michelle,

A few items jump out at me: you are missing the semi-colon after "4px", you are using equals (=) instead of a colon (:) after each property, and you need a hyphen in border-color.

All together that would be

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

Steven Parker
Steven Parker
176,778 Points

:warning: When setting them separately, the property names are "border‍-width", "border-‍style" and "border-color".