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

Archives:
Meta:
December 2020
M T W T F S S
« Mar    
 123456
78910111213
14151617181920
21222324252627
28293031  
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 are closed.