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

Archives:
Meta:
November 2017
M T W T F S S
« Mar    
 12345
6789101112
13141516171819
20212223242526
27282930  
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.)

Leave a Reply