Expressing font-weight in different values

Here, we have font-weight: normal;. This declaration provides the text with just the regular thickness of the font. If we don't specify any font-weight, the browser will use the normal weight by default.

The following are the font-weight values used in CSS:

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 900;

You can also express the font-weight values in digits:

100 (Thin)
200 (Extra Light)
300 (Light)
400 (Normal)
500 (Medium)
600 (Semi Bold)
700 (Bold)
800 (Extra Bold)
900 (Black/Boldest)

If I use font-weight: 200, it means "extra light", okay and font-weight: 800 is "extra bold".

Video Tutoral at https://youtu.be/QLY1boMytyA

Next, we have the global values, such as inherit, revert, revert-layer, unset and initial.

Global values:
font-weight: inherit;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;
font-weight: initial;
Let's look at the font-weight: inherit;
It inherits the font weight value from the parent, which means the child element sets the font-weight value same as its parent element.

font-weight: revert;
It resets the font-weight property of an element to the default value defined in the user agent's stylesheet or user's browser by overriding any font-weight value set by the author or web developer. However, if there is no user agent's font-weight value of of a specific element, it behaves similar to the "font-weight: inherit;" and takes the font weight value from the parent.

font-weight: revert-layer;
It can revert the font weight to those specified in previous cascade layers within the author origin, and when applied outside a layer, it behaves similar to "font-weight: revert;".

font-weight: unset;
It sets the font weight to its inherited value if it is with the parent element or sets to initial value if there is no inheritance to be made from the parent element.

font-weight: initial;
This declaration sets the font-weight property to its initial value. It is similar to "font-weight: normal;" which does not depend on any of the parent elements. However, it's important to note that the initial value is determined by the user agent or browser and may vary.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
         body {
                 font: 35px Comic Sans MS;
                 font-weight: bold; 
        }
        .parent {
                  font-weight: unset;  
                  color: darkblue;         
        }
          .child {       
                  font-weight: initial; 
                  color: purple;         
        }
  </style>
  <title>CSS Example</title>
</head>
      <body>
          <div class="parent">
              <p>This is a Parent Element.</p>
                 <div class="child">
             <p>This is a Child Element</p>
                </div>
        </div>
     </body>
</html>

NEW POSTS

Main Menu

Expressing font-weight in different values

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

Expressing font-weight in different values

You Might Also Like

No comments

Post a Comment

Pages