Expression Web & CSS: How to Style Heading Tags

Styling Text to Help Readers Find What They're Looking For

People surfing the internet do not read, instead, they scan. Their eyes tend to favor text that stands out. For instance, bold text, and / or bold and colored text, headings, etc, tends to get their attention.

Readers also scan for the Keyword Terms they entered into a search engine.

Thus, the use of Headings plus the use of Keywords in those Headings is very important. We can utilize heading tags not just for SEO purposes, but to also guide the reader to and through our content.

The way we can achieve this is via HTML Heading Tags & CSS. We will use CSS to style the Headings, which look just awful in their default state. With CSS, the options are endless!!

Read the tutorials below to get some Design Ideas for styling your heading tags.

HTML Heading Tags

<h1>Heading Level 1 </h1> This is the most important Heading Tag. By default, it is very large. Much larger than the other heading tags.

With the use of CSS, we can modify the size of the H1 heading in order to make it look much better and much smaller if we so choose.

Only 1 <h1> Heading Per Page Allowed

If you use HTML 4.01 or XHTML 1.0, you may only use one instance of an h1 Heading on any given web page in your site. Using more than 1 h1 can get you penalized as it looks like you are trying to put one over on the search engines. (heading tags have significance when optimizing web pages for search engines.)

More than 1 <h1> Heading?

If you use HTML5 to design your web pages, you can theoretically use several H1 heading tags on any given web page.

Why?

In HTML5, we use Sectioning Elements to create Layouts and section off content areas. Each Sectioning Element can have an H1 Heading. Therefore, depending upon how many sections you create, your web page can have several H1 headings.

Then there's the <hgroup> Element in HTML5 that permits you to group together an h1 and an h2 Heading.

That said, just realize you must add the HTML Mark-up for the heading tag prior to using CSS. How do we do that?

1. Type your heading text into a content area of your layout.

2. Highlight that text, then apply the <h1> Heading 1 to that text by selecting Heading 1 from the dropdown menu shown below.

<h1> Heading 1 is located in the common toolbar across the top of the interface, in a drop down menu. (See below. Notice the drop down menu lists several other text and heading tags.)

styles

The CSS

Next, we must create a New Style that targets our H1 Heading. This new style will need to alter the font size, the font alignment, color, weight, and font family at a minimum.

How to Create a New Style

1. Locate the Manage Styles Panel and click on "New Style"

css

2. Next, a dialog window will open. This is the New Style dialog window, or what I like to call, the Style Builder.

SELECTOR: you can use h1 as the selector. This will target all h1 headings on your site.

Define in: Choose Existing Style Sheet

URL: Choose your External Style Sheet from the Drop down menu

Proceed to choose a font-family, font-size, color, and any other properties you would like for your headings.