font-weight

Overview

W3C

Properties

background

background-attachment

The font-weight property specifies the weight of the font.


                                font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Initial:	normal
Applies To:	all elements
Inherited:	yes
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | 100-900
Example | Values | bold
Example | Values | bolder
Example | Values | lighter
Example | Values | normal
Example | DOM
References


                                font-weight: value;


Value:	Description:
bold	700 in the ordered sequence
bolder	Bolder relative to the weight inherited from the parent
inherit	Takes the same computed value as the property for the element's parent
lighter	Lighter relative to the weight inherited from the parent
normal	400 in the ordered sequence


                                [window.]document.getElementById("element-id").style.fontWeight = "font-weight";

<html>
  <head>
    <title>font-weight</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">100</a>
    <a href="/" onmouseover="mouseover2();">200</a>
    <a href="/" onmouseover="mouseover3();">300</a>
    <a href="/" onmouseover="mouseover4();">400</a>
    <a href="/" onmouseover="mouseover5();">500</a>
    <a href="/" onmouseover="mouseover6();">600</a>
    <a href="/" onmouseover="mouseover7();">700</a>
    <a href="/" onmouseover="mouseover8();">800</a>
    <a href="/" onmouseover="mouseover9();">900</a><br>
    <a href="/" onmouseover="mouseover10();">normal</a>
    <a href="/" onmouseover="mouseover11();">bold</a>
    <a href="/" onmouseover="mouseover12();">bolder</a>
    <a href="/" onmouseover="mouseover13();">lighter</a>
    <p id="id1">paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.fontWeight = "100";
    }
    function mouseover2() {
      document.getElementById("id1").style.fontWeight = "200";
    }
    function mouseover3() {
      document.getElementById("id1").style.fontWeight = "300";
    }
    function mouseover4() {
      document.getElementById("id1").style.fontWeight = "400";
    }
    function mouseover5() {
      document.getElementById("id1").style.fontWeight = "500";
    }
    function mouseover6() {
      document.getElementById("id1").style.fontWeight = "600";
    }
    function mouseover7() {
      document.getElementById("id1").style.fontWeight = "700";
    }
    function mouseover8() {
      document.getElementById("id1").style.fontWeight = "800";
    }
    function mouseover9() {
      document.getElementById("id1").style.fontWeight = "900";
    }
    function mouseover10() {
      document.getElementById("id1").style.fontWeight = "normal";
    }
    function mouseover11() {
      document.getElementById("id1").style.fontWeight = "bold";
    }
    function mouseover12() {
      document.getElementById("id1").style.fontWeight = "bolder";
    }
    function mouseover13() {
      document.getElementById("id1").style.fontWeight = "lighter";
    }
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | 100-900

Example | Values | bold

Example | Values | bolder

Example | Values | lighter

Example | Values | normal

Example | DOM

References