Home > Building a Website > How to Style Website Headings and Paragraph

Building Steps

1. Set up a Site
2. Create a Template
3. Create a CSS File
4. Link to a CSS File
5. HTML Basics
6. Set Page Margins & Background
7. Create Site Structure
8. Create a Three Column Layout
9. Style Headings and Paragraph Tags
10. Style Website Links
11. Create Breadcrumb Links
12. Style Round Cornered DIVs #01
13. Style Round Cornered DIVs #02
14. Create Navigation Tabs
15. Adding a Footer
16. Create Editable Regions
17. Name the Categories
18. Create a Page from the Template
19. Create a Library Item
20. Creating More Pages

How to Style Website Headings and Paragraphs

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).

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.

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”.

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

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.

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

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.

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.

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!

Please send any questions or feedback to: feedback@using-dreamweaver.com or leave it on our Facebook page.