39 users online (0 members and 39 guests)  


  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. Replies: 2
  1. #1
    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

  2. #2
    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

  3. #3
    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

  4. #4
    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

  5. #5
    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
    732

    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.

  6. #6
    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

  7. #7
    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
    732

    Re: How do make my stylesheet work?

    Hi there Glenvern,

    this link may provide the answers...

    CSS advantages



Tags for this Thread