There are many ways you can add and edit CSS in MOSS 2007, the method I will discuss here is lightweight and great to get a general understanding of how style sheets work, and get aquainted with some of the class naming conventions SharePoint uses.

Set up an Alternate CSS URL:

• Create a Publishing Site. Select Site Actions, Create Site. Then select the Publishing Tab and finally choose Publishing Site. It will take a few moments for your site to provision.
• Open your editor of choice and create a new file and add /* Custom Styles */ to it.
• Save it as “Custom.CSS”. If you are using notepad don’t forget to select “All Files” from the “Save as Type” drop down menu before saving, otherwise you will have a .txt extension.

Go to your website in the browser and select Site Actions, View all Site Content

• Select the Documents Library (create one if you don’t see it). Update:  The best place to store your CSS would be the Styles Library which is already created.  I have no idea why I said to place it in the Documents Library.  You can thank Amanda for reminding me.
• Select the Upload Drop Down, Then Upload Document. Select Browse and then browse to and select the Custom.CSS file you created to upload it.
• Go back to the Site Actions menu, then Site Settings, Modify all Site Settings.
• From the Look and Feel Section, Select Master Page.
• Scroll Down to the bottom of the page until you find the “Alternate CSS URL” section. Select Specify a CSS file to be used by this publishing site and all sites that inherit from it.

• Then Click Browse. Select Current Site Documents on the left and finally select your Custom.CSS file. Click Ok a couple of times to return to the site settings page.

• What you just did was set up an alternate style sheet for your site. Any style you add to this style sheet will take precendence. What that means is if you know there is a certain class applied to an element in your site and you want to change it, just add the class to your Custom.CSS style sheet and it will override the previous.

Identify and Overwrite Classes:

• Now that you are set up, you’ll need to figure out what elements of your pages you wish to change, and what classes are applied to them. That’s where the Internet Explorer Developer Toolbar comes in. If you have not downloaded and installed the IE Developer Toolbar, you’ll need to do it now.
• Go back to the browser, and back to the default page of your website.
• From Internet Explorer Select View, Toolbars, Developer Toolbar. This will turn the bar on. Note: If you are using IE 7 you may need to hit the ALT key to expose your file menu.

• From the Developer Toolbar now exposed at the top of your screen, select View Dom. This will open a menu at the bottom of your screen.

• From the bottom menu, select Find, Select Element by Click. When this is enabled, you can click any element on the page to inspect that part of the DOM (Document Object Model) and subsequently see what class is applied to what element.

• As you hover over elements of your page, you will notice they highlight with a dark blue border. When you find the element you wish change highlighted, you can click it to show the information about it, such as the class which is applied to it.
• For this example we will assume we need to change the very top horizontal bar so that is has a yellow background, rather than the default blue.
• Hover over this element and then click it when it has a blue border. Notice that the class in the bottom tells you it’s using .ms-gloablbreadcrumb. That means that if we add that class to our Custom.CSS file, then edit it to have a yellow background, our site will update to reflect the change.

• To test this, Select Site Settings, View All Site Settings. Select the Documents Library and then Check Out the Custom.CSS file so that you can edit it. You will notice your ICON change slightly once the file is checked out. When it does click it to to open it in your editor.

• Add the following code to the style sheet:

.ms-globalbreadcrumb {

background-color:#FFFFB0;
}

• Save your style sheet.
• Back in the browser, check the style sheet back in, publish/approve it if necessary.
• You will notice now when you refresh the page that your top bar has changed to yellow.

This is the basis behind overwriting the custom CSS classes in a supported, non-destructive way.

Other Important Notes:

• These classes are originally defined in the CORE.CSS located in the 12 HIVE on the file system of the SharePoint Server.  Update:  To quickly copy/paste all properties set in the CORE.CSS file, you can “Control + Click” on any underlined class name in SharePoint Designer 2007.  Doing so will not only open the CORE.CSS file (or whatever stlye sheet your class is defined in), but also jump directly to that piece of code!
• If there is a theme applied to the site the CORE.CSS classes are overwritten by duplicate entries in the THEME.CSS. (It’s also important to note that Themes can be somewhat confusing as when you apply your theme, the THEME.CSS (and other styles) are actually added to a file called 1011-65001.css and then applied to the site).  If you were trying to personalize a theme by connecting to the site using SharePoint Designer 2007, you need to edit the 1011-65001.css file.
• I would consider it best practice to use the Alternatte CSS URL where possible and copy the classes “from the CORE.CSS (or theme.css)”, paste it to the CUSTOM.CSS and then modify the approrpriate properties, or add new ones.