HTML Cheat Sheet

Structures

<div></div>

<div class=”name”><?div>

<span></span>

Group as a block

Naming an element (access in css via .name {})

Group in a line

Text

<p></p>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<strong></strong>

<em></em>

<br/>

Paragraph

Most important title

Least important title

Bold

Italic

Jump to next line

Links and Images

<a href="http://url.com">Link</a>

<img src="http://link-to-image" alt="Description" />

Link to the given URL

Displays image found at URL

Lists

<ul>

<li></li>

<li></li>

</ul>

<ol>

<li></li>

<li></li>

</ol>

Unordered lists

Item 1
Item 2

Ordered (Numbered) Lists

Item 1
Item 2

Page structure

<html>

<head>

<title>SITE TITLE</title>

</head>

<body>

SITE CONTENT

</body>

</html>

CSS Cheat Sheet

Structure

div {

Property: value

}

First tag refers to element (here <div></div>) or class (example: .name {} for <div class=”name”></div>)

Spacing - Box model

width: 500px;

width: 60%;

height: 500px;

height: 80%;

height: auto;

padding: 10px;

padding: 10px 5px;

padding: 10px 5px 30px;

padding: 20px 10px 5px 10px;

margin: 20px;

margin: 20px 50px;

margin: 20px auto;

margin: 20px auto 5px;

margin: 20px 5px 50px 5px;

float: none;

float: right;

float: left;

Padding top & bottom, right & left

Padding top, right & left, bottom

Padding top, right, bottom, left

Margin all around

Margin top & bottom, right & left

Margin top & bottom, centered

Margin top, centered, bottom

Margin top, right, bottom, left

Shift the element to the right of everything

Shift the element to the left of everything

Backgrounds and borders

background: purple;

border: 5px solid black;

border: 5px dashed black;

border: 5px dotted black;

border-radius: 30px;

For colors check

http://www.crockford.com/wrrrld/color.html

Text and fonts

font-family: sans-serif;

font-family: serif;

font-size: 16px;

font-weight: normal;

font-weight: bold;

font-style: normal;

font-style: italic;

text-transform: capitalize;

text-decoration: none;

text-decoration: underline;

text-align: left;

text-align: center;

text-align: right;

text-align: justify;

color: purple;