What am I doing wrong?

Mark M · 30 Jan 2009 at 11:35

Trying to make a start with style sheets but I'm stuck at the first hurdle!

Style sheet:

Code:

p 	{
	font-family:Tahoma;
	color:#FFFF00	
	}

p2 	{
	font-family:"Times New Roman";
	color:#CCCCCC
	}

Html:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" type="text/css"  href="test.css" />  


<title>CSS test</title>
</head>

<body>

<p>Test this should be tahoma</p>

<p2>This text should be different!</p2>

</body>
</html>

But the second lot of text is staying black? http://www.mmassociates.co.uk/test/

What have I done wrong?

Thanks

Panser_bjorn · 30 Jan 2009 at 11:49

<p2> is not a valid tag.

It should be or 

and then use the relevant css:

p.someClass {}

p#someID {}

Mark M · 30 Jan 2009 at 11:58

So is for paragraph then you add your classes to that depending on the style?

Panser_bjorn · 30 Jan 2009 at 12:06

Exactly. It's the same for any HTML element.

Alternatively, define the elements more precisely:

For example:

Code:

p {style stuff}

div p {other style stuff}

applied to

Code:

<body>
<div>
<p>...</p>
</div>

<p>...</p>
</body>

Would apply different styles to each paragraph tag as you have specified that the in the <div> has a different style to every other .

A combination of this "element nesting" and the application of classes is how CSS works (and breaks).

howthe · 30 Jan 2009 at 12:08

you also need to put a ; at the end of the color tags

Panser_bjorn · 30 Jan 2009 at 12:11

howthe said:
you also need to put a ; at the end of the color tags

It's good practice to do this but as it's the last property in the class it's not strictly necessary - and will function without it.

fez · 30 Jan 2009 at 13:45

Have a look at a load of tutorials online. www.w3schools.com has loads of good ones. This stuff should only take a few weeks to sink in. Just keep plugging away and coding and it will become second nature.