![[missing "en.views.course_landing_page.learn-css.course_illustration" translation]](http://www.codecademy.com/webpack/64ffbb7557fac182fb5da99c2bb0d39f.svg)
Key Concepts
Review core concepts you need to learn to master this subject
The CSS font-weight property
CSS font-style property
The CSS line-height property
CSS Fallback Fonts
CSS @font-face rule
The CSS font-weight property
The CSS font-weight property
The CSS font-weight property declares how thick or thin should be the characters of a text. Numerical values can be used with this property to set the thickness of the text. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder.
In the given example, all the <p> elements will appear in a bolder font.
CSS font-style property
CSS font-style property
The CSS font-style property determines the font style in which text will appear.
It accepts italic as a value to set the font style to italic.
The CSS line-height property
The CSS line-height property
The CSS line-height property declares the vertical spacing between lines of text.
It accepts both unitless numbers as a ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but it does not accept negative numbers.
A unitless number is an absolute value that will compute the line height as a ratio to the font size and a unit number can be any valid CSS unit (eg. pixels, percents, ems, rems, etc.). To set the line-height of the <p> elements to 10px, the given CSS declaration can be used.
CSS Fallback Fonts
CSS Fallback Fonts
The CSS font-family property can have multiple fonts declared in order of preference. In this case the fonts following the initial font are known as the fallback fonts.
If the initial value of the property font-family fails to load to the webpage, the fallback fonts will be used.
CSS @font-face rule
CSS @font-face rule
The CSS @font-face rule allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. This rule also allows locally hosted fonts to be added using a relative file path instead of a web URL.
- 1
In this lesson, we’ll focus on typography, the art of arranging text on a page. In particular, we’ll look at how to style fonts with CSS to make them legible and appealing and how to add external…
- 2
If you’ve ever used a formatted word processor, chances are that you probably also used a feature that allowed you change the “type of font” you were typing in. The phrase “type of font” refers to …
- 3
You’ve probably noticed bold text in websites you use, especially in news or text-heavy sites. It’s common to bold important headings or keywords. In CSS, we can style bold text with the […]…
- 4
The […] property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as […] or […] . …
- 5
You can also italicize text with the […] property. […] The […] value causes text to appear in italics. The […] property also has a […] value which is the default.
- 6
You can also increase the spacing between words in a body of text, technically known as word spacing. To do so, you can use the […] property: […] The default amount of space between wo…
- 7
You’ve learned how to increase the spacing between lines of text and words, but it’s possible to get even more detailed: increasing the spacing between individual letters. The technical term for a…
- 8
Text can also be styled to appear in either all uppercase or lowercase with the […] property. […] The code in the example above formats all […] elements to appear in […] , regardl…
- 9
No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser. To move, or align, text, we can use the […] property. [……
- 10
Another property that we can set for text is […] . This property modifies the leading of text. The diagram to the right helps illustrate exactly what the terms “leading” and “line height” m…
- 11
We often modify […] to make text on a web page easier to read. When text is styled to appear larger, the vertical spacing between lines of text can decrease, creating text that is difficult to …
- 12
You’ve learned a lot of properties to modify text on a web page! In the next exercise, you’ll set some text to be serif and some text to be sans-serif. What exactly do these words mean? 1….
- 13
What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times…
- 14
With the number of fonts available with modern typography, it is unrealistic to expect users to have all fonts installed on their computers. New fonts are often centralized in directories made avai…
- 15
When we have the link to the font of our choice, we can add the font to the […] section of the HTML document, using the […] tag and the […] . Let’s take a look at a few examples: 1. …
- 16
There are other ways to link non-user fonts that don’t require the use of the […] tag in the HTML document. CSS offers a way to import fonts directly into stylesheets with the […] property….
- 17
We can then use the fonts in the stylesheets as you would use any other font. Let’s practice loading an external font in our stylesheets using the […] property, and using the font to style our …
- 18
While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service. We can modify our […] …
- 19
Great job! You learned how to style an important aspect of the user experience, typography. Let’s review what you’ve learned so far: Typography is the art of arranging text on a page. Tex…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory