css in frontpage - problems

pinkpanther · Aug 15, 2008

Hello,

I've been trying to learn how to use css in my website in Fp, but still
cannot do it right. I've followed the tutorials of Microsoft, and although
they tell you how to make one, they DO NOT tell you how to join it/instal it
to your website (I would really love to know how to do that)

I've found a 'get-around' which is working for most things, but when I try
to do a 'h2' it goes beserk and changes the font to something else, and bold
and big - just completely wrecks the page! This is the site :

http://www.theenginerevolution.com

and I put the following code at the top of each page, the the header section
(this is my get-around...):

<style fprolloverstyle>A:hover {color: #DC1403; font-style: italic}
</style>
<style>

</style>

If someone can give advice on how to get 'h2' to work as instructed, I will
really appreciate it (...or even to point me in right direction how to put
css properly on the site

Trevor Lawrence · Aug 16, 2008

pinkpanther said:
Hello,

I've been trying to learn how to use css in my website in Fp, but still
cannot do it right. I've followed the tutorials of Microsoft, and
although
they tell you how to make one, they DO NOT tell you how to join it/instal
it
to your website (I would really love to know how to do that)

I've found a 'get-around' which is working for most things, but when I try
to do a 'h2' it goes beserk and changes the font to something else, and
bold
and big - just completely wrecks the page! This is the site :

http://www.theenginerevolution.com

and I put the following code at the top of each page, the the header
section
(this is my get-around...):

[snip]

Weell, I can probably help with the specific problem of h2. (I'll have a
look at the site and see what I can see)

But the style you have used is overkill

You can just use
body { font-family: verdana,arial,sans-serif; font-size: 13px }

Note the use of options for the font-family.

From W3Schools http://www.w3schools.com/CSS/pr_font_font-family.asp
******** Start of extract ********
The font-family property is a prioritized list of font family names and/or
generic family names for an element. The browser will use the first value it
recognizes.

There are two types of font-family values:
family-name: The name of a font-family, like "times", "courier", "arial",
etc.
generic-family: The name of a generic-family, like "serif", "sans-serif",
"cursive", "fantasy", "monospace".

Note: Separate each value with a comma, and always offer a generic-family
name as the last alternative.
Note: If a family-name contains white-space, it should be quoted. Single
quotes must be used when using the "style" attribute in HTML.
******** End of extract ********

In general, http://www.w3schools.com/ is a good reference

I will have to think further as to why you have 2 styles for a:hover. The
last style defined will be used.

There is no need to add all the styles on every page. Just put the styles
into a file "styles.css" in the same folder. This file does not require the
tags <style> </style>

Then, between <head> and </head > on every page, add <link rel="stylesheet"
type="text/css" href="styles.css" />

Trevor Lawrence · Aug 16, 2008

pinkpanther said:
Hello,
I've found a 'get-around' which is working for most things, but when I try
to do a 'h2' it goes beserk and changes the font to something else, and
bold
and big - just completely wrecks the page! This is the site :

http://www.theenginerevolution.com

The reason is
h1 { font-family: Verdana; font-size: 13px }
h2 { font-family: Verdana; font-size: 12pt }

h2 is specified in points, which is a no-no.

The style I sent before
body { font-family: verdana,arial,sans-serif; font-size: 13px }
will fix this

Trevor Lawrence · Aug 16, 2008

Trevor Lawrence said:
I will have to think further as to why you have 2 styles for a:hover. The
last style defined will be used.

So the complete style - in an external file - should be

body { font-family: Verdana; font-size: 13px }
a:hover {color: #DC1403; font-style: italic}

Placing the style for a:hover after that for body results in a:hover
effectively getting all the styles,
i.e. as if you had coded it as
a:hover { font-family: Verdana; font-size: 13px ; color: #DC1403;
font-style: italic}

pinkpanther · Aug 17, 2008

Trevor, thank you very, very much for all your efforts!

I have looked at that code so many times, but did not notice that little 't'
instead of the 'x'. I have changed it and now it is working ok.

I did try also making a stylesheet as you recommened but the results were
REALLY extraordinary - I think it is because I did the get-around. As it is
working nicely for my needs, I am going to let sleeping dogs lie...

Thank you again - and you've got a lovely family

Best wishes to you.

<H2> and distance in a CSS	15	Nov 10, 2008
Problems using CSS in IE6	1	Jun 29, 2007
Font/Text size problem Fixed. A 'get-around' that's worked for me	1	Jun 3, 2008
Font size! - I've read other font posts but still won't work	3	Jun 3, 2008
from tables to css - I need help	1	Aug 11, 2006
Link states (link, visited, hover & active) - removing during development	5	Aug 17, 2004
Is this code put in the right spot?	11	Apr 21, 2006
How do I get the website to center on the browser?	3	Jan 12, 2004

css in frontpage - problems

pinkpanther

Trevor Lawrence

Trevor Lawrence

Trevor Lawrence

pinkpanther

Ask a Question

Similar Threads