Java Practices -> Use Cascading Style Sheets

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 :

as usual, centralized policies greatly reduce maintenance effort
many visual effects offered by CSS cannot be produced by simple HTML
file download times improve slightly, since repeated markup is eliminated
pleasing designs are easy to produce

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 :

name items at a high level of abstraction, without exposing implementation details. For example, a good name for a style class is highlight, and a bad name is bold-and-yellow
to maximize reuse, prefer external style sheets over styles defined in a single HTML page
name style sheets with a .css extension, to ensure they work with tools which may incorrectly require that extension
if using pseudo classes for links, use a:link and a:visited as a pair
for font sizes, usually prefer em or % (relative), over ex and px (absolute)
the font-size styles of xx-small, x-small, and so on, are not consistent across browers, and should likely be avoided. It is a kind of absolute measure.
when referring to specific fonts, always include a generic font family to be used as an alternative : serif, sans-serif, monospace
some recommend that !important should be avoided
favor techniques which minimize the amount of markup
use the CSS Specification as reference, and use the CSS Validator to verify your work

Reminders :

. denotes a class
# denotes an id
: denotes a pseudo-class, as in a:visited
[] denotes attribute selectors
according to the specification, class and id names are case sensitive
element box = content area + padding + border + margin (in order from middle outwards)
the width of an item refers only to the content area, and not the whole element box
the LINK tag is placed in the HEAD tag
a typical LINK:

<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?