css external H1, H2, H3

S

Susie

This is the instructions from Frontpage for a linked style sheet.>

"Also called a linked style sheet in FrontPage, you use an external style
sheet when you want to apply the same styles consistently across all the
pages in your Web site that are linked to it.

The link from a Web page to a style sheet is included in the document header
(between the <head> and </head> tags using the <link> tag:

<link rel="stylesheet" type="text/css" href="styles.css">

Your style sheet would include the actual style definitions, such as: h1
{color: blue; }

When I have H1, H2, H3 references on my pages, do I need this in the head of
my page?

<style type="text/css">
<!--
H1 size=12;
H2 size=10;
H3 size=8;
}-->
</style>

Is that right? or do I need that in the head of my page at all, the
instructions only show color. If I do need it, do I have it typed correctly?
Thanks so much!
Susie
 
T

Trevor L.

Susie said:
This is the instructions from Frontpage for a linked style sheet.>

"Also called a linked style sheet in FrontPage, you use an external
style sheet when you want to apply the same styles consistently
across all the pages in your Web site that are linked to it.

The link from a Web page to a style sheet is included in the document
header (between the <head> and </head> tags using the <link> tag:

<link rel="stylesheet" type="text/css" href="styles.css">

Your style sheet would include the actual style definitions, such as:
h1 {color: blue; }

When I have H1, H2, H3 references on my pages, do I need this in the
head of my page?

<style type="text/css">
<!--
H1 size=12;
H2 size=10;
H3 size=8;
}-->
</style>

Is that right? or do I need that in the head of my page at all, the
instructions only show color. If I do need it, do I have it typed
correctly? Thanks so much!
Susie

Well, you can either have styles in the <head> section or in an external file. It doesn't matter where, but for the latter you must
also have the link in the <head>

h1, h2, h3 will use default styles, so you don't need to define them, but you may if you want to.

The correct syntax (when used in the <head> section) is:
<style type="text/css">
h1 {font-size=12px;}
h2 {font-size=10px;}
h3 {font-size=8px;}
</style>

This will set the font size only. Colour can be set if you wish.
For example
<style type="text/css">
h1 {font-size=12px; color: blue;}
h2 {font-size=10px; color: black;}
h3 {font-size=8px; color: red;}
</style>
will set a diiferent font size and colour for each of the headings h1, h2 and h3

If styles are set an external style sheet (e.g. styles.css), the tags <style type="text/css"> and </style> are not used
 
T

Trevor L.

Trevor said:
The correct syntax (when used in the <head> section) is:
[snip]

I really must be more careful. What I wrote was incorrect.

The correct syntax (when used in the <head> section) is:
<style type="text/css">
h1 {font-size: 12px; }
h2 {font-size: 10px; }
h3 {font-size: 8px; }
</style>

This will set the font size only. Colour can be set if you wish.
For example
<style type="text/css">
h1 {font-size: 12px; color: blue; }
h2 {font-size: 10px; color: black; }
h3 {font-size: 8px; color: red; }
</style>
will set a diiferent font size and colour for each of the headings
h1, h2 and h3

I have also realised that a font size as used in an HTML tag is *not* in pixels, so <h2><font size="10">Heading here </font></h2>
gives a different size to
<h2>Heading here</h2> where h2 has a style
h2 {font-size: 10px;}

I actually prefer to use percentages,
e.g. you could try
h1 { font-size: 150%; }
h2 { font-size: 125%; }
h3 { font-size: 100%; }
or any percentage you like.
 
S

Susie

Ok, I think I will get this right, btw, I really love the styles.css. Thank
you for taking the time to explain that to me, it is such a huge help!
Have a nice day Trevor:)
Susie B

Trevor L. said:
Trevor said:
The correct syntax (when used in the <head> section) is:
[snip]

I really must be more careful. What I wrote was incorrect.

The correct syntax (when used in the <head> section) is:
<style type="text/css">
h1 {font-size: 12px; }
h2 {font-size: 10px; }
h3 {font-size: 8px; }
</style>

This will set the font size only. Colour can be set if you wish.
For example
<style type="text/css">
h1 {font-size: 12px; color: blue; }
h2 {font-size: 10px; color: black; }
h3 {font-size: 8px; color: red; }
</style>
will set a diiferent font size and colour for each of the headings
h1, h2 and h3

I have also realised that a font size as used in an HTML tag is *not* in pixels, so <h2><font size="10">Heading here </font></h2>
gives a different size to
<h2>Heading here</h2> where h2 has a style
h2 {font-size: 10px;}

I actually prefer to use percentages,
e.g. you could try
h1 { font-size: 150%; }
h2 { font-size: 125%; }
h3 { font-size: 100%; }
or any percentage you like.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top