University of Texas at Austin
Libraries Home | Mobile | My Account | Renew Items | Sitemap | Help |
support us
University of Texas Libraries
Celebrating the Life

Guidelines for the use of CSS

The Libraries' template applies a style sheet called utlol-2nd.css to your document. This style sheet takes care of font (Verdana or a sans serif font of the user's choosing), line spacing (1.5 for paragraphs and 1.2 for lists), and colors (text and links). Do not override those styles. For an introduction to CSS visit the Learn CSS Web site.

Please use the following recommendations as a guide when developing and editing CSS for the University of Texas Libraries.

Overview Commenting

Use comments to provide a quick overview of the main styles applied.

/* Overview Styles
Body Background #ffffff
Content Font Size .85em
Content Font Color #666666
Line Height 1.5em
Link Color #195252
Link Visited #098484
*/

Section Commenting

Seperate sections of your style sheet by providing a title comment for each section.

/*********/
/* Header */
/********/
...

/****************/
/* Main Navigation */
/***************/
...

Note Commenting

Provide notes as a reminder to help avoide confusion.

/* secondary page content, if there's a left-hand navigation bar */
#actualcontent {
position: relative;
...
/* dropdown menus, initially hidden */
#nav li ul {
position: absolute;
left: -999em;

Order of CSS

Define your selectors in order of apperance in HTML. Generaly the order of apperance in HTML will flow as header, navigation, content and footer.

Place your general selectors and classes at the top of the style sheet.

body {
font:normal normal normal 100% Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background: white;
padding: 1em; /* white space around site */
margin: 0;
}
#wrapper {
margin:0 auto;
text-align:left;
width:98%;
min-width:800px;
}
div {
margin: 0;
padding: 0; /* prevents whitespace around different site elements */
}
img {
border: 0; /* prevents blue border around image links */
}
a:link {
text-decoration: none;

Using Units

Use em and % for font and spacing while using pt in your print version. Because the em unit is a relative unit define your font size as 100% in your body. For further documentation on using em units as font sizes visit the W3C C14 section.

Using Colors

To insure correct color representation use RGB values when assigning color. There are three methods to assign RGB values, hexidecimal ex: #ffffff, RGB value ex: rgb(255,255,255), and RGB percent ex: rgb(100%,100%,100%).

Use Shorthand CSS

Make your Style Sheet more legable and smaller by using short hand.

/*short hand*/
margin: 8px 4px 1px 2px;

/*long method*/
margin-top:8px;
margin-right:4px;
margin-bottom:1px;
margin-left:2px;

Avoid Hacks using Conditional Comments for IE

Most browsers comply with CSS standards. Write your styls to avoid browser specific hacks and use conditional comments to target a IE specific style sheet with specific style settings. For more information on Conditional Comments for IE visit the Microsoft Developer Network.

Attach your Style Sheet using the link, or @import, method while defining your media.

*/ link method for screen media */
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

/* import method for screen media */
<style type="text/css" media="screen">
@import url("stylesheet.css");
</style>