Information Technology Reference
In-Depth Information
The regular articles on this page will be housed in this
section of the document. The markup of this section is
exactly the same as the featured articles section. The only
difference will come down to how they are displayed based
off their assigned styles.
-->
<section id="regular">
<article>
<header>
<h2>Title...</h2>
</header>
<div class="entry">
<p>Body Content...</p>
</div>
</article><!-- /ARTICLE-->
</section><!-- /SECTION: REGULAR ARTICLES -->
</section><!-- /SECTION: CONTENT -->
<body>
</body>
</html>
Now let's turn to the CSS and the visual presentation of The Daily Droid.
The Daily Droid's Semi-magical CSS Code
Now here's the CSS Style Sheet used to set the overall appearance of The Daily Droid.
CSS, as you remember, will take the plain HTML structure explained in the preceding
section and apply various styles to the tags, as we specify. We've broken the CSS into
several parts to help explain what it does. The first part, as shown in Listing 5-3, sets
how the body text and some of the headings should look.
Listing 5-3.
CSS Code for The Daily Droid, part 1
/*
CSS reset code only for the elements that will be
used in our code. We could use a more robust CSS reset
solution, but I am a firm believer that you should not
riddle your stylesheet with code that you have no
intention of using in your markup.
*/
html, body, h1, h2, h6, p, article, figure, figcaption header, hgroup, section {
padding:0;
margin:0;
}
/*
General global styles to be used throughout the demo
*/
html, body {
width:100%;
overflow-x:hidden;
}
body {
font-size:14px;
font-family:"Times New Roman", Times, serif;
line-height:20px;
