Resources for HTML and CSS

On this page, you will find (1) introductory tutorials on HTML and CSS, and (2) documentation, both official and quick-reference.

HTML is the primary language used for web pages, and is used to define the structure or layout of a page. CSS is for styling the page, that is, setting fonts and color schemes, and the sizes and borders of each region.

A brief personal introduction

In terms of internet history, it has been quite a long time since I first started designing websites in 2002.  My first exposure to the languages of the internet was an attempt to modify my first site, Lizard-Free Lotto, originally designed by Tim Luedtke, the originator of the first internet lotto game, Email Lotto.  The coding for the site was in ASP, with HTML being used for both layout AND styling.

Since I was an experienced programmer in two other "ancient" computer languages, FORTRAN and BASIC, it didn't take me long to begin to do things with HTML, and I immediately began to modify Lizard-Free Lotto to suit my needs.  After fiddling with it for a while, however, I found that I needed a language reference in order to begin making any serious changes.

I ended up buying two SAMS "Teach Yourself" books, one on HTML and one on ASP.  Although they helped me a lot, I wouldn't recommend them now, as they were written some time ago, and like so many of the tutorials available on the internet, do not follow "Best Practices".  If you are learning both HTML and CSS from scratch, I would recommend using a more up-to-date source that will introduce you to both languages at once, and employ modern techniques for keeping structure and style seperate.  Why learn outdated practices, and then have to RELEARN how to do it the right way?


Tutorials

Build Your Own Web Site The Right Way Using HTML & CSS,
Ian Lloyd, 2006

I read through the first three chapters of this book, which are available online at Sitepoint.  I wish this had been my introduction.  You will learn "Best Practices" right from the start.  Your web pages will look right in all browsers, be accessible to disabled viewers, and will meet all web standards.  You even get advice on the basic tools you need, depending on whether you're using a PC or a Mac, and depending on your browser.


CSS Mastery - Advanced Web Standards Solutions,
Andy Budd, 2006

This book will bring even a seasoned CSS programmer up to date, with all of the latest tips, tricks, browser hacks, and bug-fixing techniques.  Before buying this book, I used to spend hours searching the web to find an answer to a vexing problem.  Now, I just pick up CSS Mastery and thumb through the index.


Documentation

Two references are given for each language: The first is the official source that sets the standards, and is the ultimate resource. The second is a "quick reference", in which there is a listing of all the commands for the language, along with a short explanation and an example.

HTML 4.01 Specification:

24 chapters, with appendices, including indexes of elements and attributes. Has plenty of good examples of usage.


HTML Quick Reference

"...defines and explains all of the HTML version 4.01 tags and their associated attributes. In addition, useful, real world, working examples of code are provided for each tag. Plus, there are write-ups, with code examples, for the 16 core attributes which are available for almost all tags. Browser compatibility for each tag is also included."


CSS 2.1 Specification

18 chapters, with appendices. Plenty of good examples.


CSS2 Quick Reference

"...defines and explains all of the various style sheet properties, values, and displays sample code. " Indexed by element type or alphabetically.


Dynamic HTML: The Definitive Reference (2nd Edition),
Danny Goodman, 2002

A reference for ALL of the three languages of dynamic HTML: (X)HTML, CSS, and Javascript. I keep it right next to my computer at all times. It has frequently proven its worth as a handy reference, particularly with regard to browser compatibility issues. It has a comprehensive index, which makes looking something up easy-as-pie.