Web site handbook > Development standards > Cascading stylesheets
Cascading stylesheets
This is an explanation of cascading stylesheets.
- Document stylesheet source code
- Import base stylesheet
- Global navigation active link
- Sub-navigation background image
- Sub-navigation active link
- Sub-navigation menus
- Document styles
Document stylesheet source code
<style type="text/css">
<!--
@import url(/_css/base.css);
/* global navigation link */
#gn {background-color:#433625;color:#ffffff;}
/* subnav background */
#subnav {background-image:url(/images/sub-image.jpg)}
/* subnav active link */
#subnav a# {font-weight:bold;text-decoration:none;}
/* subnav menus */
/* document css */
-->
</style>
The stylesheet is edited as described below.
Import base stylesheet
Do NOT edit this line. This imports the base stylesheet for the entire Web site. It must be included in every document.
@import url(/_css/base.css);
Global navigation active link
Change the id to match the document's location in the site. For example, a document in the "readers" area looks like this:
/* global navigation link */
#gnreaders {background-color:#433625;color:#ffffff;}
This causes the global navigation link "readers" background to be darker brown.
Sub-navigation background image
If the document has a sub-navigation menu, an image can be displayed. For example, the Central Library is displayed like this:
/* subnav background */
#subnav {background-image:url(/central/images/sub-central.jpg)}
Be sure to use the full path for the file location for the sub-navigation image.
Sub-navigation active link
The link in the sub-navigation menu corresponding to the current document should be bold and not underlined (when the mouse hovers over it). There is only one active sub-navigation link on a page.
/* subnav active link */
a#central {font-weight:bold;text-decoration:none;}
Sub-navigation menus
Sometimes a topic is further broken down into subtopics that appear as nested menus.
All documents in the sub-navigation menu contain CSS to either hide or display these nested menus according to the document's position in the menu. For example, this is an outline of the Central Library section of the Web site:
Central Library
- Floor plans
- Collins Gallery
- Policy
- Application
- John Wilson Room
- Featured Works
- Sterling Room for Writers
- Application
When a user is viewing a document that is not related to "Collins Gallery" or one of its sub-topics, the "Collins Gallery" sub-topics are hidden from view. It is only when the user is viewing a "Collins Gallery" topic that its sub-topics are visible. Therefore, any document in the "Collins Gallery" topic has this CSS:
/* subnav menus */
#sncollins{display:none;}
#snwilson{display:block;}
#snsterling{display:block;}
Document styles
Do NOT create custom styles without consulting the webmaster.
Declare any custom CSS class below this line:
/* document css */
