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!)

CSS - All About Selectors for Styles

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

In our last chapter, we used this example:

p { text-indent: 3em; }

Remember that p is the selector, text-indent is a property, and 3em is a value.

You are certainly not limited to only using style sheets with the HTML element p (paragraph). Remember our old friends H1 through H6? You can also use it with them.

If you want to make all H1, H2, and H3 red, and all H4, H5, H6 yellow, your style could look like this:

h1, h2, h3 { color: red; }
h4, h5, h6 { color: yellow; }

You can use the comma to say you want to define a style for multiple selectors at the same time.

You can set a style for nearly all HTML elements.

So why don't they just call the value before the { } an element? Well, that's because it's not always an element. You can also choose to make a selector a class of a current element, an element-less class, an id selector, or a pseudo-element. We'll show each of the four in this chapter.

Let's make a selector a class of a current element. Remember our paragraph example? Every paragraph is now indented. But what if you want a few paragraphs without an indent? We can define an extra selector. You can pick a name for these, I'm going to call mine noindent. Here's the original code with an added noindent selector:

p { text-indent: 3em; }
p.noindent { text-indent: 0em; }

This says that any p that are part of a class called noindent should use 0em indentation. To call that in code, we use class.

A normal paragraph looks like this:

<p> I'm using a style with an indent. </p>

I'm using a style with an indent.

A paragraph with the noindent looks like this:

<p class="noindent"> I'm using a style without an indent. </p>

I'm using a style without an indent.

If you are going to only indent some paragraphs, but you probably won't indent most, you can just define a special paragraph called indent.

p.indent { text-indent: 3em; }

If that's our only style, regular <p> </p> will have no indent, while <p class="indent"> </p> will have a 3em indentation.

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.