Skip to content

Instantly share code, notes, and snippets.

@hhua

hhua/foo.html

Created February 4, 2014 04:37
Show Gist options
  • Save hhua/8798230 to your computer and use it in GitHub Desktop.
Save hhua/8798230 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Study 1
Raw
foo.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="text">
<span class="block">Hello World</span>
<p id="second-text" class="block">Hello World</p>
<p id="third-text" class="block">Hello World</p>
<p class="image">Hello World</p>
<p id="last-text" class="block">Hello World</p>
</div>
<hr />
<div id="block">
<div id="first" class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
Raw
style.css
.block{
font-size: 16px;
font-family: serif;
font-weight: 900;
font-weight: bold;
font-weight: normal;
font-style: italic;
font: 30px italic 'Helvetica' bold;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
color: blue;
color: #999999;
color: rgba(0, 0, 0, 1);
}
.block{
background-color: red;
width: 600px;
width: 50%;
height: 100px;
}
#third-text{
visibility: hidden;
display: none;
display: block;
}
#last-text{
visibility: hidden;
visibility: visible;
}
#second-text{
opacity: 0.2;
color: rgba(0, 0, 0, 0.1);
}
.image, .block{
background-color: blue;
}
#text .image{
background-color: red;
}
#block .image{
display: block;
width: 100%;
height: 100px;
margin: 10px;
}
#block{
background-color: yellow;
}
#first{
background-image: url(http://farm4.staticflickr.com/3744/12290223564_240f5d30a4_b.jpg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment