See a version of this page with no CSS: Open it! Use the browser's Back button to return to this page. Note that this page is not intended to be beautiful -- it is intended to make some characteristics of CSS obvious to a beginner. In particular, you will want to learn the following:

1. What does 'margin' do?
2. How is 'padding' different from 'margin'?
3. How is 'background' different from 'color'?
4. Which CSS property is used to change the text color?
5. How can using the CSS 'border' property help you learn more about 'margin' and 'padding' and how they work?

This is an 'h1' heading

An 'h1' heading should be used only for the most important heading in the document, which is usually the top heading.

This is an 'h2' heading

This is an 'h3' heading

This is an 'h4' heading

This is an 'h5' heading

This is an 'h6' heading

Headings indicate a hierarchy in your document. The 'h' tags should never be used in place of boldface or font-size. The appearance of headings can be changed with CSS.

Images in HTML

This image is in the same set of files as this document:

This image is outside this set of files, on another web server:

The difference in the two images' locations can be found in the 'src' attribute, inside the 'img' tag.

Links in HTML

Links have something in common with images: you can write them to get a file from the same set of files as this document, or write them differently to get a file outside this set of files, on another web server. (Why does this paragraph look so different? First look at the 'p' tag in the HTML for this page. Then open the .css file and look for the class.)

This link opens a file from the same set of files as this document: a CSS-enhanced page. It uses what is called a relative URL.

This link opens a file from outside this set of files: The placekitten site. It uses what is called an absolute URL.

The difference can be found in the 'href' attribute, inside the 'a' tag.

HTML Lists

• This is an unordered list.
• An unordered list has bullets (you can change that with CSS).
• You should learn the difference between an unordered list and an ordered list.

1. This is an ordered list.
2. An ordered list has numbers (you can change that with CSS).
3. You should learn the difference between an ordered list and an unordered list.

This is a definition list.

Each item in a definition list has two parts, a term ('dt') and data ('dd'). Think of a dictionary definition: Word = term. Definition = data.

Use CSS to change the appearance of a definition list.

The structure of a definition list should indicate the pairs, term and data, but you can make them look however you like by changing their properties with CSS.

Conclusion

After you have mastered the HTML tags and conventions on this page, you can start learning CSS.