Storing CSS externally

[mat420]

I have a CSS menu I'd like to store externally if possible. Can all CSS be stored externally as long as it's not the actual on-page part of it?
Feel free to show me how I'd store this externally
I assume/hope its just a line of code or two and moving the code to a .css file but I want to make sure that the code I want to store can even be stored externally.

thanks so much all.

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles [Please Modify!] !!!!!!!!!!!*/


    /* MyCSSMenu 0 */

    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding: 5px 55px 5px 5px;
        color:#555555;
        font-family:Tahoma;
        font-size:10px;
        text-decoration:none;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        padding:10px;
        margin:-2px 0px 0px;
        background-color:#cdcdcd;
        border-style:none;
        -webkit-border-bottom-right-radius: 10px;
        -khtml-border-radius-bottomright: 10px;    
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
    }




    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {    
        padding:3px 10px 3px 5px;
        background-color:transparent;
        font-size:11px;
        border-width:0px;
        border-style:none;

    }




    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover, #qm0 ul a:hover    
    {    
        background-color:#CDCDCD;
        color:#A02626;

    }


    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        background-color:#DADADA;
        color:#CC0000;

    }


    /*"""""""" Individual Titles""""""""*/    
    #qm0 .qmtitle    
    {    
        cursor:default;
        padding:3px 0px 3px 4px;
        color:#444444;
        font-family:arial;
        font-size:11px;
        font-weight:bold;
    }


    /*"""""""" Individual Horizontal Dividers""""""""*/    
    #qm0 .qmdividerx    
    {    
        border-top-width:1px;
        margin:4px 0px;
        border-color:#BFBFBF;
    }


    /*"""""""" Individual Vertical Dividers""""""""*/    
    #qm0 .qmdividery    
    {    
        border-left-width:1px;
        height:15px;
        margin:4px 2px 0px;
        border-color:#AAAAAA;
    }


    /*"""""""" (main) Rounded Items""""""""*/    
    #qm0 .qmritem span    
    {    
        border-color:#DADADA;
        background-color:#F7F7F7;
    }


    /*"""""""" (main) Rounded Items Content""""""""*/    
    #qm0 .qmritemcontent    
    {    
        padding:0px 0px 0px 4px;
    } 

[mat420]

i especially want to store the following code externally but when i try it, it doesnt work
this is how i tried
<link href="TEST.css" rel="stylesheet" type="text/css">
in its exact place
and then i put that code in the TEST.css
btw, when do u know to store externally? i assume it helps website loading speed? is that correct? other than that i cant think of why you'd do it besides to be able to more easily navigate through your code (which is why i want this specific code OUT)


code

/* MyCSSMenu 0 */

    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding: 5px 55px 5px 5px;
        color:#555555;
        font-family:Tahoma;
        font-size:10px;
        text-decoration:none;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        padding:10px;
        margin:-2px 0px 0px;
        background-color:#cdcdcd;
        border-style:none;
        -webkit-border-bottom-right-radius: 10px;
        -khtml-border-radius-bottomright: 10px;    
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
    }




    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {    
        padding:3px 10px 3px 5px;
        background-color:transparent;
        font-size:11px;
        border-width:0px;
        border-style:none;

    }




    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover, #qm0 ul a:hover    
    {    
        background-color:#CDCDCD;
        color:#A02626;

    }


    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        background-color:#DADADA;
        color:#CC0000;

    }


    /*"""""""" Individual Titles""""""""*/    
    #qm0 .qmtitle    
    {    
        cursor:default;
        padding:3px 0px 3px 4px;
        color:#444444;
        font-family:arial;
        font-size:11px;
        font-weight:bold;
    }


    /*"""""""" Individual Horizontal Dividers""""""""*/    
    #qm0 .qmdividerx    
    {    
        border-top-width:1px;
        margin:4px 0px;
        border-color:#BFBFBF;
    }


    /*"""""""" Individual Vertical Dividers""""""""*/    
    #qm0 .qmdividery    
    {    
        border-left-width:1px;
        height:15px;
        margin:4px 2px 0px;
        border-color:#AAAAAA;
    }


    /*"""""""" (main) Rounded Items""""""""*/    
    #qm0 .qmritem span    
    {    
        border-color:#DADADA;
        background-color:#F7F7F7;
    }


    /*"""""""" (main) Rounded Items Content""""""""*/    
    #qm0 .qmritemcontent    
    {    
        padding:0px 0px 0px 4px;
    }


</style> 

[traq]

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

that should work fine, assuming the path to the css file is correct.
did you leave the <style> tags in the external css file? they need to be left out. otherwise, please post a link to your page so we can look into it.

[Beverleyh]

Here's a nice little article onwhy external CSS is beneficial: http://www.drostdesigns.com/top-12-b...for-web-pages/

And here's a simple tutorial: http://www.tizag.com/cssT/external.php

[mat420]

my apologies. the issue was that the code i showed u, there was more above it with a dif comment (within the same <style>) so by only removing part of the code, it messed things up. thanks so much beverly and traq