Fullbean.com

Test Case to Demonstrate
Cascading Style Sheets

(Unmodified body text begins here)

Unmodified text in the body of the document will appear small, the same size as that text marked with the <p> tag.
(The unmodified body text ends here.)

This page demonstrates some of the affects that can be created using Cascading Style Sheets. If your browser is capable of reading Cascading Style Sheets, you will see the dramatic effect that using CSS has on this page. As I write this, only the 4.x versions of Microsoft Internet Explorer and the 4.x versions of Netscape are CSS enabled. Neither browser fully implements CSS but MSIE comes closer to following the standards established in CSS-1. If you are viewing this page with a graphical browser that is not CSS aware, follow this link to see a screen shot of this page. It is a 145k gif file.

The appearance of this page is controlled by a linked cascading style sheet viewable at http://www.fullbean.com/styles/freestyles.css If this link displays a screen asking you which program to use to view the file, choose any program capable of reading text files, for example Notepad for the P C user. This author suggests that you print out the page cited above so that you can see how it affects the current page. Then, using the two documents as models, create your own Cascading Style Sheet and link it to your html document.

Please note that viewing the source code for the current page will not reveal the html coding for the page.

Shadow Text

Shadow text is created by the H1 silver and H1 shadow tags.
(Netscape 4.+ for Windows95 does not handle Shadow Text as it should.)
View the style sheet that controls the display of Shadow text and other items on this page.

This is h1 purple

This is the h2 line.

This is the h3 line.

This is the h3 left line.

This is the h4 line.

This is the h4 left line.

This is the h5 line.

This is the h5 cblue line.

This is the h5 left line.

This is the h6 line.

This is the h6 left line.

This is p.

This is p br. Notice that there is no blank line inserted between this line and the previous one. In this regard, p br works like <br>. Unlike <br>, it need not be an empty tag. It can contain attributes specifying color, size, and so forth. This is a major reason for recommending the use of Cascading Style Sheets.

This is a p tag within span brackets. It calls for large red Comic Sans MS type, bold, italicized with an aqua background.

This is yellow text centered on a black background. It was created using a span tag

This is p bold.

It is bold and blue.

This is p green.

This is p navy.

This p purple.

This is p margin. It is 2 em from the left margin

This is bmargin. It is also 2 em from the left margin and is blue

This is p right. It is 2 em from the right margin and is black.

This is p.sans. It is Comic Sans MS font and it is black

This is p.bsans. It is Comic Sans MS bold and it is black.

This is a table controlled by Cascading Style Sheets. As is the case with every effect on this test page, you can see the html coding by viewing the file http://www.fullbean.com/styles/freestyles.css

A friendly greeting (49k .wav file)	Ralph Sutter, Spanish Instructor	Ralph Sutter at a Glance
The CPFA Forum; Community College Resources	Sites Hispanic or in Spanish	More about me and my hobbies
Cascading Style Sheets	Setting Up the International Keyboard	My neighborhood
HTML Help	Sutter's Online Spanish Classroom	Surfari Net
Internet Searches	Cuesta College Main Page	South County Historical Society
Software Archive Sites	Cuesta College Foreign Languages	Dan Logan's Tri Tip
Education Links	Cuesta Technology Committee Site	Cuesta College Federation of Teachers AFT Local #4909

Here is the operation of the float left property whereby an image is positioned to the left of several lines of text. Note that each line of text floats against the image instead of positioning itself at the bottom of the image.

Here is the operation of the float right property whereby an image is positioned to the right of several lines of text. Note that each line of text floats against the image instead of positioning itself at the bottom of the image.

Return to the Fullbean Main Page