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

All About Selectors for Styles

Chapter 3 part 3 (of 3)

Why stop at the p tag? Indenting is kind of useful all around. You can make up an element-less selector name and just forgo the element. All you place is a period . and then your class name. Here's a generic example for indent:

.indent { text-indent: 3em; }

Now, we can use that class for all sorts of things. Here's a paragraph and a H1 both using the element-less .indent selector.

<p class="indent"> This is a paragraph with indent. </p>

This is a paragraph with indent.

<h1 class="indent">This div has an indent</h1>.

This h1 has an indent.

Imagine a selector .g, defined as { color: green; }. Every time you use class="g" in an element the text color would be shown in green.

ID selectors are used for special formatting of only a few elements. ID selectors use a # instead of a .. Imagine 3 paragraphs, we'll call them par1, par2, par3. We'll make one red, one orange, and one blue.

We could use these styles:

p#par1 { color: red; }
p#par2 { color: orange; }
p#par3 { color: blue; }

<p id="par1">I'm in red</p>
<p id="par2">I'm in orange</p>
<p id="par3">I'm in blue</p>

ID Selectors can also be element-less:

#par1 { color: red; }

...would apply to all tags that specify id="par1".

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.