Building a Website with HTML and CSS

Creating the HTML File

<!DOCTYPE html>

<html>

<head>

</head>

</html>

<!DOCTYPE html> All HTML documents must start with a type declaration

<head> </head> Sets off the title and other information that isn't displayed on the web page itself

<html> </html> Creates an HTML document

<body> </body> Sets off the visible portion of the document

Formatting

<header> </header> Defines a header for a document or a section

<nav> </nav> Defines a container for navigation links

<section> </section> Defines a section in a document

<aside> </aside> Defines content aside from the content (like a sidebar)

<article> </article> Defines an independent self-contained article

<footer> </footer> Defines a footer for a document or a section

<div> </div> A generic tag used to format large blocks of HTML, also used for stylesheets

<p> </p> Creates a new paragraph

<br> Inserts a line break

This is an example
using the "br" tag

<blockquote> </blockquote> Indents text from both sides

This is an example using the "blockquote" tag

<hr /> Inserts a horizontal rule

This is an example using the "hr" tag

<img src="URL"> Adds an image

Text Tags

<pre> </pre> Creates preformatted text

This is an example using "pre"

<h1> </h1> Creates the largest headline

This is an example using "h1"

<h2> </h2> Creates the 2nd largest headline

This is an example using "h2"

<h3> </h3> Creates the 3rd largest headline

This is an example using "h3"

<h4> </h4> Creates the 4th largest headline

This is an example using "h4"

<h5> </h5> Creates the 5th largest headline

This is an example using "h5"

<h6> </h6> Creates the smallest headline

This is an example using "h6"

<b> </b> Creates bold text This is an example using "b"

<i> </i> Creates italic text This is an example using "i"

<tt> </tt> Creates teletype, or typewriter-style text This is an example using "tt"

<cite> </cite> Creates a citation, usually italic This is an example using "cite"

<em> </em> Emphasizes a word (with italic or bold) This is an example using "em"

<strong> </strong> Emphasizes a word (with italic or bold) This is an example using "strong"

Links

<a href="URL"> </a> Creates a hyperlink This is an example of a link to Google

<a href="mailto:EMAIL"> </a> Creates a mailto link This is an example of a link to an email address

<a href="URL"> <img src="URL"> </a> Creates an image/link This is an example of a link to Google using an image

Lists

<li> </li> Precedes each list item, and adds a number or symbol depending upon the type of list selected

<ol> </ol> Creates a numbered/ordered list

This is an example of an numbered/ordered list

List Item
List Item
List Item

<ul> </ul> Creates an bulleted/unordered list

This is an example of an bulleted/unordered list

List Item
List Item
List Item

Tables

<table> </table> Creates a table <th> </th> Sets off the table header (a normal cell with bold, centered text) <tr> </tr> Sets off each row in a table <td> </td> Sets off each cell in a row

This is an example of how a table will look

Col 1	Col 2	Col 3
Row 1 Col 1	Row 1 Col 2	Row 1 Col 3
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3

Table Attributes

<table border="1"> </table> Sets width of border around table cells <table cellspacing="1"> </table> Sets amount of space between table cells <table cellpadding="1"> </table> Sets amount of space between a cell’s border and its contents <td colspan="2"> </td> Sets number of columns a cell should span (default=1) <td rowspan="4"> </td> Sets number of rows a cell should span (default=1) <td nowrap> </td> Prevents the lines within a cell from being broken to fit

Applying Styling

Inline Styles

Inline styling is useful for applying a unique style to a single HTML element

<span background-color="#E0CCF5"> Sets the background color, using name or hex value

<span style="color:blue"> Sets the text color, using name or hex value

Aligns a paragraph to the left (default).

Aligns a paragraph to the center.

Aligns a paragraph to the right.

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page. Internal styling is defined in the <head> section of an HTML page, using a <style> element

<head>

</head>

External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages. With external style sheets, you can change the look of an entire web site by changing one file. External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page.

<head>

</head>

Using Tags/Elements

Websites can be styled by targeting the tag/element. p { color: red; font-family: courier; font-size: 12px; }

This is in a <p> and will turn red, use Courier font, and be 12px in size.

Using Ids

Using Ids allows you to define a special style for one special element. Ids can only be used once. <p id="example-id"> </p>
#example-id { color: blue; text-transform: uppercase } This is in a <span> with the id "example-id" and will turn blue and be uppercase.

Ids are also used to help the user jump around the page This is in a <span> with link to an ID that will jump us to the bottom of the page. Don't worry there will be a link to bring you back.

Using Classes

Using Classes allows you to multiple areas of the site. <span class="example-class"> </span>
.example-class { color: pink; background-color: #3D3D5C }
This is in a <span> with the class "example-class" and will turn pink and have a background color of #3D3D5C.

This is in a <div> with the class "example-class" and will turn pink and have a background color of #3D3D5C.

Margins

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties or changing multiple margins using shorthand. The margin property can have from one to four values.

margin: 5px 10px 15px 20px;

top margin is 5px
right margin is 10px
bottom margin is 15px
left margin is 20px

margin: 5px 10px 15px;

top margin is 25px
right and left margins are 10px
left margin is 15px

margin: 5px 10px

top and bottom margins are 5px
right and left margins are 10px

margin: 5px

all four margins are 5px

This is a div with no specified margins.

This is a div with specified margins.

margin-top: 50px;
margin-bottom: 50px;
margin-right: 10px;
margin-left: 10px;

This is a div with specified margins written in shorthand.

margin: 50px 10px;

Padding

The padding clears an area around an element (inside the border). The padding does not have a background color, and is completely transparent. The top, right, bottom, and left padding can be changed independently using separate properties or changing multiple margins using shorthand. The paddings property can have from one to four values.

padding: 5px 10px 15px 20px;

top padding is 5px
right padding is 10px
bottom padding is 15px
left padding is 20px

padding: 5px 10px 15px;

top padding is 25px
right and left paddings are 10px
left padding is 15px

padding: 5px 10px

top and bottom paddings are 5px
right and left paddings are 10px

padding: 5px

all four paddings are 5px

This is a div with no specified padding.

This is a div with specified padding.

padding-top: 50px;
padding-bottom: 50px;
padding-right: 10px;
padding-left: 10px;

This is a div with specified padding written in shorthand.

padding: 50px 10px;

Colors

Colors in CSS can be specified by the following methods:

Hexadecimal colors: #ff0000 (red)
RGB colors: rgb(255, 0, 0) (red)
RGBA colors: rgb(255, 0, 0, 0.5) (red 50% opacity)
HSL colors: hsl(0, 100%, 50%) (red)
HSLA colors: hsla(0, 100%, 50%, 0.5) (red 50% opacity)
Predefined/Cross-browser color names: red

Dimensions

Click here to go back to IDs