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

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

CSS Borders and Border Styles

Chapter 10 part 2 (of 2)

So let's make each paragraph have a medium border that is dotted:

p { border-width: medium; border-style: dotted; }

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.

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.