CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

Learn faster with my new interactive CSS course for iPad!

Our Hosting Partners:

65% off at FatCow!

iPage Hosting $4.25/mo
1&1 Hosting $6.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:


CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial


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!

advertisement
Our Hosting Partners:

The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.

iPage Hosting $4.25/mo
1&1 Hosting $6.99/mo

Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.