Use Cascading Style Sheets

Cascading Style Sheets (CSS) centralize decisions on how web pages are styled - fonts, colors, layouts, and so on.

Some advantages of using CSS:

Support for CSS varies among browsers. Some care must be taken that pages render adequately in the most popular ones.

Some recommendations on using CSS:

Reminders: <link rel="stylesheet" type="text/css" href="styles.css" media="all" >

Be Aware of Browser Caches

Browsers cache style sheets. If an update to a web site includes changes to a style sheet, then the developer will often need to manually refresh the browser's cache, in order to see the updates (the specifics apparently depend on the browser). However, when deploying such an update, it's not acceptable to expect the end user to do the same thing.

To ensure that all users see the updated version of a stylesheet, there's a simple workaround : just rename the style sheet. Of course, related references need to reflect the new name as well. This will force the browser to always load the updated version.

Example style sheet

/* Color scheme comes first. */
body {
   background-color: rgb(255,255,255);
}
a {
 color: rgb(0,100,26); 
}
a:hover {
  background-color:rgb(164,255,158); 
}
a:visited {
 color: rgb(0,150,26); 
}
.opening-quote{
  background-color:  rgb(85%, 85%, 85%);
  border-top: 1px solid rgb(50%,50%,50%);
  border-left: 5px solid rgb(50%,50%,50%);
  border-right: 5px solid rgb(50%,50%,50%);
  border-bottom: 1px solid rgb(50%,50%,50%);
}
img.photo {
 border-color: rgb(50%,50%,50%);
}
.highlight {
 background-color: #ffff66; 
}
.sidebar{
  background-color:  rgb(85%, 85%, 85%);
  border-top: 1px solid rgb(50%,50%,50%);
  border-left: 5px solid rgb(50%,50%,50%);
  border-right: 5px solid rgb(50%,50%,50%);
  border-bottom: 1px solid rgb(50%,50%,50%);
}

/* End of the color scheme. */

body {
  margin: 0; 
  padding:0;
  font: 1.0em Verdana, Arial, Helvetica, sans-serif;
}

a {
 font-weight: bold;
 text-decoration: none;
}

h2{
  font: bold 20px Verdana, Arial, Helvetica, sans-serif;
  border-bottom: 1px solid;
}

h3{
  font: bold 16px Verdana, Arial, Helvetica, sans-serif;
}

h4{
  font: bold 16px Verdana, Arial, Helvetica, sans-serif;
}

blockquote.abstract{
 padding: 0.3em;
}

ul {
 list-style-type: square;
}

tr { 
  vertical-align: top 
}

/* 
Tables used for user input.
*/
form.user-input table {
 background-color: rgb(83%, 83%, 83%);
 border-style: solid;
 border-width: 2px; 
 border-color: rgb(45%,45%,45%); 
 padding: 1.0em;
}
/* improves alignment of form controls */
form.user-input input {
 margin: 0;
}

/* 
REPORTS 
Here, reports are implemented with tables, and refer to any kind of listing.
*/
table.report {
 background-color: rgb(83%, 83%, 83%); 
 border-style: solid;
 border-width: 2px;
 border-color: rgb(45%,45%,45%); 
 border-collapse: collapse;
 empty-cells: show; 
 caption-side: bottom;
}

table.report td, th {
 /*white-space: nowrap;*/
 border: 1px ridge rgb(65%,65%,65%); 
 padding: 0.30em;
}

/* no underline for sorting links */
table.report th a {
  text-decoration: none;
}
table.report th img {
 padding: 0;
 margin: 0;
}

table.report tbody {
 border: 1px solid black;
}
/* 
Highlighting the row when the cursor hovers above it 
increases legibility. 
*/
table.report tr:hover {
  background-color: #FFFDE3;
}
table.report caption {
 font-weight: bold;
 text-align: center;
 padding: 0.5em;
}
table.report caption:after {
 content : " - ";
}
table.report caption:before {
 content : " - ";
}

/* 
MESSAGES of various kinds.
*/
.message {
 font-weight: bolder;  
}
.warning {
 font-weight: bolder;  
}
.error {
 font-weight: bolder;  
 color: rgb(255,0,0);
}
p.display-messages {
 text-align: center;
}

img.photo {
 margin-top:1.0em;
 margin-bottom:1.0em;
 margin-left:1.0em;
 margin-right:1.0em;
 border-style: solid;
 border-width: 2px;
}

img.photo-home {
 margin: 0;
 border-style: solid;
 border-width: 2px;
 float: left; 
}

/* The top banner */
#header{
 text-align:center;
 padding-top:1.70em;
}

.loud {
 font-size: 150%;
 padding: 1.0em;
}

#bodycontent{
  margin-left: 0px;
  margin-right: 0px;
}

#nav-menu{
  padding-top:18px;
  padding-left:15px;
  width:120px;
  float:left;
  display:block;
} 

#nav-menu ul {
  list-style-type: none;
  display:block;
  padding: 0;
  margin: 0;
}

#nav-menu li {
  text-decoration: none;
  display:block;
}

#nav-menu li a {
  padding-left: 7px;
  padding-top: 6px;
  height: 22px;
  /* width: 113px; */
  width: 70px;
  display: block;
  text-decoration: none;
  font-weight: bold;
}

/* Search form in menu */
#nav-menu li form {
  padding-left: 7px;
  padding-top: 6px;
  height: 22px;
  width: 113px;
  font-weight: bold;
}

#content{
  /* margin-left: 135px; */
  margin-left: 100px;
  padding-left:10px; 
  padding-right:10px; 
  padding-top:1px; 
}

#contentdisabled{
  margin: 10px;
  padding:10px;
}

.maincopy a:hover {
  text-decoration: underline;
}

#textcontent{
  height:100%;
  padding-left:0;
  padding-right:15px;
}

div.author {
 font-style: italic;
 padding-top: 0em;
 margin-top: 0.25em;
 text-align: right;
}

.opening-quote{
  margin: 10px;
  padding: 10px;
}

.sidebar{
  margin: 10px;
  padding: 10px;
}

#footer{
  text-align:center;
  height:24px;
  padding-top: 10px;
  padding-left: 0px;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
  padding-right: 10px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}

.small-graphic{
 float:left;
 margin-right:0.2em;
}

/* sometimes footer is too high on page */
div.spacer {
  height: 14.0em;
}
div.smallspacer {
  height: 7.0em;
}
div.bigspacer {
  height: 30.0em;
}

/* Styles for print. */
@media print {
 * {
  color: black !important;
  background: white !important;
 }
 body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
 }
 a {
  text-decoration: none;
 }
 img.photo {
  display: none;
 }
 div#nav-menu{
  display: none;
 }
 div#header{
  display: none;
 }
}

Would you use this technique?
Yes   No   Undecided   
© 2014 Hirondelle Systems | Source Code | Contact | License | RSS
Individual code snippets can be used under this BSD license - Last updated on September 21, 2013.
Over 2,000,000 unique IPs last year - Built with WEB4J.
- In Memoriam : Bill Dirani -