143 users online (0 members and 143 guests)  

> > > > How do make my cascading stylesheet work?

  Results 1 to 7 of 7

Related

  1. Cascading Style Sheets - CSS Generator    Forum: CSS Forum
    Replies: 1
  2. HOw do i make a url work on my space?    Forum: Myspace Forum
    Replies: 1
  3. My stylesheet is being partially ignored    Forum: CSS Forum
    Replies: 2
  1. 09-28-2005, 08:03 AM #1
    Glenvern
    Glenvern is offline
    Glenvern's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    How do make my cascading stylesheet work?

    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 <br><br>

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

    <br><br>

    Font color test <br><br>

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

    <br><br>

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

    <br><br>

    </body>
    </html>
    Glenvern
    Reply With Quote Reply With Quote
  2. 09-28-2005, 09:37 AM #2
    HTML
    HTML is offline
    HTML's Avatar
    Administrator
    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: How do make my stylesheet work?

    Try this

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

    Dave
    █ AHFBWEB Less customers per server, more power for you!
    █
    █ Business Class Shared Hosting
    Reply With Quote Reply With Quote
  3. 09-28-2005, 09:45 AM #3
    Glenvern
    Glenvern is offline
    Glenvern's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: How do make my stylesheet work?

    Where do I put it..??

    I tried it in the HTML page
    (replaced <f1> with your <div class="f1"> )
    but nothing happened..
    Glenvern
    Reply With Quote Reply With Quote
  4. 09-28-2005, 09:52 AM #4
    HTML
    HTML is offline
    HTML's Avatar
    Administrator
    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: How do make my stylesheet work?

    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
    █ AHFBWEB Less customers per server, more power for you!
    █
    █ Business Class Shared Hosting
    Reply With Quote Reply With Quote
  5. 09-28-2005, 02:20 PM #5
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: How do make my stylesheet work?

    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 <br> 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.
    Last edited by coothead; 09-28-2005 at 02:29 PM.
    Reply With Quote Reply With Quote
  6. 09-29-2005, 01:39 AM #6
    Glenvern
    Glenvern is offline
    Glenvern's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: How do make my stylesheet work?

    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 <font face="whatever"> bearing in mind I have had to write a whole page of stylesheet prior to this..??
    Glenvern
    Reply With Quote Reply With Quote
  7. 09-29-2005, 05:13 AM #7
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: How do make my stylesheet work?

    Hi there Glenvern,

    this link may provide the answers...

    CSS advantages


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread