Override default OL styles using CSS

Styles of OpenLayers elements are generally hard-coded in the javascript source. For example, here is an excerpt from Popup.js:

this.backgroundColor = OpenLayers.Popup.COLOR;
this.opacity = OpenLayers.Popup.OPACITY;
this.border = OpenLayers.Popup.BORDER;

A better approach is to define class names for web developers to style as they choose:

this.className = "olPopup";

.olPopup {
background-color: #ffffff;
opacity: 0.5;
border: 1px solid black;
}

Suggested class names

Let's try using the ultimate javascript class name with an "ol" prefix.

olIcon

the icon div

olPopup

the popup div

olPopupContent

content of the popup