Key Concepts

Review core concepts you need to learn to master this subject

CSS font-weight Property

/* Sets the text as bolder. */ p { font-weight: 700; }

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.

Lesson 1 of 1
  1. 1
    In this lesson, we’ll focus on typography, the art of arranging text on a page. We’ll look at: * How to style and transform fonts. * How to lay text out on a page. * and how to add external font…
  2. 2
    You may remember from the Visual Rules lesson that the font of an element can be changed using the…
  3. 3
    In CSS, the font-weight property controls how bold or thin text appears. It can be specified with keywords or numerical values. #### Keyword Values The font-weight property can take any one of the…
  4. 4
    You can also italicize text with the font-style property. h3 { font-style: italic; } The italic value causes text to appear in italics. The font-style property also has a normal value which is…
  5. 5
    Text can also be styled to appear in either all uppercase or lowercase with the text-transform property. h1 { text-transform: uppercase; } The code in the example above formats all elements…
  6. 6
    You’ve learned how text can be defined by font family, weight, style, and transformations. Now you’ll learn about some ways text can be displayed or laid out within the element’s container. ##### …
  7. 7
    Previously, we learned about web safe fonts, a group of fonts supported across browsers and operating systems. However, the fonts you can use for your website are limitless—web fonts allow …
  8. 8
    Online font services, like Google Fonts, make it easy to find and link to fonts from your site. You can browse and select fonts that match the style of your website. !…
  9. 9
    Fonts can also be added using a @font-face ruleset in your CSS stylesheet instead of using a element in your HTML document. As menti…
  10. 10
    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. *…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo