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.
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
*/
Seperate sections of your style sheet by providing a title comment for each section.
/*********/
/* Header */
/********/
...
/****************/
/* Main Navigation */
/***************/
...
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;
Define your selectors in order of apperance in HTML. Generaly the order of apperance in HTML will flow as header, navigaiton, 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;
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.
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%).
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;
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.
*/ 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>
