If i create my own style sheet to modify the style of a class created by microsoft, how can i determine where the style might be used? i have been noticing that changes i make are affecting objects that i did not intend to change, so i'd like to get away from trial and error and take a more systematic approach, if possible. Thanks
Not sure if this will help but it certainly dives into the default CSS used across SharePoint.
What you're probably seeing is a result of the complex style structure of SharePoint. Often times, instead of seeing
There's a few ways around it (depending on the scope of your project). If you're doing a ground up branding, make your own styles vs. rewriting the default ones (where possible). Microsoft prefaces all of their styles with "ms-", so I will typically preface mine with .cust-" or a similar prefix to identify ones that I have created.
If you're simply tweaking some out of the box stuff, then be sure to use the full string to that element when you write your CSS. This will ensure that your markup is only applied to the elements intended. For example,
Thirdly, get yourself a good DOM inspector (this will make your work 100x easier). Firebug is a pretty popular plugin for Firefox, though these days I find myself using Google Chrome's integrated tools. If you've got two monitors, run the developer tools on one and the browser on the other. As you move through the DOM in the developer tools, it'll highlight the contained elements on the browser window (if you're unfamiliar with the DOM, this is a godsend). You can also edit the markup live and see what it changes, making your work far more efficient than repackaging and redeploying just to see if two lines of CSS did the trick.