Work With Styles and Stylesheets

The main stylesheet overview

To better find your way around these stylesheets, here's an overview of their basic organization. It is suggested that you open one of the stylesheet to follow along.

Here's a list of the different style groups, in the order that they appear in the stylesheet:

• the layout classes like div#page, div#header, ...;
• the body selector is at the top of the page;
• the headings (h1, h2, h3, h4, h5, h6);
• the most common HTML block tags like p,
• other HTML tags a,ul, ol, li, table, tr, td;
• lots of tags from different versions of the HTML standard;
• some useful generic classes .left, .center, .right, .indent;
• some special classes;
• other template related classes like navigation and breadcrumb;
• styles found in the custom drop down list;
• publication specific styles;
• any other special styles;
• print styles.

Looking at the stylesheet more globally should help you get faster to the style you need to adjust to get your intended design just right.

Modify the stylesheet

Try modifying the stylesheet. This block of styles in the middle of the stylesheet is a good one to look into.

em {color:red}
cite {border-bottom:1px dashed;}
code {color:maroon; font-family: monospace;}
em {}
kbd {padding:0px 2px 0px 2px; font-size:1.1em;
      border-width:1px 2px 2px 1px; border-style:solid}
samp {padding:0px 2px 0px 2px; border:1px solid #cccccc;
      background:#ccffcc; font-family: courier, monospace; }
strong {}

Why wouldn't you use standard HTML element for your markup? It's already available! You could even add a class attribute for an even richer tag set.

This CSS reference page might become handy during your stylesheet developement journey.