Adding Headings, Paragraphs, and Blockquotes

18 Nov 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 2)

There are 6 Heading tags (<h1>-<h6>), designed to be used in numerical order on a web page.

A simple web page can look like this: Example 1.

This straightforward numerical arrangement becomes problematic if there is a large amount of content on a single page. The problem is amplified when using more than one column per Webpage.

A good work around is to arrange the headings like this: Example 2.

For this tutorial, I’m going to use the <h1> tag for the Site title, and then use another <h1> as the main heading for each column (Eventually these will be followed by sub headings, using the same pattern as example 2).

HTML

<div id="c1"> 

<h1>My groovy website (Content One)</h1>

</div>

<div id="c2">

<h1>Content 2</h1>

</div>

<div id="c3">

<h1>Content </h1>

</div>

<div id="c4">

<h1>Content 4</h1>

</div>

<div id="c5"></div>

This is what the above HTML looks like in action.

You will notice that all the content divs have now been pushed apart. This is because the Heading has a default margin. The value of the margin can be defined and changed using CSS.

For now, set the heading margins to 0, in the stylesheet and reload the page. The margins should now of disappeared and the content div are back to normal.

CSS

h1, h2, h3, h4, h5, h6 {margin:0;}

Time to add some paragraphs

Large chunks of text should always be contained within paragraph tags. I’m going to add some paragraphs below the headings of all three vertical columns.

<p>The famous sibyl Deiphobe inhabited a cave near the temple
of Apollo, where she would utter prophecies while under
god’s influence, and guard the entrance to the realm of
death.</p>

<p>She warned Aeneas of the dreadful inescapable nature of
the underworld, and advised him to first obtain the golden
branch, sacred to the queen of death, to safeguard his
return to the land of the living.</p>

<p>After Aeneas obtained the golden branch, he was led by
Deiphobe down to the corridors of death, with the
assurance that he would return.</p>

A paragraph also has a default margin, so, for now, I am setting the paragraph margin to 0.

CSS

h1, h2, h3, h4, h5, h6, p {margin:0;}

It all looks pretty terrible up to this point. but not to worry, somewhere down the road we will take full advantage of the power of stylesheets and make it look extra nifty

Adding Blockquotes

The <blockquote> tag is used when you want to quote a chunk of text. Blockquotes create a horizontal margin (whitespace), on both sides of the element, and should be wrapped around paragraphs (<p>) like this:

Markup

<blockquote><p>The luminous branch was concealed within the
dark grove of the moon goddess Diana, and grew -like mistletoe-
upon a certain tree</p></blockquote>

Example

< Back to everything
Keep going… >

Related Posts

• Creating a <div> based Template using CSS (part 1 - 12)
• Ordered and unordered lists (create a horizontal menu/navi bar)
• Disappearing List Icon
• I.E Problem with <div>isions
• Fonts