Schriftgrößen vererben sich

by Jens Grochtdreis

HTML

<div id="wrap">
        <p id="id1">Im ersten Absatz wird die vom Browser verwendete Standardschriftgröße angezeigt, das sind in diesem Falle 16px.</p>
        <p id="id2">Im zweiten Absatz wird <strong>dem STRONG-Element</strong> eine Größe von 1.5em gegeben und <em>dem EM-Element</em> eine von 0.8em.</p>
        <p id="id3">Im dritten Absatz wird <strong>dem STRONG-Element</strong> eine Größe von 1.5em gegeben und <em>dem EM-Element</em> eine von 0.8em, allerdings wird dem P-Element eine Größe von 1.5em gegeben.</p>
        <p id="id4">Im vierten Absatz wird <strong>dem STRONG-Element</strong> eine Größe von 36px gegeben und <em>dem EM-Element</em> eine von 19px, allerdings wird dem P-Element eine Größe von 12px gegeben. Die beiden Inline-Elemente bleiben so groß, wie zuvor.</p>
        <p id="id5">Im fünften Absatz wird <strong>dem STRONG-Element</strong> eine Größe von 36px gegeben und <em>dem EM-Element</em> eine von 19px, allerdings wird dem P-Element eine Größe von 20px gegeben. Die beiden Inline-Elemente bleiben so groß, wie zuvor.</p>

    </div>

CSS

body {font-size: 1em; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
        #wrap {
            position: relative; 
            width: 600px;
            border: 1px solid #999;
            padding: 20px;
            margin: 30px;
        }
        p {margin-bottom: 10px;}
        #id2 strong, #id3 strong {font-size: 1.5em;}
        #id2 em, #id3 em {font-size: 0.8em;}
        #id3 {font-size: 1.5em;}
        #id4 {font-size: 12px;}
        #id5 {font-size: 20px;}
        #id4 strong, #id5 strong {font-size: 36px;}
        #id4 em, #id5 em {font-size: 19px;}