Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Text, Fonts, and Lists Font Properties

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

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

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

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

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.