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 Text, Fonts, and Lists Font Properties

Benjamin Beezy
Benjamin Beezy
7,409 Points
Posted by Benjamin Beezy
Benjamin Beezy
7,409 Points

How is my h1 font-variant code not working?

I just don't get why font-variant: small caps isn't working.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Font Properties</title>
    <link rel="stylesheet" href="page.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>The quick brown fox jumps over the lazy dog</h1>
    <p>
        Pellentesque sem augue, auctor quis dictum et, interdum nec felis. Suspendisse faucibus viverra enim, vitae facilisis mi euismod id. Morbi ac erat mauris, a semper ligula. Etiam semper, nisi vel auctor ultricies, tortor urna dictum magna, iaculis volutpat tortor nisi vel odio. Praesent sed mauris lacus. Etiam semper tempor risus sit amet egestas. In hac habitasse platea dictumst. Aenean varius sapien quis nisl aliquam mollis.Nullam lacinia ipsum sed leo vestibulum vel tempor libero tincidunt.
    </p>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */
p {
  font-family: Baskerville, "Times New Roman", "Times", serif;
};
h1 {
  font-variant: small-caps;
};

2 Answers

Shawn Williams
PLUS
Shawn Williams
Courses Plus Student 4,462 Points
Shawn Williams
Shawn Williams
Courses Plus Student 4,462 Points

You understood correctly, but I think you are confusing the declaration with the selector. Your declarations are inside the selectors,

The selector looks like this:

h1 {}

A semicolon is not needed afterward; however inside this selector, a semicolon is needed to terminate each declaration or rule.

Benjamin Beezy
Benjamin Beezy
7,409 Points
Benjamin Beezy
Benjamin Beezy
7,409 Points

Thanks for clarifying this. It makes a lot more sense now.

Matthew Orndoff
Matthew Orndoff
9,018 Points
Matthew Orndoff
Matthew Orndoff
9,018 Points

Hey Benjamin,

After every declaration block, you're actually not supposed to have that ending semicolon.

So instead of this: 

p {
  font-family: Baskerville, "Times New Roman", "Times", serif;
};

You should do this: 

p {
  font-family: Baskerville, "Times New Roman", "Times", serif;
}

I believe that's where your code is failing.

Benjamin Beezy
Benjamin Beezy
7,409 Points
Benjamin Beezy
Benjamin Beezy
7,409 Points

Thanks. It appears that adding that semicolon has given me issues with some of my other code. I was under the impression that adding a semicolon at the end of every declaration was best practice. I must have misunderstand. Thanks for helping me out.