Creating custom CSS styles to override classes in the Core stylesheet can quickly become a debugging nightmare. Though SharePoint Designer offers a number of great features for finding and changing styles, many of these tools create "inline" styles that would need to be applied to individual objects in every instance.
Most interface and masterpage styles should be applied using a custom stylesheet to streamline the front-end development of a site and to make the process of applying changes site-wide a simple one.
SharePoint 2010 CSS Hierarchy
SharePoint 2010 uses complex nesting of CSS classes to allow for numerous stylistic options (which in many cases offers more options than are necessary). If you are using core classes and styles, you will want to get used to taking advantage of various tools to find and copy existing classes to your custom file.
Save Time with Tools
To save time and effort searching for classes or styles, I often open the existing SharePoint site in Firefox to make use of the all-too-handy FireBug addon. This tool allows you to quickly see both the HTML or CSS and to find the styles associated with a specific block of code.
Once those classes have been inspected, you can take them back into SharePoint Designer and use the Find tool to search for any instances of the class (or classes) in the Core stylesheet.
This step is very important because in nearly all cases, the styles will be used multiple times within the Core file. If a single case of a class-use is missed, you may spend an immense amount of time trying to debug your custom code.
In most cases, when your custom CSS is not properly overriding the Core styles, it is being caused by a very specific instance of a style having been missed.
Missing the Parent Container:
In the following example, the Core SharePoint Navigation for only the menu-item class is being specifically overwritten by our custom styles.
.s4-tn li.static > .menu-item {
color: #4a4235;
white-space: normal;
border: 0 none;
padding: 0px 30px 0px 0px;
display: inline-block;
height: auto;
vertical-align: middle;
font-family: Helvetica, Verdana, sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 14px;
background-image: none;
background-color: transparent;
text-transform: uppercase; }
If this same class is written even slightly differently, it can cause a plethra of problems. For example: If you miss the .s4-tn container class and only target .menu-item styles, your CSS will affect both the Global Navigation and the Quick Launch (as they share the same inner menu classes).
In order to target a specific navigation separately you have to first designate the parent container (which in this case is .s4-tn).
Missing Multiple Instances of a Class
.s4-tn {
padding: 0px;
margin: 0px; }
.s4-tn ul.static {
white-space: normal; }
.s4-tn li.static > .menu-item {
color: #4a4235;
white-space: normal;
border: 0 none;
padding: 0px 30px 0px 0px;
display: inline-block;
height: auto;
vertical-align: middle;
font-family: Helvetica, Verdana, sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 14px;
background-image: none;
background-color: transparent;
text-transform: uppercase; }
.s4-tn li.static .selected {
color: #b4a396;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
background: transparent none;
font-family: Helvetica, Verdana, sans-serif; }
In the above example, you will see multiple instances of the .s4-tn and .static classes. Though in most cases, .s4-tn li.static .selected could also be written as .s4-tn .selected (for example) in this case, if your custom style does not define all three containers (or levels), it will not fully overwrite the Core styles.
Specifying CSS Properties
The same hierarchy applies to specific CSS properties. In the following example, the font-family for the entire global navigation is being defined in the top-most container.
.s4-tn { font-family: Tahoma, Verdana, sans-serif; }
However, this style may not affect the navigation completely. For example, a more specific instance of the font-family property might be assigned to the .static class of the list element within the navigation.
.s4-tn li.static { font-family: Helvetica, sans-serif; }
Conclusion
In order to fully define custom styles that are not conflicted by existing Core styles, it is imperative to define your custom styles in the correct order to all existing instances of a class, with the proper sequence of selectors and with the specific properties defined.