Created
September 25, 2013 11:09
-
-
Save mattandrews/6698148 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* set some base styles for the whole document */ | |
body { | |
font-size: 12px; | |
line-height: 18px; | |
font-family: arial; | |
background: #ededed; | |
color: #333333; | |
} | |
/* this removes the bullet points from the list */ | |
ul { | |
list-style: none; | |
} | |
/* remove the browser's default styles for these elements */ | |
h1, h2, li, ul, p { | |
margin: 0px; | |
padding: 0px; | |
} | |
/* make our heading nice and bold */ | |
h1 { | |
background: #333333; | |
color: #ffffff; | |
padding: 10px 5px; | |
margin-bottom: 20px; | |
font-weight: normal; | |
} | |
/* | |
the float/clear properties help make our layout work. for now, assume | |
they're magic -- we'll cover them in lesson #2! | |
*/ | |
li { | |
float: left; | |
clear: left; | |
padding-bottom: 15px; | |
margin-bottom: 15px; | |
border-bottom: 10px solid #dddddd; | |
width: 100%; | |
} | |
h2 { | |
font-size: 14px; | |
line-height: 18px; | |
font-weight: bold; | |
border-bottom: 1px solid #cccccc; | |
padding: 4px 0; | |
margin-bottom: 10px; | |
} | |
/* again: float effectively means the element | |
should allow text to wrap around it */ | |
img { | |
float: left; | |
margin: 0 10px 10px 0; | |
} | |
a { | |
color: red; | |
} | |
/* this is called a "pseudo-class" - it only applies | |
when the cursor is over the link */ | |
a:hover { | |
color: blue; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment