CSS not working. (includes code)

jakenoble

02-05-2004, 01:09 AM

HI

Could someone take a look at this code. I am using dreamweaver, but that shouldn't matter as i have written most of this myself. The only bit that works is that the text "LINK" appears as blue, like it should everything else is in the wrong colour, font, size, etc.

However the text appears how it should in dreamweaver, but not in IE or Netscape?

its only a sample of my code, so its not too long.

Ideas?

Thanks in advance.

This is my CSS code:-

ttext {
FONT-SIZE: 16px;
COLOR: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

btext {
FONT-SIZE: 12px; line-height: 20pt;
COLOR: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;}

A:link { text-decoration: none;
COLOR: #0066FF;}
A:active { text-decoration: none;
COLOR: #0066FF;}
A:hover { text-decoration: underline;
COLOR: #0066FF;}
A:visited { text-decoration: none;
COLOR: #0066FF;}

END

This is my HTML:-

<html>
<head>

<title>CSS_TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS_TEST.css" rel="stylesheet" type="text/css">
</head>

<body>
<ttext>This is the title for my CSS Test Page</ttext>

<btext>
THIS IS WHERE THE BODY OF TEXT WILL BE
</btext>

<A HREF="http://www.agreatwebsite.co.uk/">Link</A>
</body>
</html>

Antoniohawk

02-05-2004, 02:12 AM

The reason it doesn't work is that ttext and btext are not valid tags. If you're looking to style a certain area of your page try using id's as a way to refernce objects in your code. Css can only be used to style tags that actually exist in html/xhtml. Until you get into xml, but that's a different story and not what you need at the moment anyway.

p#ttext {
FONT-SIZE: 16px;
COLOR: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

p#btext {
font-size: 12px;
line-height: 20pt;
color: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

<html>
<head>

<title>CSS_TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS_TEST.css" rel="stylesheet" type="text/css">
</head>

<body>
This is the title for my CSS Test Page
THIS IS WHERE THE BODY OF TEXT WILL BE
<A HREF="http://www.agreatwebsite.co.uk/">Link</A>
</body>
</html>

Edit:
After looking at your code again, I noticed that your link styling is not in order and won't work for that reason also. a:hover must come after a:link and a:visited for it to work correctly.

a:link {
text-decoration: none;
color: #0066FF;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0066FF;
}
a:active {
text-decoration: none;
color: #0066FF;
}

Roy Sinclair

02-05-2004, 03:09 PM

h1
{
font-size: 16px;
color: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

body
{
font-size: 12px;
line-height: 20pt;
color: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:link {
text-decoration: none;
color: #0066FF;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0066FF;
}
a:active {
text-decoration: none;
color: #0066FF;
}

<html>
<head>
<title>CSS_TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS_TEST.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is the title for my CSS Test Page</h1>
THIS IS WHERE THE BODY OF TEXT WILL BE
<a href="http://www.agreatwebsite.co.uk/">Link</a>
</body>
</html>

This version of your page and CSS take you the next step, using the proper heading tag (h1) identifies the heading of your page while the CSS is there to say how it should be displayed. If you mark up your page using tags that give meaning to their content your pages will do nice things like score better with search engines and the like. Remember, html page markup is there to describe the content of the page while CSS is there to provide the visual control of how the markup looks.

Also, tags and properties should all be lower-case. Make it a habit now and you won't have to change as much to meet current standards later.

Yet again, I refer someone to the CSS Zen Garden (http://www.csszengarden.com/) as a wonderful example of how you can effectively use CSS to do amazing things with a page that has good markup.