CSS not working. (includes code)

Dev Shed Forums Sponsor:

February 4th, 2004, 08:14 PM

jakenoble

System.out.println("eh?");

Join Date: Feb 2004

Location: Derbyshire

Posts: 859

Time spent in forums: 5 Days 17 h 57 m 46 sec
Reputation Power: 25

CSS not working. (includes code)

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;}

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>
<P></P>
<btext>
THIS IS WHERE THE BODY OF TEXT WILL BE
</btext>
<P></P>
<A HREF="http://www.agreatwebsite.co.uk/">Link</A>
</body>
</html>

February 4th, 2004, 08:22 PM

lisajill

Contributing User

Join Date: Aug 2003

Posts: 152

Time spent in forums: < 1 sec
Reputation Power: 6

A few things.

Is the name of the file all capitalized, as mentioned in the link tag?

Also, you need to use a . or # in the stylesheet. You can only leave it in in pre-bult tags.

. = class (reuseable)
# = div (useable once)

then in the html you would call them

<div class="btext"> ... </div>
or <div id="btext"> ... </div>

So, if we redid your code properly:

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;}

and then:

Code:

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

I'd do everything in lowercase in case you want valid xhtml later. =)

does that help?

__________________
Lisa
distant, early morning

February 4th, 2004, 08:40 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 17 h 42 m 44 sec
Reputation Power: 642

actually you should use a heading tag for headings, ie h1, h2 etc.
here you can use the h1-tag, you can use a class on it but usually a document only should have one h1-element

don't use empty p-elements to create space use margin in css.

body can only have block-level elements as childs, so place a p-tag or a div around the link at the bottom

remember to use the correct order of the link psuedo classes
:link
:visited
:hover
:active

Code:

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

.btext p {
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:
<body>
<h1>This is the title for my CSS Test Page</h1>

<div class="btext">
	<p>THIS IS WHERE THE BODY OF TEXT WILL BE</p>
</div>

<p>
<a href="http://www.agreatwebsite.co.uk/">Link</A>
</p>
</body>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: