HTML & CSS tutorials

Note: While reading this page, bear in mind that although I have some experience of writing HTML and CSS I'm no expert. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. To the left, there are links to more HTML and CSS tutorials.

I started learning HTML and CSS in the fall of 2005 and published the first version of my website in January 2006. Since then, I've learned a lot about HTML and CSS and published no less than seven main versions of

From time to time, I've written HTML and CSS code I think should be documented, in some cases because I haven't seen it documented anywhere else, in other cases for other reasons. The lions share of this HTML and CSS code isn't that innovative, but I still think it's worth the while to publish it, partly because I think it can be useful to others, partly because I myself can use it when I've forgotten exactly how I solved some problem or another in the past.

That's why I'm writing these HTML and CSS tutorials.

Getting started

To write HTML and CSS documents, you need a text editor. There are numerous of free text editors you can download. Some of them are better, other not that good (at least as I see it). My personal favorite is Notepad++. You may also want to check out these free text editors:

Finally, you may want to check out my text editor MK Notepad 2010. It's my first Windows program, that I started developing in October 2010 and don't think is good enough yet to be used as the main text editor. There are, however, some functions I think are both useful and rather unique. More precisely, there are functions for deleting, adding and replacing text and whitespace in various ways with one single operation (instead of several operations, as in most other text editors) and functions for generating repetitive text and sequences. For example, you can remove all empty lines from text you have copied from a webpage or another with a single mouse click or add p tags to all lines on a page or selected text on a page with a single mouse click.

To write HTML and CSS documents, you, obviously, also need at least some know-how. If you are new to or not that experienced in HTML and CSS or, in fact, are experienced in HTML and CSS but don't know everything, I suggest you go to HTML Dog. Start with the tutorial HTML Beginner and continue with the tutorials CSS Beginner, HTML Intermediate, CSS Intermediate, HTML Advanced and CSS Advanced. There are also a complete reference to XHTML 1.0 strict tags and CSS 2.1 properties, articles, examples and a rather long list of links to pages about HTML, CSS and web design in general.

There are of course numerous other websites that teaches basic HTML and CSS. The reasons I recommend HTML Dog are at least two:

  1. It's the best website for HTML and CSS beginners I've seen.
  2. HTML Dog uses the same document type, XHTML 1.0 strict, as I do in my tutorials.

General information

1. I focus more on writing instructions on what steps to take to make some HTML and CSS code work than on explaining every part of the code; there are, however, short comments on most of the code.

2. Each tutorial starts with instructions and one or several code snippets and continues (in most cases) with comments on the code. Before reading the comments, I suggest you copy the applicable code snippet to a textbox with line numbers, created with, for example, Notepad++.

More or less useful links

Use W3C:s CSS validator frequently to make sure your CSS code is valid.

Use W3C:s HTML validator frequently to make sure your HTML code is valid.

The code at W3 schools are often enough not standards compliant, but the site may still be worth the while to visit, because the pages are rather well organised and the information about basic things rather complete.

Would you like to comment on this page or some other page? Send an email to or a letter to Mats Kristiansson, Timmervägen 3A, 541 64 Skövde, Sweden with the title of the page you want to comment on, your comment and your name or a pseudonym.