Help needed with css stylesheet and font and font colour (color)

C

Chris Mitchell

I have the following in my styles.css page:

h1 {font-family:Arial; font-size:30pt; }

h1 {color: #003399; }

h2 {font-family:Arial; font-size:22pt; }

h2 {color: #003399; }

h3 {font-family:Arial; font-size:12pt; font-weight:bold; }

h3 {color: #003399; }

body {font-family:Arial; font-size:12pt; }

body {color: #003399; }

plaintext {font-family:Arial; font-size:12pt; }

plaintext {color: #003399; }

smalltext {font-family:Arial; font-size:10pt; }

smalltext {color:#003399; }

I know other pages are picking this up since I can cahnge the h1, h2 etc
text size and this is reflected in the other pages, but they don't pick up
the colour (color). I would like all text to be the same colour (color)
#003399.

What am I doing wrong?

Is there and easy way to make all text the same font and colour (color)?

TIA
Chris.
 
A

Andrew Murray

I think the issue lies with the custom class definitions (plaintext,
smalltext) in your stylesheet, these may need a period (full stop) in front
of the 's' and 'p'.
If the full stop is not there, the class is not recognised, and it will
revert back to the default (<body>) style definition. Give these are more
or less the same, it's hard to see any change occurring.

I'm not sure you need the class ".plaintext" if you also have "body" defined
the same way. (that is, font Arial, font size 12pt, font color #003399)
because from my understanding, unless you specifically style a paragraph or
table, or ul/ol/li/table/form etc any other element separately , it will
pick up the styles from the body element.

Also, not related to the question, why have you defined the 'color'
separately to the rest of the style definitions? Your styles are listed
like this:

h1 {font-family:Arial; font-size:30pt; }

h1 {color: #003399; }

h2 {font-family:Arial; font-size:22pt; }

h2 {color: #003399; }

h3 {font-family:Arial; font-size:12pt; font-weight:bold; }

h3 {color: #003399; }

plaintext {font-family:Arial; font-size:12pt; }

plaintext {color: #003399; }

smalltext {font-family:Arial; font-size:10pt; }

smalltext {color:#003399; }


A more "efficient" way would be like this, below - at least then they are
grouped together and less likely to spend more time looking for a particular
element should you want to change the style in future.

h1 {font-family: Arial; font-size: 30pt; color: #003399; }

h2 {font-family: Arial; font-size: 22pt; color: #003399; }

h3 {font-family: Arial; font-size: 12pt; font-weight: bold; color:
#003399; }

body {font-family: Arial; font-size: 12pt; color: #003399; }

..plaintext {font-family: Arial; font-size: 12pt; color: #003399; }

..smalltext {font-family: Arial; font-size: 10pt; color:#003399; }



It shouldn't matter as far as the look of the text goes but just curious,
that's all.
 
H

Hot-text

Old school
#1 <body text="#003399">
#2 <body style="color: #003399;">
#3 <body text="#003399" style="color: #003399;">
#4 <body text="#003399" style="font-family:Arial; font-size:12pt; color:
#003399;">

Good way to Back up that style
And why your style do not look like this?

<style type="text/css">
<!--
body {font-family:Arial; font-size:12pt; color: #003399;}
h1 {font-family:Arial; font-size:30pt; color: #003399;}
h2 {font-family:Arial; font-size:22pt; color: #003399;}
h3 {font-family:Arial; font-size:12pt; font-weight:bold; color: #003399;}
plaintext {font-family:Arial; font-size:12pt; color: #003399;}
smalltext {font-family:Arial; font-size:10pt; color:#003399;}
-->
</style>

this is a Right way <<<Hmm
 
R

Rob Giordano [MS MVP]

pt (points) are a print metric and should not be used in web design


--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression Web
 
A

ANONYMOUS

The easiest way to make "all text the same font and colour (color)" is
to style the body tag as follows:

body {
color: #003399;
font-family: Arial, Helvetica, sans-serif;
}

Individual styles can over-ride this but this should work in your case.
I also put margin: 0; padding: :0 and border: 0; in the body section
so that my styles will work in all browsers including IE6, 7, and 8.
You could use Eric Meyer's "reset.css" to zero out everything to start with.

<http://meyerweb.com/eric/tools/css/reset/>

hth
 

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

Similar Threads

Font size! - I've read other font posts but still won't work 3
<H2> and distance in a CSS 15
Help AUtomate TOOLTIPS 0
Hyperlinks NOT underlined in website using CSS 3
css in frontpage - problems 4
css and hyperlink properties 3
Print from Explorer 7. does not work 1
Font/Text size problem Fixed. A 'get-around' that's worked for me 1

Top