iPage Hosting
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:
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
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.
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!
<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".
| < Ch. 3 part 1 | > continue to Ch. 3 part 3 |
iPage Hosting
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!