HTML 5 : My CSS

Below is my CSS. It is small and that's on purpose. I treat this as my MSS (my Modular Style Sheet). It is here to add some structure, not to get total control over every letter in the webpage. For one: I never pick a specific font for a font family. If things need to be monospaced font, I have in the style sheet:

   font-family : monospaced;

I do this for the sake of freedom (you guessed it: I'm a Linux user) of choice. If you use an open source browser you are free to pick the font type you want to. Just visit Edit -> Preferences -> Appearance -> Fonts and pick the kind YOU like. YOU have to view these pages, not I. So it's not more than fair that you have the freedom to pick the font you want. Only selfish and egocentric webpage makers will make that choice for you. Anyway, below is my CSS. Pay atention to the place of the colon (':') since it improves readability of the files considerably.

body	{ font-family		: sans-serif;
	  color			: black;
	  background-color	: white;
	  padding		: 8px;
	}

h1, 
h2, 
h3	{ font-family		: serif;
	  background-color	: white;
	}

blue	{ color			: blue;
	  font-weight		: bold; }

cyan	{ color			: cyan;
	  font-weight		: bold; }

green	{ color			: green;
	  font-weight		: bold; }

red	{ color			: red;
	  font-weight		: bold; }

maroon	{ color			: maroon;
	  font-weight		: bold; }

h1	{ font-size		: 175%; 
	  color			: teal;
	}

h2	{ font-size		: 150%; 
	  color			: maroon;
	}

h3	{ font-size		: 125%; 
	  color			: olive;
	}

p	{ color			: black; }

li	{ padding-bottom	: 5px;
	  padding-top		: 5px;	}

pre	{ font-family		: monospace;
	  font-weight		: bold;
	  color			: blue;
	  background-color	: #F0F0F0;
	  padding-top		:  5px;
	  padding-left		: 20px;
	}

td,
a	{ font-family		: monospace; }

td	{ background-color	: #F8F8FF; }

a:link	{ color			: green; }

a:visited
	{ color			: red; }

a:hover	{ color			: yellow;
	  background-color	: black; }

a:active
	{ color			: navy; 
	  background-color	: yellow; }

.mono	{ font-family		: monospace;
	  text-align		: right;
	}

.header	{ font-family		: sans-serif;
	  font-size		: 150%;
	  font-weight		: bold;
	  background-color	: #DDDDDD;
	  color			: black;
	  padding		: 10px;
	  margin-top		: 10px;
	}

.GB,
.summ	{ font-family		: monospace;
	  font-weight		: bold;
	  color			: black;
	}

.summ	{ padding		: 10px;
	  margin		: 10px;
	  border		: 1px dashed #808080;
	  background-color	: #E0FFE0;
	}

.GB	{ text-align		: right;
	  padding		: 5px;
	  border-top		: 1px dotted black;
	}

.center	{ text-align		: center; }

.navihead
	{ color			: #FF00FF;
	  font-weight		: bold;
	  font-family		: monospace;
	  font-size		: 120%;
	}

.right	{ float			: right;
	  margin-left		: 7px;
	  margin-bottom		: 5px;
	}

.left	{ float			: left;
	  margin-right		: 7px;
	  margin-bottom		: 5px;
	}

.top	{ color			: teal;
   	  text-align		: center;
   	  font-family		: monospace;
	  font-weight		: bold;
	  font-size		: 150%;
	  padding		: 0px;
	  margin		: 0px;
	}

.Fat	{ font-weight		: bold;
	  font-family		: monospace;
	}

I might add a few more style definitions. Not sure about it, though. Come back now and then to see how things change.

Page created on 10 August 2009 and

Page equipped with FroogleBuster technology!