CoderDojo Tip: Stylesheet Example
 

Here's the code for the skeleton stylesheet we use in the book to highlight the various parts of the page. Copy and paste it to follow along with the example. You can change the colors if you like – just make sure they're all different so that you can see the different parts of the page.

/* technical stuff - set sizing to border box method */

html {
box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

/* style the various structural elements */

html {
background-color: Black; }

body {
background-color: GhostWhite; }

header {
background-color: Crimson; }

nav {
background-color: DarkOrange; }

article { background-color: Gold; }

section {
background-color: LawnGreen; }

aside {
background-color: RoyalBlue; }

footer {
background-color: DarkOrchid; }

Explore Everything
CoderDojo