With the current "on demand" stylesheet loading, a single map property (theme) determines the location of the stylesheet. This single stylesheet is loaded when the map is initialized. When the styles are actually applied can't really be determined. To customize the style of a single element, you would edit the style.css or make your own copy.
Pretend I'm building an application that uses OL and I only want to change the background color of the overview map container.
Currently, I would do one of two things:
1) Dig into theme/default/style.css and edit the declarations. This doesn't work well if I'm using the same library for more than one application. Also, if I upgrade OL, I lose my customizations.
2) Copy the entire style.css into mystyle.css, edit the section I'm interested in, and set the theme property of the main map and the overview map
var map = new OpenLayers.Map('map', {theme: 'mystyle.css'});
var ov = new OpenLayers.Control.OverviewMap({mapOptions: {theme: 'mystyle.css'}});
This doesn't work well if I upgrade OL and there is a new class name that I don't know about, or the class name of some other element I don't care about changes. I'm stuck with my single (outdated) stylesheet.
If the default theme had been added in a regular <style> tag, my application could simply do (after the default style tag)
<style type="text/css">
.olControlOverviewMapElement {
background-color: purple;
}
</style>
By cascading styles, if I upgrade OL and some other class name changes or a new one is introduced, my application will still work well. Also, I can use the same library with the same default style for any number of applications - each with their own style.
OpenLayers
