Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to move CSS from html to it's own CSS file

    I found this script I like and want to use. But I want to move the CSS from the the HTML file to it's own CSS file.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>list OneItem 1Item 2Item 3Item 4</title> 
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style type="text/css"> 
    * { 
    margin: 0px; 
    padding: 0px; 
    } 
    
    body { 
    background-color:#F0F0F0; 
    font-size: 62.5%; 
    font-family: Verdana, Courier, Tahoma; 
    } 
    
    #footer_box { 
    float: right; 
     width: 50%; 
     background: #EEE; 
    border-top: 1px #CCC solid; 
    border-bottom: 1px #CCC solid; 
    } 
    
    #footer_box ul { 
      
    width: 25%;  
    float: left; 
    padding: 1em; 
    } 
    
    #footer_box li { 
     width: 100%; 
    list-style: none; 
    line-height: 1.4em; 
    text-align: left; 
    color:#555; 
    font-size: 1.2em; 
    font-weight: bold; 
    } 
    
    #footer_box a { 
    text-decoration: none; 
    font-size: 90%; 
    font-weight: normal; 
    } 
    
    #footer_box a:hover { 
    text-decoration: underline; 
    } 
    
    #footer p { 
    clear: both; 
    color: #999; 
    font-size: 1em; 
    text-align: center; 
    } 
    
    </style> 
    
    </head> 
    
    <body> 
    <div id="footer"> 
    
    <div id="footer_box"> 
    <div id="footer_list_holder"> 
    <ul id="footer_list"> 
    <li>Created</li> 
    <li><a href="http://www.renhauling.com/">REN Hauling</a></li> 
    <li><a href="http://www.charismacommunications.ca/">Charisma Communications</a></li> 
    </ul> 
    
     <ul id="footer_list"> 
     <li>Maintained</li> 
     <li><a href="http://www.aacwinnipeg.mb.ca/">Access Advisory Committee</a></li> 
     
     </ul> 
    
    </div> <!-- end #footer list holder --> 
    </div> <!-- end #footer box --> 
      
     
    </div><!-- footer --> 
    
    </body> 
    
    </html>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Just cut and paste it to a new document and save it using the .css file extension.
    Then just write this on any pages requiring the CSS:

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

    There's a link to an external sheet right above the CSS you want!

    Delete the old <style type="text/css"> </style> tags.

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm confused what line I'm deleting, and what I'm keeping.

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Code:
    <style type="text/css"> 
    * { 
    margin: 0px; 
    padding: 0px; 
    } 
    
    body { 
    background-color:#F0F0F0; 
    font-size: 62.5%; 
    font-family: Verdana, Courier, Tahoma; 
    } 
    
    #footer_box { 
    float: right; 
     width: 50%; 
     background: #EEE; 
    border-top: 1px #CCC solid; 
    border-bottom: 1px #CCC solid; 
    } 
    
    #footer_box ul { 
      
    width: 25%;  
    float: left; 
    padding: 1em; 
    } 
    
    #footer_box li { 
     width: 100%; 
    list-style: none; 
    line-height: 1.4em; 
    text-align: left; 
    color:#555; 
    font-size: 1.2em; 
    font-weight: bold; 
    } 
    
    #footer_box a { 
    text-decoration: none; 
    font-size: 90%; 
    font-weight: normal; 
    } 
    
    #footer_box a:hover { 
    text-decoration: underline; 
    } 
    
    #footer p { 
    clear: both; 
    color: #999; 
    font-size: 1em; 
    text-align: center; 
    } 
    
    </style>
    Delete what's in red as it would no longer be needed then copy the rest to a new file. Name it say styles.css, then add <link rel="stylesheet" type="text/css" href="styles.css"> to any HTML doc needing the style sheet, within the <head> </head>.
    Last edited by dan-dan; 03-05-2012 at 09:46 PM.

  • #5
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you very much

  • #6
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I did all that but i don't think it's seeing my CSS file. Plus my list were side by side before and there not now.


    HTML


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>list OneItem 1Item 2Item 3Item 4</title> 
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    
    </head> 
    
    <body> 
    <div id="footer"> 
    
    <div id="footer_box"> 
    <div id="footer_list_holder"> 
    <ul id="footer_list"> 
    <li>Created</li> 
    <li><a href="http://www.renhauling.com/">REN Hauling</a></li> 
    <li><a href="http://www.charismacommunications.ca/">Charisma Communications</a></li> 
    </ul> 
    
     <ul id="footer_list"> 
     <li>Maintained</li> 
     <li><a href="http://www.aacwinnipeg.mb.ca/">Access Advisory Committee</a></li> 
     
     </ul> 
    
    </div> <!-- end #footer list holder --> 
    </div> <!-- end #footer box --> 
      
     
    </div><!-- footer --> 
    
    </body> 
    
    </html>

    CSS


    Code:
    * { 
    margin: 0px; 
    padding: 0px; 
    } 
    
    body { 
    background-color:#F0F0F0; 
    font-size: 62.5%; 
    font-family: Verdana, Courier, Tahoma; 
    } 
    
    #footer_box { 
    float: right; 
     width: 50%; 
     background: #EEE; 
    border-top: 1px #CCC solid; 
    border-bottom: 1px #CCC solid; 
    } 
    
    #footer_box ul { 
      
    width: 25%;  
    float: left; 
    padding: 1em; 
    } 
    
    #footer_box li { 
     width: 100%; 
    list-style: none; 
    line-height: 1.4em; 
    text-align: left; 
    color:#555; 
    font-size: 1.2em; 
    font-weight: bold; 
    } 
    
    #footer_box a { 
    text-decoration: none; 
    font-size: 90%; 
    font-weight: normal; 
    } 
    
    #footer_box a:hover { 
    text-decoration: underline; 
    } 
    
    #footer p { 
    clear: both; 
    color: #999; 
    font-size: 1em; 
    text-align: center; 
    }

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Are you sure your CSS is in a file called main CSS which is in a subdirectory called CSS rin the same folder as your HTML file?

    i.e.

    Code:
    /
      index.html
      css/
        main.css

  • #8
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts
    It is now. Thank you very much. A simple thing like that , and I forgot.

  • #9
    Regular Coder
    Join Date
    Oct 2011
    Posts
    135
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I resolved this. Is there away to say i resolved it?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •