Cheat Sheet

Web Design All-in-One For Dummies

Whether you're looking to design your own website or are a new web designer who plans to make a career of this exciting profession, you might be feeling overwhelmed. This handy guide to HTML/HTML5 and Cascading Style Sheets (CSS) gets you started on the right path.

Designing Your Website with HTML/HTML5

If you're designing websites, you're probably going to want to use standards-compliant HTML5 markup — after all, you need to use some type of markup language so that your websites can communicate, right? The table here gives you a rundown of the most popular HTML5 tags and tells you what each does.

Tag Description
<!--...--> Defines a comment in the HTML code
<!DOCTYPE> Defines the document type
<a> Defines an anchor
<article> Defines an article
<aside> Defines content that sides next to other content
<audio> Defines a sound
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<canvas> Defines an area where graphics can be drawn with JavaScript
<caption> Defines a table caption
<cite> Defines a citation
<code> Defines computer code text
<details> Defines a details section that can be shown or hidden
<div> Defines a section in a document
<em> Defines emphasized (italic) text
<embed> Defines a space to insert media files like plug-ins or applications
<figure> Defines content like photos, illustrations, and diagrams, etc.
<figcaption> Defines the caption for a figure
<footer> Defines a footer for a section or the entire document
<form> Defines a form
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<header> Defines a header for a section or the entire document
<hr> Defines a horizontal rule
<html> Defines an HTML document
<iframe> Defines an inline subwindow (frame)
<img> Defines an image
<input> Defines an input field
<label> Defines a label for a form control
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map
<meta> Defines meta information
<nav> Defines a set of navigation links
<noscript> Defines a noscript section
<ol> Defines an ordered list
<p> Defines a paragraph
<pre> Defines preformatted text
<script> Defines a script
<section> Defines a section within a document
<select> Defines a selectable list
<source> Defines a media resource for audio or video
<span> Defines a section in a document
<strong> Defines strong (bold) text
<style> Defines a style definition
<sub> Defines subscripted text
<summary> Defines a heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<td> Defines a table cell
<textarea> Defines a text area
<th> Defines a table header
<time> Defines the date or time
<title> Defines the document title
<tr> Defines a table row
<track> Defines the text tracks for audio or video
<ul> Defines an unordered list
<video> Defines a movie file or video

The Anatomy of Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics — the style and positioning — of elements within a web document written in a simple markup language.

CSS syntax is made up of two parts: the selector and the declaration block inside curly brackets. Inside the declaration block you can have multiple declarations. Each declaration is made of two parts — the property and the value:

p {font-face: Georgia, Tahoma; color: #ffcc00; }

In this example:

  • p is the selector.

  • {font-face: Georgia, Tahoma; color: #ffcc00; } is the declaration block.

  • font-face: Georgia, Tahoma; and color: #ffcc00; are separate declarations.

  • font-face is a property and Georgia, Tahoma is its value.

  • color is a second property and #ffcc00; is its value.

Four Types of Cascading Style Sheets in Web Design

Cascading Style Sheets (CSS) fall into four different types (or styles). When you understand how these four different types work, you'll be styling your web pages more efficiently.

To keep your CSS organized, use CSS comment tags to identify the different sections of CSS within your style sheet. For instance, you may have a section for the header styles, for the sidebar styles, for the navigation styles and for the footer styles. CSS comments use the /* … */ syntax:

/* This is a comment */

Class style (aka custom style)

Class styles can be selectively applied to any HTML element using the class="customname" syntax. For example, you could create a class style called highlight that has a bright yellow background color:

.highlight {
            background-color: #FFFF33; 

To apply this style to any content, you'd simply use the class attribute:

<p class="highlight">This is really important</p>


ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a <div> tag to hold your sidebar content, you'd give that container a semantic ID such as sidebar:

#sidebar {

Your code might then look something like this:

<div id="sidebar">
  <h1>Custom Web Design Services</h1>
  <p> … </p>


Tag styles let you automatically redefine the style and positioning of any existing HTML tag, such as body, p, h1, or li. For instance, you could set the font styles for all your <h1> tags throughout your entire site or within a particular section:

h1 {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 1.2em;
           font-weight: bold;
           color: #8c9292;
           text-transform: uppercase;


Compound styles are also automatically applied to an element based on its location within the page, such as all <h1> tags inside the <div> with the ID of sidebar, which sits inside a parent container with the ID of wrapper:

#wrapper #sidebar h1 {
           color: # CC3300;
            font-family: "Times New Roman",Georgia,Serif;

Placing CSS in Your Web Design

You can use Cascading Style Sheets (CSS) in your web pages in three ways: external, internal, and inline. Which you use is dependent on how you want your design to work.

External CSS

External is the preferred way of using CSS. Ideally, you place all your CSS styles into an external CSS file, and then add a link to it in all of your site’s pages. This is the most efficient way to work, as all the pages will rely upon a single CSS file, which makes your job easier when it comes to editing your styles across an entire website.

A link to an external CSS file is added to the code on each page before the closing </head> tag:

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="all">

To import an external style sheet instead of linking to one, insert style and comment tags before the closing </head> tag:

<style type="text/css" media="all">
@import url("stylesheet.css");

Internal CSS

Internal is good for single-page use and during development, but not for finished websites. Sometimes designers include internal CSS on a single page to override any links to external CSS files. To add CSS internally to a single page, place your CSS styles between a pair of <style> tags before the closing </head> tag on your page:

<style type="text/css">
body { background-image: url("images/pattern.gif"); }
p { font-family: verdana, arial, sans-serif; }

Inline CSS

Occasionally, you may need to override both external and internal CSS styles using inline CSS. Inline is not advised unless it is the best or only way to apply a style to an object or element in the HTML. To add CSS inline with your code, add the style definition to your opening HTML tag:

<p style="color: #3399CC; font-size: 18px;">The Solar System</p>

Nine Basic CSS Categories to Use in Web Design

Most CSS styles fall into nine basic style and positioning categories. This list can help you keep track of all the cool things you can do with CSS:

  • TYPE: Font family, size, style, weight, color, decoration

  • BACKGROUND: Background color, image position, and repeat

  • BLOCK: Word and letter spacing, text alignment, block display

  • BOX: Width, height, padding, and margin of an element, float, clear

  • BORDER: Border style, width, color for up to four sides of an element

  • LIST: List styles, custom bullets, bullet position

  • POSITIONING: Position, size, visibility, z-index, placement, and clip of elements

  • EXTENSIONS: Special cursor and filter effects, page break options

  • TRANSITION: Animate objects using properties, duration, delay, and timing

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.