How do make my cascading stylesheet work?

**Glenvern** · 09-28-2005, 08:03 AM

As a newbie I have created (I think) a stylesheet to test my knowledge of CSS - it doesn't work can you tell me what's wrong..
Fonts remain unchanged when run.. (all the fonts used are on my computer so I haven't used the serif, sans serif bits, both files are in the same directory)
**********************************************

/* Stylsheet saved as "csstestsheet.css" */

/* Font Face = f */

f1 { font-family: comic sans ms; }
f2 { font-family: copperplate gothic bold; }
f3 { font-family: century gothic; }

/* Font Color = c */

c1 { color: black; }
c2 { color: blue; }
c3 { color: red; }

/* Font Size = s */

s1 { font-size: smaller; }
s2 { font-size: small; }
s3 { font-size: normal; }
s4 { font-size: large; }
s5 { font-size: 48pt; }

************************************
and the html test page goes like this..
************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>testbed</title>
<link rel="stylesheet" href="csstestsheet.css" type=" text/css" >
</head>

<body>

Font face test 

<f1>This should be comic sans</f1> 
<f2>This should be copperplate</f2> 
<f3>This should be century gothic</f3>

 

Font color test 

<c1>This should be black</c1> 
<c2>This should be blue</c2> 
<c3>This should be red</c3>

 

Font size test 
<s1>This should be very small</s1> 
<s2>This should be small</s2> 
<s3>This should be normal</s3> 
<s4>This should be large</s4> 
<s5>This should be very large</s5>

 

</body>
</html>

**HTML** · 09-28-2005, 09:37 AM

Try this

<div class="f1">This should be comic sans</div>

Dave

**Glenvern** · 09-28-2005, 09:45 AM

Where do I put it..??

I tried it in the HTML page
(replaced <f1> with your <div class="f1"> )
but nothing happened..

**HTML** · 09-28-2005, 09:52 AM

Keep in mind I am not a CSS pro, that is Dean and he seems to have taken a long vacation

I think I missed something

f1 { font-family: comic sans ms; }

(change to in your stylesheet)

div.f1 { font-family: comic sans ms; }

If you are still having a problem can you post a link.

Dave

**coothead** · 09-28-2005, 02:20 PM

Hi there Glenvern,

try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>testbed</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
#f1 { 
     font-family: 'comic sans ms'; 
     margin-top:20px;
 }
#f2 { 
     font-family: 'copperplate gothic bold';  
 }
#f3 { 
     font-family: 'century gothic'; 
     margin-bottom:20px;
}

#c1 { 
     color: black; 
     margin-top:20px;
 }
#c2 { 
     color: blue; 
 }
#c3 { 
     color: red; 
     margin-bottom:20px;
 }
#s1 { 
     font-size: smaller; 
     margin-top:20px;
 }
#s2 { 
     font-size: small; 
 }
#s3 { 
     font-size: normal; 
 }
#s4 { 
     font-size: large; 
 }
#s5 { 
     font-size: 48pt; 
     margin-bottom:20px;
} 
-->
</style>

</head>
<body>

<div>Font face test </div>

<div id="f1">This should be comic sans</div>
<div id="f2">This should be copperplate</div>
<div id="f3">This should be century gothic</div>

<div>Font color test </div>

<div id="c1">This should be black</div>
<div id="c2">This should be blue</div>
<div id="c3">This should be red</div>

<div>Font size test </div>

<div id="s1">This should be very small</div>
<div id="s2">This should be small</div>
<div id="s3">This should be normal</div>
<div id="s4">This should be large</div>
<div id="s5">This should be very large</div>

</body>
</html>

Place the highlighted code in your link...

Code:

<link rel="stylesheet" href="csstestsheet.css" type=" text/css" >

Note that you do not need the element as you have used it for positioning.
The correct method is to use the margin rule as you can see in the stylesheet.

Now a couple of suggestions. Get into the habit of always using a full DOCTYPE.
It stops IE from going into Quirks Mode. Also use the <meta> tag that I have
used or similar. It will be required if you intend to validate your pages. Lastly code
your pages in Firefox and then tweak for IE, it will save you a lot of heartache.

**Glenvern** · 09-29-2005, 01:39 AM

Thank you Coothead that is just great -

One question - it would appear to me being new to this, that you have to do as much code writing with CSS as with with HTML
eg. <div id="f1"> seems to be no more of an advantage than doing bearing in mind I have had to write a whole page of stylesheet prior to this..??

**coothead** · 09-29-2005, 05:13 AM

Hi there Glenvern,

this link may provide the answers...

CSS advantages

Thread: How do make my cascading stylesheet work?

Thread Tools

Related

Cascading Style Sheets - CSS Generator Forum: CSS Forum

HOw do i make a url work on my space? Forum: Myspace Forum

My stylesheet is being partially ignored Forum: CSS Forum

How do make my cascading stylesheet work?

Re: How do make my stylesheet work?

Re: How do make my stylesheet work?

Re: How do make my stylesheet work?

Re: How do make my stylesheet work?

Re: How do make my stylesheet work?

Re: How do make my stylesheet work?

Tags for this Thread

photoshop

Hostripples India-100% Secured Windows Shared hosting Plan

Hostripples India-100% Secured Windows Shared hosting Plan

Where to find skilled freelance designers?

Photoshop or Sketch?

Is Directory Submissions still an effective way for link...