Published using Google Docs
Updated automatically every 5 minutes

HTML Cheat Sheet



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


Group as a block

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

Group in a line













Most important title

Least important title



Jump to next line

Links and Images

<a href="">Link</a>

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

Link to the given URL

Displays image found at URL










Unordered lists

  • Item 1
  • Item 2

Ordered (Numbered) Lists

  1. Item 1
  2. Item 2

Page structure



                <title>SITE TITLE</title>



                SITE CONTENT



CSS Cheat Sheet


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 

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;