This is a draft cheat sheet. It is a work in progress and is not finished yet.
HTML
<!-- comment --> |
Comment |
!DOCTYPE html |
This goes at the start of the document |
<html> |
All the html goes in here |
<head> |
Info about the website goes here |
<title> |
Name of the website |
<body> |
Things that appear to the user goes here |
<h1> |
Heading level 1 |
<h2> |
Heading level 2 |
<p> |
Paragraph |
<em> |
Italics |
<strong> |
Bold |
<div> |
Section of the page |
<span> |
Part of a section of the page |
<br> |
Line break |
<img src="image" alt="text"> |
Image |
<a href="link"> |
Link |
<ul> |
Unordered list |
<ol> |
Ordered list |
<li> |
List element |
<table> |
Table |
<tr> |
Row in table |
<th> |
Header table cell |
<td> |
Data table cell |
<h1 class="classname"> |
Make the h1 element part of the class "classname" |
<h1 id="idname"> |
Give the h1 element an id called idname |
|
|
CSS
selector{
property:value;
property2:value2;
} |
Format |
<link rel="stylesheet" href="style.csss"> |
Link in the head of the html file |
Selectors |
* |
All elements |
div |
Everything inside the div tag |
span |
Everything inside the span tag |
h1 |
All h1 elements |
h1, p |
All h1 and p elements |
h1:hover |
All h1 elements when the mouse is hovering over it |
.classname |
Everything in that class |
#idname |
Everything with that id |
Properties |
background-color |
The colour of the background |
background-image |
The image in the background |
background-repeat |
How the background image is repeated |
color |
Text colour |
font-size |
Size of text |
font-family |
Font of the text |
font-style |
Whether the font is italic |
font-weight |
Whether the font is bold |
height |
Height of the element |
width |
Width of the element |
line-height |
Line height of text |
text-align |
Align the text left, right or center |
text-decoration |
Whether the text is underlined or has a strike through |
border |
Border thickness style colour |
border-bottom |
Bottom border thickness style colour |
border-radius |
How rounded the corners of the border is |
margin |
How much margin to leave on the top right bottom and left |
padding |
How much space between the content and the border on the top right bottom and left |
|
