<h1>CSS Level 1 Sample Page</h1>
In order to demonstrate how various browsers display stylesheets this page
contains a stylesheet switcher that will enable you to test the stylesheets
we are using in today's demonstration. (back to
Presentation)
The form is enclosed in a <div> with the custom class of "switcher"
applied. The input tags are styled and the submit button has a custom class
of "submit".
With all of the examples that use a CSS to style an html tag you will see the
tag styled displayed using the custom class of "markup".
<h2>Tables using CSS</h2>
<caption>Styling your table using CSS</caption>
| Column 1 |
Column 2 |
Column 3 |
| This row uses |
default html font styles as defined by body tag or the default browser
display |
(except in NN4.x which would use the dom default tables do not inherit
styles properly from the body tag) |
<caption>Styling your table using CSS</caption>
| Column 1 |
Column 2 |
Column 3 |
| This row uses |
a custom class of "one" as defined in the selected
stylesheet. It has been applied to all elements of the table including caption,
tr, th & td |
setting the text to the same size as the <p> tag but
keeps the default cell alignment |
<h3> Lists Using CSS </h3>
- This is using the default list that has a line long enough to wrap around
to more than one line of text within the bullet section.
- Bullet
- And Indent
- With a nested indent
- Or to show second level bullets
- With another nested indent
- Or to show third level bullets
While this list shows custom style list.one
- This is using the default list that has a line long enough to wrap around
to more than one line of text within the bullet section.
- Bullet
- And Indent
- With a nested indent
- Or to show second level bullets
- With another nested indent
- Or to show third level bullets
While this list shows another custom style list.two
- This is using the default list that has a line long enough to wrap around
to more than one line of text within the bullet section this time with the
bullet "inside" the list..
- Bullet
- And Indent
- With a nested indent, a font and number change but on this level we are
going back to having the text wrap even with the first line by putting the
bullet back "outside".
- Or to show second level bullets
- With another nested indent
- This time we return to the same type style we had in the first level
of indents. For this example I used a more complex for of syntax called
"contextual selectors". The CSS definition for this line is
referenced by assigning my definition to the class "ul.two ul ul".