65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code 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.
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
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; } 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.
p.noindent { text-indent: 0em; }
< Ch. 2 part 3
> continue to Ch. 3 part 2
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!