Home > Programming > CSS

Demo of simple.css Stylesheet

Note: This file is from 2013, and is retained to help me remember the sequence of steps that got me here (2023). Others may not benefit too much from it. In 2013 the "standard" was a 2-column page.

In 2013, I decided that I don't want to always have the same page layout. I believe that some pages look better if they are a single column. However, I want to be able to keep the overall "look" cohesive. The recent redesign of the site changed the color scheme.

At the same time as the redesign, I shifted much of the layout control over to cascading style sheets. This page is a demonstration of the one column layout with colors that match the "standard" two column main page layout.

Cascading style sheets (CSS) provide an easier way to apply consistency to page layout. By putting as much control as possible of the "look" into style sheets, we can make changes in the style sheet that changes how all the pages look. This is an important change. The older layout was dependent on trying to make all the style control code consistent within each of the growing number of page files on the site.

The site redesign transferred layout/look control to the style sheets. Right now, the simple style sheet is what follows. It reflects the fundamentals of the main stylesheet, but skips the column layout and navigation issues.

/* simple.css stylesheet */

body { background-color: #eee; background-image: url('/images-std/graph.gif');}

h1, h2, h3, h4 { font-family: "DejaVu Sans", Helvetica, FreeSans, Geneva, Arial, sans-serif;
}

h2 { font-color: #999;
}

#main {
  /*old width:68%; */ 
  width:90%;
  margin-left:3%;
  margin-right:3%;
  border-top: 10px solid #800080;
  color:#000;
  background:#fff;
  padding:20px;
}

#footer {
  clear:both;
  width:100%;
  font-family: "Droid Sans", Helvetica, Arial, sans-serif;
  font-size:80%;
  color:#fff;
  background:#800080;
  margin:.2em auto;
  padding:.3em;
}

You are freely welcome to use this stylesheet layout as-is, and your modifications are, of course, your own choice. License: CC0