Increase Your Knowledge

Heading Properties: Headings 1-6 size, font, and color

Headings have a dual  purpose. The obvious purpose is cosmetic. They help break up a page and make it easier on a viewers eyes as they scan for information. Another, less obvious reason is they are part of the algorithm Google and other search engines use for indexing a website. The more your site is noticed, the higher its ranks on the search results. 

Today's tutorial focuses on the cosmetic aspect of headings in Dreamweaver CS4.

To begin, make sure CSS is selected in the Properties Inspector at the bottom of the page.  Click  Page Properties.

Next, select Headings (CSS).

I leave the Heading font set as (Same as page font) most times, however you can select a different font if preferred. Also, Bold and Italics are options and can really help a heading stand out. For this tutorial, I am going to leave them as normal text. To experiment, select different options and hit Apply.

There are 6 Headings within the web design world. Heading 1 is the most important and usually the biggest. And they lower in size the bigger the number heading. To change the size of the heading, click the down arrow. 

To change the measurement type, select the second down arrow button. I usually stick with points (pt) or pixels (px).

The column to the right selects the color of the heading. You want it to stand out, but not clash. I am going to keep my main heading black. Use the Apply button to see what a heading will look like.

Repeat these steps for each Heading.

Hit Apply.

You have successfully changed the properties of your headings.

If you prefer video tutorials, I recommend Lynda.com. Read my review about Lynda.com or browse their  free sample tutorials.

(Lynda.com Affiliate link)
  

Categorized: Web Design Tips

Related Articles:

• How to Change Page Properties in Dreamweaver CS4
• How to Change Color of Headers, Sidebars, and Footers in Dreamwaver CS4
• How to Define a Website in Dreamweaver CS4
• Lynda.com for All Online Learning Needs
• How to Adjust Canvas Size in Fireworks CS4
• How To Make a Border in Fireworks CS4

  Share