Substituting header for div tags

HTML & CSS
1

For structural/SEO purposes, I wish to insert <h1> and <h2> tags in my home page at www.vintagetextile.com However, I want to retain the same (or as close as possible) styling currently used for the 2 elements that will now have header tags around them.
At the upper left of the home page “:High Style Vintage Clothing
& 18th Century Costume” is currently styled by

div.flft{float:left;height:74px;width:60%;font:bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;position:relative;left:3em;color:#666666;}

As you can see from the Page Source, the code is:
<div class=“flft”><p>High Style Vintage Clothing<br>& 18th Century Costume</p></div>

After changing the code to reference the new rule, when I try

h1.flft{float:left;height:74px;width:60%;font:bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;position:relative;left:3em;color:#666666;}

I get a totally different, unwanted look. How can I do the CSS rule to get as close as possible to the current styling but using an <h1> instead of <div> tag?

I have the same question for the Search element down a bit on the page, where the code is:

<div class=“srch”><a class=“sr” href=“searchvt.htm”>Search </a>Vintage Textile.</div>

and the relevant styles:

.srch{padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;color:Black;font:bold 1.4em “Times New Roman”,Times,serif;}

a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font:1.4em;}
a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;}

                         Thanks to you experts in advance
2

In terms of the h1, change the <p></p> to <h1></h1> and change the styles to this:

[COLOR="#FF0000"].flft h1[/COLOR] {font: bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;
color: #666;}

That way, you are saying "apply these styles to the h1 inside the div with a class of .flft. In your code above, you were saying "apply these styles to an h1 with a class of .flft, but there is no such h1 with that class. The class is on the container, so it must come before the h1 in the style sheet declaration.

For the search text, assuming you want that inside <h2> tags, then change the HTML to

<div class="srch">[COLOR="#FF0000"]<h2>[/COLOR]<a class="sr" href="searchvt.htm">Search </a>Vintage Textile.[COLOR="#FF0000"]</h2>[/COLOR]</div>

and the CSS to

.srch{padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;}

.srch h2 {color:Black;font:bold 1em "Times New Roman",Times,serif; margin: 0;}

a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font:1.4em;}
a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;}
3

Ralph a great solution, which almost achieves the goal. This works with code:
<div class=“flft”><h1>High Style Vintage Clothing<br>&18th Century Costume</h1></div>
and your style
.flft h1{font:bold 1.15em Verdana,Tahoma,Helvetica,sans-serif;color:#666;}

So I have the h1 tag. But I also want to get rid of the div tag. Is that possible?

4

Ralph,
Thanks to your expert help, I now have the homepage working well with header instead of div tags. However, there is a css validation problem.
CSS validation problem:
"1 body Value Error : font / is not a font-family value : medium / 1.2 Verdana,Tahoma,Helvetica,sans-serif
20 #preface Value Error : font / is not a font-family value : 1.1em / 1.3 Verdana,Tahoma,Helvetica,sans-serif
32 div.cl ul Value Error : font / is not a font-family value : 1em / 1.3 Verdana,Tahoma,Helvetica,sans-serif

The rules are:
body{background-color:#fff;color:#000;font:medium/1.2 Verdana,Tahoma,Helvetica,sans-serif;margin:1em 3em 0 3em;}

#preface{padding:.3em;margin-bottom:1.2em;font:1.1em/1.3

div.cl ul{list-style-type:none;font:1em/1.3 Verdana,Tahoma,Helvetica,sans-serif;}Verdana,Tahoma,Helvetica,sans-serif;}

5

Assuming the code you posted above has been corrupted when you pasted it in here as you have mixed the rules a bit and that your code really looks like this:


body {
	background-color:#fff;
	color:#000;
	font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif;
	margin:1em 3em 0 3em;
}
#preface {
	padding:.3em;
	margin-bottom:1.2em;
	font:1.1em/1.3 Verdana, Tahoma, Helvetica, sans-serif;
}
div.cl ul {
	list-style-type:none;
	font:1em/1.3 Verdana, Tahoma, Helvetica, sans-serif;
}

Then the error is the w3c validator as the above should be valid. The validator seems to be snagging on the slash and indeed if you paste some of the w3c examples into the validator they throw the same errors.

However, font shorthand is the only shorthand I avoid because it must have at least font size and font-family present otherwise it is invalid and should be ignored but more problematical is that any properties not specified reset to their defaults which could undo previous settings. Indeed it seems to actually lead to longert rule as you keep repeating the font-family as you have done rather than doing it once on the body and then forgetting about it.

I would do it like this:


body {
	background-color:#fff;
	color:#000;
	font-family:Verdana, Tahoma, Helvetica, sans-serif;
	font-size:medium;
	line-height:1.2; 
	margin:1em 3em 0 3em;
}
#preface {
	padding:.3em;
	margin-bottom:1.2em;
	font-size:1.1em;
	line-height:1.3;
}
div.cl ul {
	list-style-type:none;
	line-height:1.3;
}

Beware that the keyword “medium” may not be consistent between browsers as the exact size is not defined by the specs.

6
7

Paul, this worked perfectly. Thanks for your expertise. I’ve found that the Sitepoint experts are the best on the web for CSS.