User talk:Najevi/monaco.css

Various selector strategies

 * Summary
 * 1) When the target element has it's own unique ID then it is usually best to use that ID if your goal is to be specific about what it is you are customizing.
 * 2) When your goal is to uniformly apply a change to "logical groupings" of elements then it is usually best to use a class name.
 * 3) A series of selectors (separated by white space) will be interpreted as progressive qualifiers on "containers".
 * 4) * An element does not contain itself!
 * 5) A comma separated list of selectors is equivalent to a logical OR operation.
 * 6) Concatenated class names match any container having all those class names. (logical-AND)
 * 7) * Concatenation implies a period delimited list because every class selector starts with a period.

div.color1 { background:#ff9966; }

/*
 * 1) search_box .color1    -- did *not* affect the background of the search box
 * 2) search_box div.color1 -- did *not* affect the background of the search box

div.color1                -- does affect the background of the search box (as well as any other dic using the color1 class!) CONCLUSION: parser does not consider the current element as being it's own "container" .. fair enough!
 * 1) navigation_widget .color1 -- does affect the background of the search box
 * 2) search_box               -- does affect the background of the search box

Debug styles before going live
A tip I forgot to mention:
 * Use your personal monaco.css (Special:MyPage/monaco.css) while you are tweaking the skin and debugging your errors.
 * That way any site visitors do not suffer through any snafus that you create while "getting it just right". Once you've debugged it then you can cut and paste from Special:MyPage/monaco.css to MediaWiki:Monaco.css
 * Note: in those links the capitalization/case of the letter M/m is deliberate

Firebug is your friend
This add-on for firefox allows a GUI based query of the current page in your browser to determine element position in the DOM, style inheritance and so on. IE8 has something similar. By default these tools can be launched and closed with the F12 key.