Controlling Fonts of Heading Tags

Submit articles - Debt Consolidation - Computers 2007 - Self Improvement Articles Directory - Loans

View Full Version : Controlling Fonts of Heading Tags

Harold

Jul 4th 2004, 6:26 am

Hello,

In implementing the suggestions from my previous posting regarding heading tags, I had unexpected results.

I have names of products in a database that I use in several locations. It would be perfect to make these names all <h1> Headings.

The default code created HUGE fonts and bolded the text. I was able to override the font size issue by using the following code. <h1><font size 2>Patriots Pictures</h1>.

This still created problems because the code was bolded. I use the same name in a navigation or links area as part of a catalog structure. The bolding affect causes the text to wrap around. Is there a way to negate the automatic bolding feature when using the header tags?

Thanks

Smyrl

Jul 4th 2004, 6:39 am

You could use a style statement or cascaading style sheet to control fonts in headings and links.

Shannon

bhutz

Jul 4th 2004, 7:28 am

I can help you with this bro...

To ellaborate on Smyrl's comment you can basically do this in 2 other ways

Redfine the H1 tag
Put something like this between the <head></head> tags...

<style type="text/css">

</style>

put some text within the <h1></h1> tags

<h1>Heading text
</h1>
Create a class
Alternatively if you didn't want to change every single H1 tag you can also apply a style to the H1 tags

<style type="text/css">

</style>

and insert this code in your page...

<h1 class="Products">Heading text

Obviously you will know which one will be best for you :D

Harold

Jul 4th 2004, 7:30 am

I need a solution using HTML or XTHML.

The below code almost works but the Heading tag seems to want to force a line feed or <br> that I need to negate. Any ideas?

<h1><span style="font-weight: 400"><font size="3" face="Arial">Patriots Pictures</span></font></span></h1>

Thanks,

Harry

Lever

Jul 4th 2004, 7:53 am

Try using this, note the last line to avoid the line break... try not to use fixed px sizes for fonts, so you can chance the small to medium or whatever you want...

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
line-height: normal;
display : inline; }

Arnica

Jul 4th 2004, 7:56 am

I need a solution using HTML or XTHML.Harry

Not quite sure what you mean there. Bhutz's solution is valid HTML. Browsers that disregard the <style> tag would most probably disregard the style attribute. Anyhow the way to avoid the excess padding above and below is to add a line to bhutz's solution. And obviously adjust the padding figure to whatever you feel appropriate.

<style type="text/css">

</style>Mick

schlottke

Jul 4th 2004, 8:07 am

I'd use CSS before hard coding it in like you've done.

Harold

Jul 4th 2004, 8:55 am

I can't use the "{" or "}" symbols just the "<" or ">" because when I use any instruction using a "{", the instructions show up on the page.

That's what I meant when I said I need to use basic HTML or XHTML commands.

Harry

Smyrl

Jul 4th 2004, 9:12 am

Is your document an html document? Are you putting your style statements in head of your document?

I have a style statement in www.teamchess.org you can view if it would be helpful.

Shannon

expat

Jul 4th 2004, 11:27 am

if }{ shows on your page you probably not using correct html code

style elements must be in the header part e.g. between <head></head>

If you have an external style sheet this needs to be between <head>
... other meta tags ....
<LINK href="airport.css" type=text/css rel=stylesheet>
</head>

If you start using style elements directly on a page these need to be between <head> as well and are refered to later.
....other meta ....
<style type="text/css">

</style>
</head>

The above is a class definition and can be used (refered to) like this
<span CLASS="verd_b_12b"> whatever goes here </span>

If you redefine H1 it's called a redefined tag and looks like this
<head>
...other meta .....
<style type="text/css">

</style>
</head>

when you use <h1xxxx</h1> it "pulls" the above style
This should set you on the right path
M

Lever

Jul 4th 2004, 4:11 pm

Hi Harold; the stylesheet for your site looks like it is at (in relation to you site's root folder) /template/style.css which means that there is a /template folder with the file style.css in it. This stylesheet file doesn't appear (at time of writing) to have a style for the element <h1> in it. You need to add to this file something like

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
line-height: normal;
display : inline; }

and save it back to your /template folder. This will define all <h1> tags in your site (that rely on the /template/style.css stylesheet) to folow these rules, so if you want to change, for instance, the font size to medium; then just change the stylesheet and save.

If you get stuck just shout :)