pageSUMMARY

How to Style H1, H2, H3 and P tags using a CSS document and the dialogue box settings in Dreamweaver.

How to Style Website Headings and Paragraphs by Nick Beresford Davies

Hierarchical Styles

There are usually quite a few different text styles which appear on a website, and all have their own hierarchy of importance as far as a browser (and search engine) is concerned. Apart from the obvious H1 (header) and P (paragraph) tags, a designer needs to consider how the links will appear (when unvisited, hovered over, clicked and visited), how subheadings appear, how breadcrumbs are displayed, how much spacing is required for bullet points and a variety of other text styles (figure 1).

designTIP

Lorem Ipsum
Lorem Ipsum text is used in layouts in the place of final copy which might still be unwritten.

Style the Headings in CSS

Figure 1

For those graphic designers amongst you, these issues won’t be entirely new to you. Setting up style documents/sheets for text (and objects) which appear in printed material is not dissimilar to the setting up of CSS documents for a website.

For those of you who have never set up style sheets before, it’s not that complicated -and the way I approach it is laid out below.

The best way for me to explain how the styles work (and why I picked them) is for me to show what selections I made for each element, and then explain how and why I made them. In other words, I’ll work backwards for each element.

We’ve already styled the paragraph tag - so let’s deal with the header tags.

Creating an H1 tag in CSS

First, let’s get rid of the background color in the middle column (unless you already have). In the CSS Styles palette, double-click the #body-content DIV style.

Under the Background category, select the #C60 text
in the Background-color field and delete it. Alternatively, click on the little Swatch rectangle and select ‘Default Color’ (the little white box with a diagonal black lie through it). Click OK. The background orange color should vanish.

Next, in place of the text “Content for id "body-content" Goes Here” in the middle column, type the following in code view: “Text A Head (H1)”. Ensure that only the text has been selected - not the DIV tag code as well.

Now select the same text in Design view and select “Heading 1” from the Format menu on the Properties palette. The text you selected will change to the default large heading style. We’re going to change this style so that whenever ‘Heading 1’ (or the H1 tag) is used anywhere within the site, it will display the way we want.

Add a new H1 CSS Rule

At the bottom of the CSS Styles palette, click “New CSS Rule”.

In the New CSS Rule Pane:

Selector Type: Tag
Selector Name: H1
Rule Definition: (select your existing style sheet from the menu)

In the CSS Rule Definition Pane:

Under Type
Font Size: 3.6 em
Font-weight: normal
Color: #666666

These Type settings will ensure that the H1 heading typeface will display at 3.6 em (which will translate to about 36 point thanks to our HTML and BODY settings). The Font-family field remains empty which will lead to the default typeface set under the BODY tag settings being adopted automatically. The Font-weight of ‘normal’ removes the Bold which is applied to H1 tags by default. The color of the font will be gray.

Under Box
Padding: Uncheck ‘Same for all’ and enter 5px for ‘Bottom’
Margin: Uncheck ‘Same for all’ and enter 5px for ‘Top’

These Box settings will keep a 5 pixel margin fixed above the heading, and will keep a 5 pixel gap between the heading and the underline which we’re about to set in the Border Category…

Under Border
Style: Uncheck ‘Same for all’ and enter ‘solid’ for ‘Bottom’
Width: Uncheck ‘Same for all’ and enter 2px for ‘Bottom’
Color: Uncheck ‘Same for all’ and enter #99cc33 for ‘Bottom’

These Border settings position a solid, 2 pixel green line beneath the heading which runs the length of the column width. The padding settings under Box determine how far below the heading the line is positioned.

You should have ended up with a heading like the one in figure 2:

Style the Headings in CSS

Figure 2

Add a new H2 CSS Rule

At the bottom of the CSS Styles palette, click “New CSS Rule” and follow the same procedure for the H1 tag, but selecting H2 under Selector Name instead of H1.

In the CSS Rule Definition Pane:

Under Type
Font Size: 2.4 em
Font-style: italic
Font-weight: normal
Color: #666666

These Type settings will ensure that the H2 heading typeface will display at 2.4 em (which will translate to about 24 point thanks to our HTML and BODY settings). The Font-weight of ‘normal’ removes the Bold which is applied to H1 tags by default. The color of the font will be gray and the font style italic.

Under Box
Padding: Uncheck ‘Same for all’ and enter 0px for ‘Bottom’
Margin: Uncheck ‘Same for all’ and enter 0px for ‘Top’

These Box settings will remove any default margin or padding beneath the heading and set them to zero.

You should have ended up with a heading like the one in figure 3:

Style the Headings in CSS

Figure 3

Add a new H3 CSS Rule

Our H3 settings will be exactly the same as the H2 tag, except that the size will be 1.8 em. Create the H3 rule using the same procedure as above. For the time being, we’ll leave it at just the three headings. Later we can adapt the appearance of these headings depending on what DIV tags they appear in, so we don’t have to make hundreds of heading styles for lots of different purposes.

Style the P tag in CSS

Finally we need to style the all-important P Tag which is the most-used style on the internet. At the bottom of the CSS Styles palette, click “New CSS Rule” and follow the same procedure for the H1, H2 and H3 tags, but select P under Selector Name instead of H1.

In the CSS Rule Definition Pane:

Under Type
Font Size: 1.6 em
Line Height: 125%
Color: #000

These Type settings will ensure that the P typeface will display at 1.6 em (which will translate to about 16 point thanks to our HTML and BODY settings). The line height settings will be 25% deeper than the default setting, adding additional space between the lines. The color of the font will be gray and the font style italic.

Under Box
Margin: Uncheck ‘Same for all’ and enter 10px for ‘Top’

These Box settings will ensure that a margin of 10 pixels will keep a clear space above each paragraph block.

If you type in some placeholder text beneath the headings (ensuring that the ‘Format’ menu is set to ‘Paragraph’ in the Properties panel), you’ll start to get a feel for how the layout will work out. Tweak the settings above to suit your own purposes. You should finish up with something like figure 4.

Style the Headings in CSS

Figure 4

Next we'll style the appearance of the hyperlinks.

How to Style Website Headings & Paragraph - End of Article.

Go to previous article | Go to Home Page | Go to next article

Feedback required!