Styling semantic markup

The exercises in this section will combine the elements discussed so far in this post, showing how to use the knowledge gained to style some semantic markup. Three different examples are on offer, showing how rapidly you can create great-looking text when working with CSS, and also how you can easily restyle a page of text without touching the markup. The markup that you’ll use is as per that in the next code block; and the default web page, without any CSS applied, is shown to its right.

<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>Quisque faucibus lorem eget sapien. å In urna sem, vehicula ut, å mattis et, venenatis at, velit. å Ut sodales lacus sed eros. å Pellentesque tristique senectus et å netus et malesuada fames å ac turpis egestas.</p>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed å aliquet elementum erat. Integer å diam mi,  vene natis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus å ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, å mattis et, venenatis at, velit. Ut sodales lacus sed eros. å Pellentesque tristique senectus et netus et malesuada fames å ac turpis egestas.</p>
<h3>Praesent rutrum</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus å ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
<h3>Habitant morbid</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus å ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
</div>

The code block is simple. The text has three levels of headings, with paragraphs between them. Everything’s enclosed in a div element, which will be styled to restrict the width of its content. This makes it simpler to see how the leading—defined via line-height—is working out. If you were surfing at full-screen on a large monitor, the paragraphs might
only be shown on a single line.

The default CSS document for these exercises has some rules common to all three examples. These are shown in the following code block:

* { margin: 0; padding: 0; }
html { font-size: 100%; }
body {padding: 20px; font-size: 62.5%;}
#wrapper {margin: 0 auto;width: 400px;}

The first rule, *, removes margins and padding from all elements, as discussed previously. The html and body rules set the default size of the text on the web page to 62.5%, as explained in the “Setting text using percentages and ems” section earlier in this chapter. Finally, the #wrapper rule defines a width for the wrapper div, and therefore for its content.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.