Scribd
Upload
24 views

Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide

Uploaded by

technabooks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide

Uploaded by

technabooks
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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
DOCTYPE The document type <!DOCTYPE html>
closing tag.
>
<a href="http://www.australia.com"> The most important attribute of the <a> element is the href
<a> A hyperlink
Australian Tourism</a> attribute, which indicates the link's destination.
The <body> element contains all the contents of an HTML
<body> The document's body <body> (content) </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>SEE AMAZING The <div> element is usually used with CSS to lay out a web
<div>
document SCENERY</h1> </div> page
<em>Get free information and travel
<em> Emphasised text Text will be displayed as italic in most browsers.
tips</em>
<form id="subscribe-form">
<p>
An HTML form for user The <form> element can contain form elements such as
<form> <label for="Firstname">Firstname: </label>
input <label> and <input>
<input type="text" name="firstname"> </p>
h1 to h6 have default sizes, which you can change if you
<h1> to <h1>This is heading 1</h1>
HTML headings need to. Use only for headings – not just to make text large or
<h6> <h2>This is heading 2</h2>
bold.
A container for all the <html> The <head> element must include a title for the document
<head>
head elements <head><title>New Zealand</title> </head> and can include styles and scripts.
<hr> Draws a horizontal line <hr> Use to separate two parts of the text or separate topics
Tells the browser that
<!DOCTYPE html>
<html> this is an HTML Place under <!DOCTYPE html>, above <head>
<html>
document
<img> An image <img src=newzealand.jpg width=90%> Use to place an image
Browsers automatically add some space before and after
<p> A paragraph <p>Explore the lakes of New Zealand</p> each <p> element. <p> tags are used for the content of a web
page
<strong> Emphasised text <strong>Book your flight now!</strong> Will be displayed as bold in most browsers
Style information for a <style>body {background-color: grey;} <style> is written in the <head> section and defines all the
<style>
document h1 {color: white; font-size: 24pt;} </style> styles for the document

1
Quick reference guide
CSS
<title> A title for the document <title>New Zealand</title> The title is displayed at the top of the window

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: 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
Quick reference guide
CSS
text-align Specifies horizontal alignment p{text-align: center;} Use this to align text left, right or centre

You might also like