JavaScript
Search Service
Skip navigation Digital Library for Earth System Education
Digital Library for Earth System Education
Search tips

Suggested CSS Styles

The JavaScript Search Service includes a set of suggested Cascading Style Sheet (CSS) styles, which are recommended for use in your web pages. These styles correspond to CSS classes that have been assigned to various HTML elements that are returned by the service.

To use the suggested styles, insert the following code into the <head> portion of your HTML page:

<LINK REL="stylesheet" TYPE="text/css" 
	HREF="http://www.dlese.org/dds/services/jshtml1-1/suggested_styles.css">

After inserting the suggested styles, you may override any of the style elements by re-defining them later in your page. For example, the following code inherits the suggested styles and then overrides the background color of the resource title, setting it to blue:

<LINK REL="stylesheet" TYPE="text/css" 
	HREF="http://www.dlese.org/dds/services/jshtml1-1/suggested_styles.css">
	
<style type="text/css">
	TR.resourceTitle {
		background-color:#E8ECF4;
	}			
</style>

See also: Required CSS Styles

The suggested styles are as follows:


/* ------ CSS Styles for the DLESE JavaScript search page ------ */

/* ------ Body tag styles set with no margins on the sides so that the edges are flush ----- */
BODY { 
	margin-right:0px;
	margin-left:0px;
}

/* ------ Style used to highlight the user's search text ------ */
.textHighlight { 
	font-weight: bold; 
	color: #444444; 
}

/* ------ Style used to define the standard table used throughout ------ */
TABLE.stdTable {
	width:100%;
	border-spacing:0px;
	border-collapse:collapse;
}

TD.stdTable {
	padding:4px;
}

/* ------ Style used to define the colors in the search results ------ */

/* The background color behind the resources's title */
TR.resourceTitle {
	background-color:#eeeeee;
}

/* The background color for the resource's description */
TR.resourceBody {
	background-color:#ffffff;
}


/* ------ Style used to define the thin line used throughout ------ */
TABLE.thinLine {
	width:100%;
}

TD.thinLine {	
	background-color:#999999;
	height:1px;
}

/*  The class 'dleseTmpl' is attached to all elements
	that otherwise do not have class assignment, which includes instances 
	of the <a>, <p>, <form> and <li> elements. You may use this class
	to define custom rendering for these elements, if desired. */
dleseTmpl { }


  
University Corporation for Atmospheric Research (UCAR) National Science Foundation (NSF) National Science Digital Library (NSDL)