Skip to content

Instantly share code, notes, and snippets.

@tddewey

tddewey/HTML CSS cheat sheet

Last active December 17, 2015 00:29
Show Gist options
  • Save tddewey/5521471 to your computer and use it in GitHub Desktop.
Save tddewey/5521471 to your computer and use it in GitHub Desktop.
Download ZIP
HTML and CSS Cheat Sheet made quickly for codewithme
Raw
HTML CSS cheat sheet
Do not copy and paste this. Your fingers need the muscle memory.
# HTML Cheat Sheet
<!-- basic structure tags -->
<html></html>
<head></head>
<body></body>
<!-- link to a stylesheet -->
<link rel="stylesheet" href="/css/style.css">
<!-- common elements -->
<p></p>
<a href="http://google.com">Google Link</a>
<img src="/images/image.png">
<script src="/js/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div></div>
<span></span>
<h1></h1>
<h2></h2>
<h3></h3> <!-- past 3 levels deep is usually unnecessary -->
<h4></h4>
<h5></h5>
<h6></h6>
<!-- semantic typography -->
<sup></sup> <!-- superscript -->
<sub></sub> <!-- subscript -->
<pre></pre> <!-- pre-formatted text -->
<em></em> <!-- emphasis -->
<strong></strong> <!-- Strong emphasis -->
<del></del> <!-- deletion/redaction -->
<!-- misc -->
<hr>
<br>
# CSS Cheat Sheet
/** Links, LVFHA, Lord Vader's Former Handle, Anakin **/
a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}
/** All of an element (and it's children, cascading) **/
p { }
h1 { }
body { }
/**
* Targeting Classes
*/
.class { }
.parent .child { }
.has.all.these.classes { }
/**
* Clearfix, if needed
*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/**
* Floats
*/
float: left;
float: right;
clear: right;
clear: left;
clear: both;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment