= 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