The most flexible way to use and manage css on your site is to have a page on your site specifically to hold the css.
I usually call this css:theme but you can call it admin:css (as we do on the community site here) or any name you like. For this example we will call it css:theme.
1. Create a page called css:theme
2. On that page add a codeblock to hold the css:
[[code type="css"]]
..css will go here..
[[/code]]
3. Copy the css from the page on my site at http://vineyard.wikidot.com/flyout:css or from the code below. You will see that the first rule imports James' curvature theme you are currently using from the Themes site. That @import rule must be the first rule in your css.
[[code type="css"]]
/* CSS FOR THEME
==============================*/
@import url("http://themes.wdfiles.com/local--code/curvature");
/* CSS FOR FLYOUT SIDE MENU
==============================*/
#side-bar {
padding-bottom: 10px;
}
#side-bar ul {
list-style-type: none;
padding: 0;
position: relative;
width: 11em;
z-index: 500;
}
#side-bar li {
background-color: #88AAFF;
float: left;
}
#side-bar a, #side-bar a:visited {
border: 1px solid #ffffff;
color: #000000;
display: block;
height: 2em;
line-height: 2em;
padding-left: 1em;
text-decoration: none;
width: 11em;
}
* html #side-bar a, * html #side-bar a:visited {
width: 11em;
}
* html #side-bar a:hover {
background-color: #112233;
color: #ccff66;
position: relative;
}
#side-bar li:hover {
position: relative;
}
#side-bar a:active, #side-bar a:focus, #side-bar li:hover > a {
background-color: #112233;
color: #ccff66;
}
#side-bar li ul {
background-color: transparent;
left: 7em;
padding: 2em;
position: absolute; top: -2em;
visibility: hidden;
}
#side-bar li:hover > ul, #side-bar ul a:hover ul, #side-bar ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul, #side-bar ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
#side-bar ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul ul, #side-bar ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
[[/code]]
Then save the page.
4. You now need to tell your site to use the css on this css:theme page. Go to your site manager (admin:manage) and select Appearance then Themes (note: you do not select Custom Themes). Make sure that _default is selected in the dropdown menu then select the radio button next to "Or use an external theme". In the box that appears below it type /css:theme/code/1 and click the save changes button. This is telling it to use the first codeblock on the css:theme page.
5. Now go to any page on your site to see the result. Particularly if you are using Firefox you might need to clear the browser cache and then refresh the page: tools menu -> Clear Recent History and select only the Cache checkbox. Ctrl+r to refresh. You should now see that your theme is being used.
6. When you want to add a new css rule or change any css property or value you just go to the css:theme page, add the css you want or make a change and save the page and the change will be reflected immediately (subject to the Firefox cache issue mentioned above).
7. Once you get used to using css the advantage of this method is that you can then have different css for different categories. For example I frequently use different header images for different pages on a site (see http://www.rfpg.org as an example).
8. One of the best ways to see what css is being used on your site, to learn how it is structured, and to test changes on-the-fly is to use the Firebug addon for Firefox which you can get free from http://getfirebug.com. It is one of the web development tools I would never want to be without. A similar we developer tool is available for IE8+ although it's not quite as good.
So try out what I have written above and come back with any questions.