font-size

Overview

W3C

Properties

background

background-attachment

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


                                font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Initial:	medium
Applies To:	all elements
Inherited:	yes
Percentages:	refer to parent element's font size
Media:	visual

Values
DOM
Example | Values | absolute-size
Example | Values | length
Example | Values | percentage
Example | Values | relative-size
Example | DOM
References


                                font-size: value;


Value:	Description:
absolute-size	Index to a table of font sizes: xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large
inherit	Takes the same computed value as the property for the element's parent
length	Horizontal or vertical measurements: em \| ex \| px \| in \| cm \| mm \| pt \| pc
percentage	Value relative to the inital value
relative-size	Relative to the table of font sizes and the font size of the parent element: smaller \| larger


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

<html>
  <head>
    <title>font-size</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">xx-small</a>
    <a href="/" onmouseover="mouseover2();">x-small</a>
    <a href="/" onmouseover="mouseover3();">small</a>
    <a href="/" onmouseover="mouseover4();">medium</a>
    <a href="/" onmouseover="mouseover5();">large</a>
    <a href="/" onmouseover="mouseover6();">x-large</a>
    <a href="/" onmouseover="mouseover7();">xx-large</a><br>
    <a href="/" onmouseover="mouseover8();">smaller</a>
    <a href="/" onmouseover="mouseover9();">larger</a><br>
    <a href="/" onmouseover="mouseover10();">em</a>
    <a href="/" onmouseover="mouseover11();">ex</a>
    <a href="/" onmouseover="mouseover12();">px</a>
    <a href="/" onmouseover="mouseover13();">in</a>
    <a href="/" onmouseover="mouseover14();">cm</a>
    <a href="/" onmouseover="mouseover15();">mm</a>
    <a href="/" onmouseover="mouseover16();">pt</a>
    <a href="/" onmouseover="mouseover17();">pc</a><br>
    <a href="/" onmouseover="mouseover18();">percentage</a>
    <p id="id1">paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.fontSize = "xx-small";
    }
    function mouseover2() {
      document.getElementById("id1").style.fontSize = "x-small";
    }
    function mouseover3() {
      document.getElementById("id1").style.fontSize = "small";
    }
    function mouseover4() {
      document.getElementById("id1").style.fontSize = "medium";
    }
    function mouseover5() {
      document.getElementById("id1").style.fontSize = "large";
    }
    function mouseover6() {
      document.getElementById("id1").style.fontSize = "x-large";
    }
    function mouseover7() {
      document.getElementById("id1").style.fontSize = "xx-large";
    }
    function mouseover8() {
      document.getElementById("id1").style.fontSize = "smaller";
    }
    function mouseover9() {
      document.getElementById("id1").style.fontSize = "larger";
    }
    function mouseover10() {
      document.getElementById("id1").style.fontSize = "1em";
    }
    function mouseover11() {
      document.getElementById("id1").style.fontSize = "2.3ex";
    }
    function mouseover12() {
      document.getElementById("id1").style.fontSize = "16px";
    }
    function mouseover13() {
      document.getElementById("id1").style.fontSize = "0.167in";
    }
    function mouseover14() {
      document.getElementById("id1").style.fontSize = "0.432cm";
    }
    function mouseover15() {
      document.getElementById("id1").style.fontSize = "4.32mm";
    }
    function mouseover16() {
      document.getElementById("id1").style.fontSize = "12pt";
    }
    function mouseover17() {
      document.getElementById("id1").style.fontSize = "1pc";
    }
    function mouseover18() {
      document.getElementById("id1").style.fontSize = "150%";
    }
  </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 | absolute-size

Example | Values | length

Example | Values | percentage

Example | Values | relative-size

Example | DOM

References