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
CSS Borders and Border Styles
So let's make each paragraph have a medium border that is dotted:
p { border-width: medium; border-style: dotted; }
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!
So close to getting our border perfect. But what if the border to be blue? Simple. It's the border-color property. Just set it to blue:
p { border-width: medium; border-style: dotted; border-color: blue; }
Wouldn't it be nice to have a combination property? There is. It's just border:, and it expects width, style, then color. So the example immediately above could be simplified to:
p { border: medium dotted blue; }
If you want to set each of the four borders individually, you can. The properties are border-top, border-right, border-bottom, and border-left. The values expected are width, style, then color. If you wanted every paragraph with a dotted left border in red, and a dashed right border in purple, you could use:
p { border-left: dotted red; border-right: dashed purple; }
Think you understand margin, padding, and border? Try making a look-a-like to this coupon. Hint: You might want to use a width: or height: property. Guess how they work.
50% OFF
EVERYTHING
expiration date: yesterday
Click here if you get stuck or want to see how I did it.
| < Ch. 10 part 1 | > continue to Chapter 11 |
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!