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

  • Thread starter Thread starter Chris Mitchell
  • Start date Start date
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.
 
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.
 
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
 
pt (points) are a print metric and should not be used in web design


--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression Web
 
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
 
Back
Top