Starting with HTML + CSS

Starting with HTML + CSS

This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.

It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites.

At the end of the tutorial, you will have made an HTML file that looks like this:

The resulting HTML page, with colors and layout, all done with CSS.

Note that I don’t claim that this is beautiful

Alert! Advanced: Sections that look like this are optional. They contain some extra explanation of the HTML and CSS codes in the example. The “alert!” sign at the start indicates that this is more advanced material than the rest of the text.

Step 1: writing the HTML

For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don’t use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

My first styled page

My first styled page

Welcome to my styled page!

It lacks images, but at least it has style. And it has links, even if they don’t go anywhere…

There should be more here, but I don’t know what yet. Made 5 April 2004
by myself.

In fact, you don’t have to type it: you can copy and paste it from this Web page into the editor.

(If you are using TextEdit on the Mac, don’t forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)

Alert! Advanced: The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.

Words within < and > are called tags and, as you can see, the document is contained within the and tags. Between and there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

The is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside , which serves as a comment to ourselves. The browser will ignore it.

Of the tags in the example,