Learn

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 these keyword values:

  • bold: Bold font weight.
  • normal: Normal font weight. This is the default value.
  • lighter: One font weight lighter than the element’s parent value.
  • bolder: One font weight bolder than the element’s parent value

Numerical Values

Numerical values can range from 1 (lightest) to 1000 (boldest), but it is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.

.left-section { font-weight: 700; } .right-section { font-weight: bold; }

In the example above, text in elements of both .left-section and .right-section classes will appear bold.

It’s important to note that not all fonts can be assigned a numeric font weight, and not all numeric font weights are available to all fonts. It’s a good practice to look up the font you are using to see which font-weight values are available.

Instructions

1.

In style.css, change the font weight of elements with the .banner p selector to lighter.

2.

In style.css, change the font-weight of the .header class to 900.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?