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 element to 900.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?