CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

Basics of using CSS Styles

Chapter 2 part 2 (of 3)

So we'll make it a little bit easier now, and we'll place a <style> </style> at the beginning of the web page. This should go right before the </head> tag. The format is just like this:

<head>
<title>My first CSS page</title>
<style type="text/css">
<!--

p { text-indent: 3em; }

--></style>
</head>

With that style sheet at the beginning of the page, every <p> </p> will start with 3em (5 space) indent. So if you have 5 paragraphs that need to be indented, all you need to do is start each with a <p>, and the indent is automatic!

Now, imagine you have 10 pages, and you want to make every single paragraph indented.

You could include the <style> </style> at the top of each page, but it's much easier to create a single .css file, and link all 10 pages to it. Inside the .css file (we'll call ours main.css) all you do is type:

p { text-indent: 3em; }

Then, right before your </head> tag in each page add a line similar to this:

<link rel="stylesheet" type="text/css" href="main.css" title="Default">

This will link a new style sheet, location main.css, to each page. The title field is optional.

With such a short and sweet example, it seems a bit silly to use the link method. But once your style sheet becomes larger, which it will very soon, you'll see the benefit of the write once link many method. That's just one CSS to edit whenever you want to change the look and feel of your site!

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.