Cheat Sheet

HTML, CSS, and JavaScript Mobile Development For Dummies

Using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) along with JavaScript allows you to create sites adapted for the emerging mobile-technology market. These technologies have advanced quickly over the past decade and are now able to support nearly every web feature supported by desktop computers, but designing or adapting existing sites to fit the parameters of the latest smartphones, handheld computers, and tablets can be tricky business. This Cheat Sheet provides tips on integrating CSS with HTML, a list of handy HTML tags, and many helpful online resources.

Setting Up CSS in HTML

CSS is a style sheet language used to define the appearance and formatting of a document written in a markup language — often HTML. A style in this sense is a set of text-formatting instructions, such as font, color, size, and so on. Because CSS instructions exist separately from HTML code, you can apply the same set of instructions to every page in your website, or to more than one website. Here's a list of common HTML instructions used in conjunction with CSS:

  • To link within HTML to an external style sheet, use the following structure:

          <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  • To embed styles within an HTML page:

    <style type="text/css">
          styles ...
  • Using a body style to design the overall page:

    body {
          padding:8px 4px 12px 4px;
          background:#000000 url(images/space.gif);
  • To use a class selector in HTML:

    <p class="caption">This is a caption paragraph</p>
  • To use an ID selector in HTML:

    <div id="sidemenu"> links... </div>
  • Common type selectors:

    body {...}
    p {...}
    td {...}
    ul {...}
  • Common class selectors:

    .caption {...}
    .banner {...}
    .main {...}
  • Common ID selectors:

    #mainParagraph {...}
    #sidemenu {...}
    #footer {...}

Common HTML Tags

The following table lists some of the most common HTML tags that you'll use to build your website. After you've worked in HTML for a little while, these tags will become second nature to you.

Tag Name Code Example
<a> anchor <a href="">Click Here</a>
<b> bold <b>Bold Type</b>
<body> body of document <body>All of the contents of your Web page.</body>
<br> line break Soft line break<br />Soft line break
<center> center <center>Center your content</center>
<font> font <font face="Times New Roman">Example</font>
<form> form <form action="">
Name: <input name="Name" value="" size="10" />
<h1> heading 1 <h1>Heading 1 Example</h1>
<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<head> heading of document <head>Contains elements describing the document</head>
<html> hypertext markup language <html><head><meta><title>Title of your webpage</title></head><body>Webpage contents</body></html>
<i> italic <i>Italic Type</i>
<li> list item <ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<meta> meta <meta name="Description" content="Description of your site" />
<meta name="keywords" content="keywords describing your site" />
<ol> ordered list <ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<p> paragraph <p> This creates a line break and a space between lines.</p>
<title> document title <title>Title of your webpage</title>
<ul> unordered list <ul>
<li>List item 1</li>
<li>List item 2</li>

HTML References and Resources

You can't go on the Internet without seeing HTML in action, but the Internet is a great place for finding out about HTML, too. The following table lists some valuable online resources for more information about HTML.

Name Description
HTML Tutorial This W3Schools site provides a complete tutorial and references on how to use all HTML tags.
W3C Markup Validation Service Use this site to check the validity of your HTML. The validator also checks tags against doctype.
Index of Elements Index of all HTML elements with links describing how to use them.
HTML 4.0 Guidelines for Mobile Access W3C guidelines for creating HTML4 websites.
HTML5 Overview of HTML5 guidelines.
HTML5 Demos and Examples Several good examples of how to use HTML5 for specific applications, complete with browser compatibility.
HTML5 Tag Reference A complete reference of HTML5 tags and how to use them.
The Great WebKit Comparison Table A chart of WebKit HTML tags and which devices support them.

CSS References and Resources

Cascading Style Sheets (CSS) give you more flexibility in your website's formatting and layout, as well as letting you make global changes to all the pages on your site. The following table lists some valuable online resources for more information about CSS.

Name Description
CSS Tutorial This W3Schools site provides a complete tutorial and references on how to use all CSS elements.
Cascading Style Sheets Home Page W3C's CSS home page with links to gobs of information on CSS and how to use it.
Cascading Style Sheets The Web Design Group to portal information on using CSS.
Dynamic Drive CSS Library A collection of CSS examples for creating menus, gradients and several other objects.
Learn to work with CSS Adobe's guide to using CSS with Dreamweaver.
CSS Reference A complete reference of CSS elements and how to use them.
CSS Examples This W3Schools site offers multiple examples of creating objects with CSS.
CSS Cheat Sheet (V2) A quick reference guide for CSS, listing selector syntax, properties, units, and other useful bits of information.

JavaScript References and Resources

JavaScript lets you to functionality to a web page that simple HTML just cannot do. The following table lists some valuable online resources for more information about using JavaScript on your website.

Name Description
JavaScript Tutorial This W3Schools site provides a complete tutorial and references on how to use all JavaScript.
The Definitive JavaScript Reference This site contains links to just about everything you ever wanted to know about JavaScript.
JavaScript Kit Here's another site with tons of information about JavaScript.
JavaScript a tutorial "for the TOTAL non-programmer" An intro to JavaScript for non-programmers.
JavaScript Reference A quick reference to JavaScript commands.
JavaScript and HTML DOM Reference A W3Schools reference to using JavaScript at the DOM level.
JavaScript Cheat Sheet A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
JavaScript Introduction A W3School's introduction to JavaScript—how to get started.
  • Add a Comment
  • Print
  • Share


Promoted Stories From Around The Web

blog comments powered by Disqus