Cascading Style Sheets

Cascading Style Sheets - Font +

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

If you're a fan of text boxes in a word processing program, you'll like this lesson. You're about to learn how to put fancy borders around paragraphs.

You will see a series of eight paragraphs. Each of these paragraphs has a sifferent style border.
(If any of these aren't working on your computer, don't be surprised. Some only work on later versions of netscape or Internet Explorer.)

<STYLE TYPE="text/css">
p.dot {border-style: dotted}
p.dash {border-style: dashed}
p.solid {border-style: solid}
p.doub {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</STYLE>

Each of these paragraphs should have a separate border around them.

This paragraph class="dot" for the border

This paragraph class="dash" for the border

This paragraph class="solid" for the border

This paragraph class="doub" for the border

This paragraph class="groove" for the border

This paragraph class="ridge" for the border

This paragraph class="inset" for the border

This paragraph class="outset" for the border

Here's a fun note - nothing will prevent you from using more than one style at once. You can have a paragraph with several styles around it. Here are a couple examples:

<STYLE TYPE="text/css">
p {text-align: center}
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.dotteddouble {border-style: dotted double}
p.threetypes {border-style: solid double dotted}
</STYLE>

With this css, we have:

This is p class="soliddouble"

This is p class="doublesolid"

This is p class="dotteddouble"

This is p class="threetypes"

So, if you can change styles, what about colors? But of course.

<STYLE TYPE="text/css">
p.one {border-style: solid;border-color: #0000ff}
p.two {border-style: solid; border-color: red #0000ff}
p.three {border-style: solid; border-color: red #00ff00 #0000ff}
p.four {border-style: solid; border-color: red #00ff00 #0000ff purple}
</STYLE>

Note that the colors and borders start with the top and go clockwise.

With this css, we have:

This is p class="one"

This is p class="two"

This is p class="three"

This is p class="four"

No surprise you can change the widths of the borders too. First, just the bottom width:

<STYLE TYPE="text/css">
p.demo {border-style: double; border-bottom-width: 15px}
</STYLE>

With this css, we have:

This is the paragraph class="demo"

Now let's change all of the widths:

<STYLE TYPE="text/css">
p.bfour {border-style: dotted; border-width: 5px 10px 1px medium}
</STYLE>

With this css, we have:

This paragraph (class="bfour") has the border widths specified. It is a really cool phemonenon, and I'm hoping you can see the size differences.

Let's put these together finally:

<STYLE TYPE="text/css">
p.last {border-style: dashed double; border-width: 8px; border-color: red yellow #00ff00 blue}
</STYLE>

In the body we have:
<p class="last">This paragraph (class="last") Combines all of the elements</p>

With this css, we have:

This paragraph (class="last") Combines all of the elements

This page relied heavily on W3schools.com