Relative to Font Size - HTML CSS CSS

HTML CSS examples for CSS:Length

  1. HOME
  2. HTML CSS
  3. CSS
  4. Length

Introduction

The first units we will look at are relative to font size.

2em means that p elements should be rendered so that the height of the element on the screen is twice the font size.

The default font-size of 15pt in the style element and specified an inline value of 12pt on the second p element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            p {<!--   w w  w  .j a  va  2s  .  c  o m-->
                background: grey;
                color:white;
                font-size: 15pt;
                height: 2em;
            }
        </style>
    </head>
    <body>
        <a href="http://java2s.com">Website</a>
        <p>I like <span>CSS</span> and HTML.</p>
        <p style="font-size:12pt">I also like mangos and Oracle.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

You can use relative units to express a multiple of another relative measure.

The following code sets the height property in em units.

The em units are derived from the value of the font-size property, which expressed in rem units.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            html {
                font-size: 0.2in;
            }<!--   w  w w.jav  a 2s . co  m-->
            p {
                background: grey;
                color:white;
                font-size: 2rem;
                height: 2em;
            }
        </style>
    </head>
    <body style="font-size: 14pt">
        <a href="http://java2s.com">Website</a>
        <p>I like <span>CSS</span> and HTML.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

Related Tutorials