Quick reference guide
HTML
Tag What it defines Example Usage
<!--…--> A comment <!-- This is a comment --> Use comments to explain your HTML code
<! This must be the first line in your HTML document. It has no
The document type <!DOCTYPE html>
DOCTYPE> closing tag.
<a href="[Link] The most important attribute of the <a> element is the href
<a> A hyperlink
See Paris</a> attribute, which indicates the link's destination.
The document's The <body> element contains all the contents of an HTML
<body> <body> (content) </body>
body document, such as text, hyperlinks, images, etc.
<br> Line break <br> This tag has no closing tag
A section in the <div id="container"><h1>Eiffel Tower</h1> The <div> element is usually used with CSS to lay out a web
<div>
document </div> page
<form id="subscribe-form">
<p>
An HTML form for The <form> element can contain form elements such as
<form> <label for="Firstname">Firstname: </label>
user input <label> and <input>
<input type="text" name="firstname"> </p>
<h1> to <h1>This is heading 1</h1> h1 to h6 have default sizes, which you can change if you need
HTML headings
<h6> <h2>This is heading 2</h2> to. Use only for headings – not just to make text large or bold.
A container for all <html> The <head> element must include a title for the document and
<head>
the head elements <head><title>Paris</title> </head> can include styles and scripts.
Draws a horizontal
<hr> <hr> Use to separate two parts of the text or separate topics
line
Tells the browser
<!DOCTYPE html>
<html> that this is an HTML Place under <!DOCTYPE html>, above <head>
<html>
document
<img> An image <img src=[Link] width=90%> Use to place an image
Browsers automatically add some space before and after each
<p> A paragraph <p>Explore Paris</p>
<p> element. <p> tags are used for the content of a web page
Style information for <style>body {background-color: grey;} <style> is written in the <head> section and defines all the
<style>
a document h1 {color: white; font-size: 24pt;} </style> styles for the document
A title for the
<title> <title>Eiffel Tower</title> The title is displayed at the top of the window
document
1
Quick reference guide
CSS
CSS Property Description Example Usage
/* */ A CSS comment /* This is a comment */ Use comments to explain your CSS code
Background and dimension properties
Sets the background colour of an element
background- p{background-color: #0000FF;} The colour can be defined by name or in
such as body, p or an id selector e.g.
color #header{ background-color:gray} hexadecimal, e.g. blue = #0000FF
#header
Sets the width of an element (height sets Using a percentage instead of an absolute width
width #container{width=100%;}
height) makes the web page responsive
Sets the maximum width of an element However wide the screen the element will never
max-width #container{max-width: 800px;}
(see also max-height, min-height, min-width) be wider than 800px
Font properties
Body{font-family: Arial, Verdana, If the browser does not support the first font
font-family Specifies the font-family for text
sans-serif;} listed, it tries the second, then the third etc.
font-size Specifies the font size for text p{font-size: 200%;} The font is set to twice the default size for p
Specifies all the font properties in one p{font: bold italic 20px arial,sans- Can set font size in px or pt (pt size is larger
font
declaration serif} than px)
color Specifies the font color p{color: lightblue;} Can also use hex codes for color: color: #ccff00;
Margin, border and padding properties
Sets all the margin properties in one The margin defines the space outside a border;
h2{margin:20px}
margin declaration (left, right, top, bottom) in px, pt, it is completely transparent. auto gives a default
#container{margin: auto;}
cm etc. margin
Sets all the border properties in one
h1{border:5px solid gray;}
border declaration. (border-width, border-style and It does not matter if one of the values is missing.
body{dotted black;}
border-color)
Sets all the padding properties in one Defines the space round the content inside a
padding #navbar{padding: 5px;}
declaration border
Positioning properties
float Lets an element float to the left or right img {float:right;} Use this to position an image to the right of text
Text properties
h1{color: white; font-size: 24pt;} The colour can be defined by name or in
color Sets the colour of text
a:link{color: #0000FF;} hexadecimal, e.g. #0000FF is blue
text-align Specifies horizontal alignment p{text-align: center;} Use this to align text left, right or centre