HTML & CSS Cheat Sheet
Click item for more information
Code
All HTML5 documents must start with a document type declaration: <!DOCTYPE HTML>.
The HTML document starts with <html> and ends with </html>.
The <head> element contains meta information about the document
All your content goes between the <body> and </body>.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<p>This is your content.</p>
</body>
</html>
This is your content.
Code
The <head> element is part of the document which contains information such as <title>, Link to CSS, Javascript, metadata.
The following elements can go inside the <head>:
- <title> - Adds title to the document
- <style> - Used to add CSS styling for the particular document
- <base> - Specifies a default URL and a default target for all links on a page
- <link> - Used to references the stylesheet for the document
- <meta> - Specifies page description, keywords, author and other information.
- <script> - Used to define JavaScript
Code
Meta elements are used to specify page descriptions, keywords, author, last modified and other information.
<meta> is used to provide such additional information. It is inserted between the <head> tags.
A <meta> tag can have the following attributes:
-
Name -
Name can by anything including author of the document, keywords, description etc. -
content -
Gives the value associated with the http-equiv or name attribute -
http-equiv -
http-equiv can be used to refresh the page or to set a cookie.
Example:
<meta charset="UTF-8">
<meta name="description" content="Cheatsheet">
<meta name="keywords" content="Force24, Cheatsheet, Marketing Automation">
<meta name="author" content="Force24">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Code
The <p> tag defines a paragraph.
<p>My first paragraph.</p>
Preview
My first paragraph.
Code
The <a> tag defines a link.
The href attribute specifies the destination address.
<a href="https://www.force24.co.uk/">Visit our website.</a>
The target attribute specifies where to open the linked document
- _blank - Opens the linked document in a new window or tab
- _self - Opens the linked document in the same window/tab as it was clicked
- _parent - Opens the linked document in the parent frame
- _top - Opens the linked document in the full body of the window
Code
Headings are defined with the <h1> to <h6> tags.
<h1> defines the biggest heading and <h6> defines the smallest.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Code
HTML images are defined with the <img> tag.
The src attribute specifies the path of the image.
The alt describes the image should the browser not find it.
You can use the width and height attributes to define the width and height of the image in pixels.
<img src="Force24.png" alt="Force24" width="200">
Code
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. By default the items will be displayed with a black circular bullet.
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Fox</li>
</ul>
An ordered list starts with the <ol> tag.
<ol>
<li>Mouse</li>
<li>Cow</li>
<li>Giraffe</li>
</ol>
- Dog
- Cat
- Fox
- Mouse
- Cow
- Giraffe
Code
<b> defines bold text
<em> defines emphasized text
<i> defines italic text
<small> defines small text
<strong> defines important text
<sub> defines subscripted text
<sup> defines superscripted text
<ins> defines inserted text
<del> defines deleted text
<mark> defines highlighted text
<b>Example text</b>
<em>Example text</em>
<i>Example text</i>
<small>Example text</small>
<strong>Example text</strong>
<sub>Example text</sub>
<sup>Example text</sup>
<ins>Example text</ins>
<del>Example text</del>
<mark>Example text</mark>
Code
The <span> element is an inline tag for phrasing content. It has no meaning and is mostly used for styling by using and id or class.
<p>Force24 is a UK <span style="color: #00a7c0;">Marketing Automation</span> company based in the Leeds.</p>
Force24 is a UK Marketing Automation company based in the Leeds.
Code
The class attribute is used to apply the same styles for elements containing the same class. The class attribute is selected with CSS and/or JavaScript with a . symbol
The id attribute specifies an unique id for an element. The id attribute is selected with CSS and/or JavaScript with a # symbol
<p>Force24 is a UK <span class="force24Colour">Marketing Automation</span> company based in the Leeds.</p>
Example of class:
<p>Force24 is a UK <span class="force24Colour">Marketing Automation</span> company based in the Leeds.</p>
<p>We offer <span class="force24Colour">Customer journey optimisation advice</span>.</p>
Example of id:
<p>Force24 is a UK <span id="bold">Marketing Automation</span> company based in the Leeds.</p>
Force24 is a UK Marketing Automation company based in the Leeds.
We offer Customer journey optimisation advice.
Force24 is a UK Marketing Automation company based in the Leeds.
Code
The <div> (short for division) tag is used as a container for other elements to perform certain tasks or style them with CSS. Since <div> is a block element, each <div> will be shown on a new line.
Code
The <form> element defines a form that collects user input.
The Form contains different type of elements like text inputs, large text inputs, checkboxes, radio buttons, submit buttons and more.
<input type="text"> defines an input field for text input.
<input type="radio"> defines a checkbox which lets the user select only ONE choice.
<input type="checkbox"> defines a checkbox which lets the user select multople choices.
<textarea> defines a text area which can be used for larger inputs.
<select> defines a dropdown menu containing options.
<input type="submit"> defines a button for submitting the form.
<label> defines a text label for the input.
name="" specifies the name of the input and is used to reference elements in JavaScript
value="" defines the default value of the input field
<form>
<input type="text" name="fullName" placeholder="Enter Full Name">
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Male" name="gender"> Male
<label>Age</label>
<select name="age">
<option value="Under 18">Under 18</option>
<option value="18+">Under 18+</option>
</select>
<input type="submit" value="Submit">
</form>
Code
A table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> and each cell is defined with the <td> tag.
<table>
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> John </td>
<td> Doe </td>
<td> 34 </td>
</tr>
<tr>
<td> Martin </td>
<td> Johnson </td>
<td> 61 </td>
</tr>
</table>
| First name | Last name | Age |
|---|---|---|
| John | Doe | 34 |
| Martin | Johnson | 61 |
Code
<br> - Inserts a new line
<hr> - Inserts a horizontal line