Jump to main content.

Matrix of Master Styles

CSS Matrix

The table below notes the required elements in the Redesign CSS and gives some explanation of what they do. This table is primarily for informational purposes.

These elements are scattered across multiple style sheets: main style sheet, and hacks for IE. A print style sheet controls the print output when the "Print Friendly" link is clicked.

The AA/RA/Topics level template calls for another style sheet that modifies and adds to the Master style sheet.

Local styles can only apply to the #content div.

Table 1: CSS Design Elements
Element Name CSS name Comments

Misc site-wide styles
Various hidden elements .skip These rules provide structure when CSS is off and help non-sighted users navigate. Similar statements in the print style sheet.
Linked images a img Removes borders from all linked images.
Style for PrintLinks javascript function .printOnly The PrintLinks function creates footnotes at the bottom of the page. This class hides those footnotes in the screen view, but reveals them in the print view.
Link colors a:[link|visited|hover|active] Link colors are spelled out in the palette.

Layout—Positioning of major page blocks
Body—main window styling body Sets the blue-stripe background image, base font, and font size. Percentage font-size for body and em for all other elements, starting at 76% (roughly equivalent to 12px) for content text. Helps render text at default setting. Line-height is set at 1.3em, improving readability.
Header div #header Positions element and sets the green "US EPA" logo in background at upper right.
Content div #content Sets position and margin of content div.
Left sidebar div #area-nav Sets position and width of "left" sidebar links.
Footer div #footer Sets position and margin of footer div. Clears any floats in content div.

Header
EPA Logo—image #header div#logo Positions EPA logo in upper left.
"Print Friendly" link #header #printDiv a Styles dynamically inserted print link.
Area Name div #areaname Provides background color and positions top "curve" ( ).
Area Name div#areaname p Sets font properties for the Area Name and positions bottom "curve" ( ).
Area Tagline #header p#tagline Sets font properties for the tagline for Regional pages.
Recent Addition/Contact Us links #header p Sets font and position of links. The Recent Additions link is not required.
Search—form #EPAsearch Removes default margins and padding around search form.
Search—text #header p#search Sets font-size and position for search option text.
Search—input box #searchbox Styles the search input box and its text.
Search—button #searchbutton Provides a small amount of margin-left for the Spanish template.
Breadcrumbs, Regional breadcrumbs #header ul Sets position, background-color, and font for breadcrumbs.
Breadcrumb—text #header ul li Styles the breadcrumb text and inserts nextarrow (an image) between each link to replicate ">" (>) in the markup.
Breadcrumb—first text #header ul li.first Removes the nextarrow before the EPA Home link.

Header—additional element for the AA/RA/Topics template
The statements in the AA/RA style sheet modify a few statements in the Master style sheet. There's also one new statement:
Tagline body#aara #areaname p#tagline Sets font-size for text, as well the bottom "curve" ( ).

Content Area—the white space for web owners
Area footer #content p#areafooter Sets text-alignment and font-size for text, as well as padding-top. Can be deleted.
Abbreviations and Acronyms #content abbr, #content acronym Sets font to small caps and adds a dashed underline for all abbreviations and acronyms.
local styles #content #whatever (or .whatever) The only section of the document where local styles can be applied. Includes box, various PDF, and lists styles. There's a lot here.

Area navigation—left sidebar
Left sidebar—unordered list #area-nav ul Styles the list of links in left sidebar. Provides padding (from browser left-edge) and text-indent, removing the need for <br> elements.
Left sidebar—horizontal rule #area-nav hr Provides a horizontal rule between home area home page (over-arching) and area home page.
Left sidebar—list items #area-nav ul li Styles the list items (links) in left sidebar. Provides padding between items.
Left sidebar—unordered sublist #area-nav ul ul Removes margin and padding for sublists (example sidebar sublist).
Left sidebar—sublist list items #area-nav ul ul li Brings sub-list items together and increases left-padding.
Left sidebar—links #area-nav a Styles links in left sidebar. Forces links to be a block to increase the "clickable" area. The "hover" rule styles the highlight colors.

Footer—global footer
Global footer—unordered list ul#globalfooter Sets position and margin of global footer links. Also sets a dark blue border-top, 4px wide, to eliminate the need for the epafiles_misc_dot_dkblue.gif image.
Global footer—list items ul#globalfooter li Forces list to display inline and sets padding/margin between items. Also uses border-right to separate link items.
Global footer—last list item ul#globalfooter li.last Removes border-right from last list item (contact us link).
Generated date p#date Positions the javascript-generated date.
Generated URL p#url Positions the javascript-generated url.

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.