more ramblings of a retired teacher
commenting (maybe ranting) on education - even my own
Categories:

Archives:
Meta:
June 2013
M T W T F S S
« May   Jul »
 12
3456789
10111213141516
17181920212223
24252627282930
06/30/13
CSS Simple Look
Filed under: P2PU, Education
Posted by: Algot @ 6:31 pm

I’ve been exploring Cascading Style Sheets.

I have a long way to go, but one experiment is getting a simple layout that has just a single column, but has a better look than a plain html page. While it is not part of the specific tasks of P2PU Webmaking 101, I’m including the effort as an extension of that activity.

Here’s what I’ve come up with for now.

/* simple.css stylesheet */

body { background-color: #eee; background-image: url(’http://runeman.org/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;
}

To see how it looks in action: http://runeman.org/programming/css/demo-onecolumn.html
And remember to check the html source, too (usually accessed with the Ctrl+U keys to display a browser window of the source.)

Comments Off