CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

Our Hosting Partners:

iPage Hosting $4.25/mo
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $4.95/mo
Globat $4.44/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:

Css3


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

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".

advertisement
Our Hosting Partners:

iPage Hosting $4.25/mo
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo

Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.