Super basic HTML/CSS formatting

Question

I am working on an assignment while teaching myself to code.

p.important {
  font-size: 1.5em;
  font-weight: 900;
}

<p class="important">Warning: We have no slow lorises here.</p>

This is supposed to change the font size to 150% and bold...but it's not working. Everything else in my code is running the way I want. But I can't get this to work. Am I missing something?

Have you specified your font-size in your body and html? Set both body and html font-size to 100%. Em's are relative off of the closest parent that has a font-size. So setting body and HTML to have 100% font will set all fonts to 16px — ntgCleaner
– ntgCleaner, Commented Jan 15, 2016 at 23:47
Hi Kristi - your code is correct. I've set up a jsfiddle for you: Fiddle - please note the code is working in the fiddle, so you may need to share more information with us (like the surrounding HTML / css) — random_user_name
– random_user_name, Commented Jan 15, 2016 at 23:50
@ntgCleaner note that setting to 100% doesn't guarantee 16px, although that is most common. That value is often set by the user's browser settings and can be changed. — Jesse Kernaghan
– Jesse Kernaghan, Commented Jan 15, 2016 at 23:52
@JesseKernaghan, You're right, it all depends on user and browser settings. Either way, it sets a default font without zoom or accessibility to 16px on most browser/os combinations — ntgCleaner
– ntgCleaner, Commented Jan 15, 2016 at 23:53

ntgCleaner · Accepted Answer · 2016-01-15 23:52:41Z

1

If you haven't already - you probably need to specify your starting font-size.

When you start a new CSS, you should probably set your body and html to have font-size:100%;. This will ensure that all of your text will be 16px starting off. Then, when you want your text to be 32px, just set the element's font-size to 2em;

body, html {
    font-size:100%; //Sets default font size to 16px;
}
p.important {
    font-size:1.5em; //Is relative from the closest parent with a font-size 1.5*16 = 24px
}

answered Jan 15, 2016 at 23:52

ntgCleaner

6,00510 gold badges54 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikos M. · Accepted Answer · 2016-01-15 23:54:16Z

1

What is it showing? Your code looks correct. Is your style definition inside the head of the html? make sure it looks like this

<head>
    <style>
        p.important {
          font-size: 1.5em;
          font-weight: 900;
        }
    </style>
</head>
<body>
  <p class="important">Warning: We have no slow lorises here.</p>
</body>

edited Jan 15, 2016 at 23:54

Nikos M.

8,3934 gold badges41 silver badges45 bronze badges

answered Jan 15, 2016 at 23:52

ablanca4

213 bronze badges

1 Comment

Leo Over a year ago

This is the old practice. Now it doesn't have to be placed within head.

Anthony Rutledge · Accepted Answer · 2016-01-15 23:52:11Z

0

font-weight: bold;

You could try that. Remember, just calling the class p.important will not make it override an inherited class/id with a higher score.

You might try ...

p.important {
  font-size: 1.5em !important;
  font-weight: 900 !important;
}

... to see if you can get it to work at all.

answered Jan 15, 2016 at 23:52

Anthony Rutledge

7,7742 gold badges42 silver badges46 bronze badges

Collectives™ on Stack Overflow

Super basic HTML/CSS formatting

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related