CSS Font Weight Example - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS Font Weight Example</title>
<style>
        /* css-font-weight-intro-example1 */
        /* Keyword values */
        span.keyword {
            font-weight: normal;
        }

button.keyword {
            font-weight: bold;
        }

/* Keyword values that is relative to the parent element */
        span.keyword-relative {
            font-weight: lighter;
            /* Make the font lighter than the parent's */
        }

button.keyword-relative {
            font-weight: bolder;
            /* Make the font lighter than the parent's */
        }

/* Numeric keyword values */
        h1.number {
            font-weight: 400;
            /* normal */
        }

div.number {
            font-weight: 700;
            /* bold */
        }

/* *Note: You can use the font-weight number value from 100-900. Value: 400 means normal and Value: 900 means bold. */

/* Global values */
        span.global {
            font-weight: inherit;
        }

button.global {
            font-weight: initial;
        }

div.global {
            font-weight: unset;
        }
    </style>
</head>
<body>

<span class="keyword">This is a sample of &lt;span&gt; using a keyword value "bold".</span>
<button class="keyword">This is a sample of &lt;button&gt; using a keyword value "normal".</button>

<span class="keyword-relative">This is a sample of &lt;span&gt; using a keyword relative value.</span>
<button class="keyword-relative">This is a sample of &lt;button&gt; using a keyword relative value.</button>

<h1 class="number">This is a sample of &lt;h1&gt; using a number value.</h1>
<div class="number">This is a sample of &lt;div&gt; using a number value.</div>

<span class="global">This is a sample of &lt;span&gt; using a global value.</span>
<button class="global">This is a sample of &lt;button&gt; using a global value.</button>
<div class="global">This is a sample of &lt;div&gt; using a global value.</div>
</body>
</html>

Related Chapters

Related Examples