Scribd
Upload
16 views

Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide

Uploaded by

technabooks
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide

Uploaded by

technabooks
Copyright
© © All Rights Reserved
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