Font and Text
Premium Content - Free Preview
After covering the general way CSS works, it's time to go through a few specific areas. We'll cover text-related styles, colors, sizing, the box model and spacing of elements.
font
Many common styles are related to the font of an item. Here's an example:
.dramatic {
font-style: italic;
font-size: large;
font-family: "Impact";
}
If you add the class dramatic to a paragraph:
<p class="dramatic">Dracula</p>
You'll get
Dracula
font-family is used for setting the actual font of text. You should specify more than one font in case a user doesn't have the first font installed. (The browser will use the display the first font that's available.)
font-family: Impact, Charcoal, sans-serif;
Shorthand Properties
Often, related CSS properties can be combined into shorthand properties. The above CSS properties could be replaced with one font shorthand property:
End of Free Content Preview. Please Sign in or Sign up to buy premium content.
Comments
Cher
Sep 11, 3:34 AMh1{ font-family:"Arial Black", Arial;} --> why my code is incorrect?
Learneroo
Sep 11, 9:53 AMHey thanks for asking, looks like there may have been an issue checking some CSS, please try again.
Cher
Sep 11, 10:50 AMI think the problem happens because I am using Mozilla Firefox, when I do some research on Google I found this: https://www.codecademy.com/en/forum_questions/515eb975982c3bd445002775
Cheers
Learneroo
Sep 11, 11:40 AMYou're right, different browsers use slightly different formats. I updated the grader to be more lenient so it passes on both browsers. The preview on the right is the best way to see how your CSS looks.
Cher
Sep 11, 11:48 AMThank man, keep up your great works!