Skip to content

Instantly share code, notes, and snippets.

@magadanskiuchen
Created November 15, 2012 20:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magadanskiuchen/4081085 to your computer and use it in GitHub Desktop.
Save magadanskiuchen/4081085 to your computer and use it in GitHub Desktop.
Basic HTML5 Structure (styling)
@charset "utf-8";
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { width: auto; height: auto; }
body { background: #E0E0E0; color: #202020; font: normal 12px Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font: small-caps bold 100%/120% Georgia, "Times New Roman", Times, serif; }
h1 { font-size: 300%; }
h2 { font-size: 240%; }
h3 { font-size: 160%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }
h6 { font-size: 90%; }
ol, ul { margin: 4px 0 4px 20px; }
p { margin: 0 0 10px; }
a { color: #000080; text-decoration: underline; }
a:hover { text-decoration: none; }
.cl { clear: both; height: 0; font-size: 0; line-height: 0; text-indent: -5000em; }
#wrapper { width: 960px; margin: 0 auto; }
#wrapper > header { text-align: center; }
header hgroup { background: #666; color: #FFF; }
nav ul { margin: 20px 0; padding: 0; list-style-type: none; font-size: 120%; }
nav ul li { display: inline; }
nav ul li a { display: inline-block; margin: 0 0 0 20px; padding: 3px 8px; background: #666; color: #FFF; text-decoration: none; }
nav ul li:first-child a { margin-left: 0; }
nav ul li a:hover,
nav ul li a:focus { background-color: #333; }
section.main { float: left; width: 630px; margin: 0 10px 0 0; }
article { margin-bottom: 50px; }
article header { margin-bottom: 10px; }
article footer { margin-top: 10px; }
article footer p { margin-bottom: 4px; }
section.sidebar { float: right; width: 310px; margin: 0 0 0 10px; }
aside { margin-bottom: 20px; border: 1px solid #666; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 15px; }
#wrapper > footer { clear: both; padding: 20px 0; background: #666; color: #FFF; font-weight: bold; font-size: 120%; text-align: center; }
#wrapper > footer p:last-child { margin-bottom: 0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment