Changing CSS to include H1, H2

Sadruddin · Jul 21, 2004

It's been suggested that my site needs to use H1 and H2 tags for SEO reasons.

Not too hard, I guess, as the whole site is CSS.

BUt I'm not sure how.....

Do I need to set up a new H1 style, or do I just highlight the relative data and set it as H1, or do I set up a new CSS tag.

Anyone help here?

S

dwarfthrower · Jul 21, 2004

Your best bet is to mark up your html code using the appropriate heading tags:

Code:

<body>
<h1>Top level heading</h1>
<p>blah blah blah</p>
<h2>First sub-heading</h2>
<p>blah blah blah</p>
<p>blah blah blah</p>
<h2>Second sub-heading</h2>
<p>blah blah blah</p>
<p>blah blah blah</p>
</body>

Then use CSS to define how those tags should be rendered in the browser:

Code:

h1 {
  font-weight: bold;
  font-size: x-large;
  color: #FF0000;
}

h2 {
  font-weight: bold;
  font-size: large;
  color: #FF0000;
}

p {
  font-weight: normal;
  font-size: medium;
  color: #000000;
}

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

Vragabond · Jul 21, 2004

First, you cannot specify new tags. You have to use the ones provided by the html specs. Luckily, h1-h6 are included as title formatting tags. Just pop up your html code and replace all the titling you have with <h1> - <h6> tags or how many you may need. Next, preview your created html and look at the styling of this tags. It probably won't fit your page. From here on you can:

1. redefine the looks of all h* tags in your CSS:

Code:

h1 {
  margin: 5px 0 10px 0;
  font: bold 1.5em/1em Tahoma, Arial, sans-serif;
  color: red;
  border-bottom: 1px dotted red;
}

And so forth...

2. redefine the looks of h* tags that are within your content area (you will have to have named content area for this):

Code:

#content h1 {
  margin: 5px 0 10px 0;
  font: bold 1.5em/1em Tahoma, Arial, sans-serif;
  color: red;
  border-bottom: 1px dotted red;
}

3. create a custom class for your h* tags (this is not recommended, as you will have to apply the class to any h* element):

Code:

h1.MyTitle {
  margin: 5px 0 10px 0;
  font: bold 1.5em/1em Tahoma, Arial, sans-serif;
  color: red;
  border-bottom: 1px dotted red;
}

<h1 class="MyTitle">My Title</h1>

Hope it helps.

Sadruddin · Jul 22, 2004

My heroes......

Ta v much

S

lumberjakel · Jul 24, 2004

Vragabond said:
First, you cannot specify new tags.

Actually, IE does not do this, because IE is one crazy hack itselve.
Let me explain:
Tags are merely a definition of some style properties and DOM properties. Mozilla builds up their browser somewhat different than IE. In mozzila the stylesheet that is default to all pages is stored somewhere ans USED as a real stylesheet (internally this will not work this way, but it is how it behaves) When you use a html-tag it would look up this tag in the stylesheetlibrary (so you call it) when it finds something it uses the properties provided.
Default to all unknown tags is just to display what's between open and close tag (for single tag elements there is nothing to show). If you should provide some fakelink css property (text-decoration:underline etc) in Mozilla you can use it to place onClick events in it. In IE this will not work.

BUT, i'm not telling you should define you're own tags. It's a bad idea because IE is not doing anything wrong this time around. Just following their own interpretation of the HTML standard they are

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing CSS to include H1, H2

Sadruddin

Technical User

dwarfthrower

Programmer

Vragabond

Programmer

Sadruddin

Technical User

lumberjakel

Programmer

Similar threads

Part and Inventory Search

Sponsor