Reputation: 33
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?
Upvotes: 0
Views: 99
Reputation: 21
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>
Upvotes: 1
Reputation: 5985
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
}
Upvotes: 1
Reputation: 7564
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.
Upvotes: 0