×

Set Font Weight Using font-weight [3/16]

To specify the font weight, you can use the font-weight property which can take on two basic values:

  1. normal to set the normal weight
  2. bold to set the bold weight.

Actually, this property can have many values: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. These values ​​set gradations of font weight ranging from the thinnest to the thickest.

However, most browsers are still capable to display only two variants of font weight: normal and bold. Therefore, the other property values ​​are typically not used.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Set Font Weight Using font-weight:</title> </head> <body> <h1>Progressive Enhancement</h1> <p>What is <span class="bold">Progressive Enhancement</span>? First of all, <span class="bold">Progressive Enhancement</span> suggests that the Web interfaces should be created in stages or cycles, on a simple-to-complex basis. After each of the stages you should have a complete Web interface which is better, more beautiful and easy to use compared to the previous one. We can say that today there are four such stages:</p> <ol> <li>Good Old HTML Stage</li> <li>CSS Stage</li> <li>CSS3 Stage</li> <li>JavaScript Stage</li> </ol> </body> </html>
CSS
h1 { font-size: 24px; }
HTML Academy
  1. Make the heading normal
  2. Boldify the text within tags with the bold class
  3. Also make the text of list items bold.
Theory Check Next