Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/index.html

Last active August 29, 2015 14:04
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 clhenrick/8154913fce18e114c8f9 to your computer and use it in GitHub Desktop.
Save clhenrick/8154913fce18e114c8f9 to your computer and use it in GitHub Desktop.
Download ZIP
mfa bootcamp day 3 demo code: more selectors
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS Selectors</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height, width: 100%;
}
/* Pay attention to difference between the selectors for the following ids and classes */
#header {
background-color: hsla(10, 100%, 70%, 0.6);
}
.callout {
background-color: hsla(300, 100%, 70%, 0.6);
}
#wrapper {
height, width: 80%;
margin: 10%;
position: relative;
}
#header .callout {
background-color: hsla(50, 100%, 70%, 0.6);
}
#header.callout {
background-color: hsla(150, 100%, 70%, 0.6);
}
.callout.callout2 {
background-color: hsla(85, 100%, 70%, 0.6);
}
div {
position: relative;
display: table;
height: 300px;
width: 300px;
margin: 5%;
}
div p {
font: bold 20px"Gil Sans", sans-serif;
color: hsla(0,0%,20%,0.6);
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="callout">
<p>Class: callout</p>
</div>
<div id ="header">
<p>id: header</p>
</div>
<div id="header">
<div class="callout">
<p>Parent id: header <br>
Child class: callout</p>
</div>
</div>
<div id="header" class="callout">
<p>id: header &#38; <br> class: callout</p>
</div>
<div class="callout callout2">
<p>class: callout callout2</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment