Proportional line heights : line height : Text Attributes HTML CSS TUTORIALS


HTML CSS TUTORIALS » Text Attributes » line height »

 

Proportional line heights


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>A basic example with proportional line heights</title>
<style type="text/css" media="screen">
html {
    font-size: 100%;
}

body {
    padding: 20px;
    font-size: 62.5%;
}

#wrapper {
    margin: auto;
    width: 400px;
}

body {
    line-height: 1.5;
}
  
h1 {
    font-size: 2.5em;
}
    
h2 {
    font-size: 2em;
}
    
h3 {
    font-size: 1.2em;
    margin-top: 1.65em;
}

{
    font-size: 1.1em;
    margin-bottom: 1.1em;
}
    
h3, p {
    margin-left: 1em;
}
    
    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>

    <h2>Curabitur sit amet risus</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <h3>Praesent rutrum</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <h3>Habitant morbid</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
  </div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Text Attributes
» line height