In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages.

After completing this tutorial, you should have enough information to explore CSS and web design even further.

  • You can download the CSS and HTML files we build in this tutorial: CSS files
  • You can check out what the page should look like here: CSS example page


Remember that CSS code is simply written instructions that tells Web browsers (like FireFox and Internet Explorer) how to display things on a page. For example:

  1. make text bold.
  2. position things a page.
  3. set the font style for a page or paragraph etc.

The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the page.

... I know you knew that already, I just wanted to remind you!


Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.

The tags we will use to layout the content:

1. The Heading tags which range from '' to '', are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a

tag and the least important in a


An example of a heading:

CSS Template Layout

This tells the browsers and the search engines too, that this page is primarily about: 'CSS Template Layout'

All browsers have a default size (for each tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially

) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking.


The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what they call a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each

tag pair. You see it work in the examples coming up.