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-benefits-of-using-css-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