Sample Pages for Testing CSS

These pages were used in the CSS Workshop to demonstrate different topics. Each page can be used to experiment with a particular CSS technique. There are notes and styles in the source. Download the pages and edit the source to see how the styles work.

Each of these documents opens in a new window.

General

Review of CSS Resets: A review of four CSS reset files to see what elements they have in common.
Basic Template: This simple text file has a number of HTML tags and has some CSS selectors with blank declarations. The file can be edited to try some basic styling.
Questions and Answers on CSS text-decoration and HTML tags.: Using underlining and overstriking, these pages consider how HTML tags and CSS properties can be used for the same effect. The question is, when is one technique or the other valid.
Units of Measurement: This file lets you test different units of measurement with different fonts and properties to see how they interact and how they affect the look of a page.
INS and DEL tags with CSS: This page shows how simply using color properties, a page can show markups similar to a word processor's output. Note the use of the HTML "title=" attribute to add pop-up annotations to the markups.
Line-height and Letter Spacing: These two files by member Ken Taylor use CSS properties to position text and create interesting effects.
CSS Font Tests: Use this file to play with different font properties and compare the results with the browser's default setting.
Pseudo-Elements and Pseudo-Classes Overview: This pages lists the different types of pseudo properties in CSS. It is not a sample file, just an outline and reference.
Pseudo-Element Tests: This test page allows you to play with pseudo-elements, including some that are not implemented in Internet Explorer 6.
Generated Content: Internet Explorer does not support generated content, so its usefulness is limited right now. If you are interested in playing with this property, download this test page and open it in Firefox or Opera. To see the property in action, open the page in a text editor and comment out ("/* */") the generated content declarations and comment others in.

Classes

Examples of Using Classes: This file has a number of different classes defined. Note particularly the compound class selectors. Experiment with this file in both Firefox and Internet Explorer. Take note of which options are not implemented in IE.
Problems with Internet Explorer and Compound Class Selectors: This file has some simple compound selectors. Experiment with the source in both Firefox and Internet Explorer by reversing the order of the compound selectors. In IE, there is a big difference in the results.

The Box Model

Basic Boxes: The source of this document has a number of CSS rules that illustrate some basics of styling boxed. Try the width declarations in both Internet Explorer and Firefox to see the different interpretations of how "width" is rendered.
Border Properties: This sample page shows the different options for styling borders. The source can be amended to experiment with sizes and styles. Test in both Firefox and Internet Explorer.
Margin and Padding Properties: This page compares margin and padding. The paragraphs look to be similarly styled, but play with the source to see the difference between using the margin property and using the padding property.
Inline Box Styling: This document has several span elements to show how inline element boxes can be styled.

Styling Lists

Styling Lists with CSS: In this file, there are different types of lists. Test out the properties that apply to each.
Styling Sub-Lists with CSS Using Descendant Selectors: This file demonstrates the use of the descendant selector to style sub (child) lists. Open in an editor and try different bullets and numbers, and different combinations of descendant selectors.
Navigation: Vertical Menu: This menu is taken from PACS Web Design SIG site and shows how an unordered list of hyperlinks can be styled to display as a vertical menu with feedback to the user.

Display

Display: None: This test page shows how the display property and its "none" value can be used to substitute a graphic for a top level heading to add a logo without affecting the underlying HTML. Comment out the style declarations to see the basic web page. Or, if you have Firefox, you can just open the file and at the top Firefox menu, go to View/Page Style/No Style to toggle the style sheet on and off.
Display: Inline and Block: Use this file to style a set of inline elements to act like block elements and then style list items to act like inline elements.

Layout Techniques
(see also Background Images below)

Comparing HTML and CSS Align, Clear and Float: Edit the source of this page to compare the HTML attributes of align and clear as used with the table and image to the CSS properties of float and clear. In addition to the HTML document itself, you will have to download the image file curly1.jpg.
Drop Cap Letters with CSS: This file demonstrates how a drop cap can be created with CSS. See the source comments. This technique was adopted from Beginning CSS Web Development: From Novice to Professional by Simon Collison.
Two fixed width columns with no actual columns: This file takes a simple heading/paragraph structure and lays it out in columns with the heading aligned with the top of the corresponding paragraph. Read the notes in the source and experiment to see how IE and other browsers differ.
Two fixed width columns with one float: One technique for laying out a fixed-width page is illustrated here -- one column floats and the other has a wide left margin.
Two column fixed width with spacer: This page takes two fixed-width paragraphs and floats them left and right. Add a containing wrapper to fix the size, but in browsers other than Internet Explorer, the wrapper collapses. This file uses an empty DIV to fix the problem.
Two column fixed width with second wrapper: This page takes two fixed-width paragraphs and floats them left and right. Add a containing wrapper to fix the size, but in browsers other than Internet Explorer, the wrapper collapses. This file uses a second wrapper to fix the problem.
Two Columns with Header and Footer: This template was adapted from Beginning CSS Web Development by Simon Collison. It is a basic page with header, two columns, and footer. We used it at the February 2007 workshop session.

Two Background Images: This file illustrates how to use two background images on one page by using overlapping elements, thus getting around the current limitation of one background image per element.
Clickable Background Image: This page uses the above example again, but illustrates how to make a background image clickable and at the same time accomodate users who are not using the style sheet. It is adapted from an article at http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
Styling Columns with Color: The problem with styling columns in CSS is that the backgrounds only extend to the size of the box created by your tags, DIV or other. In this example, we get around that by setting a background color for the Wrapper, which is the color we want the sidebar to be, then set a different color for the content DIV.
Styling Columns with a Background Image (Faux Columns): This example of the faux column technique is adapted from Collison, Beginning CSS Web Development. The technique uses a background image that repeats along the y-axis to make the columns look as though they have individual background colors..

Styling Tables

Horizontal Segments: This sample page uses the tags THEAD, TFOOT, and TBODY to add style and readability to a table.
Vertical Segments: In this sample, COL and COLGROUP tags are used to style single and multiple columns.

The Cascade

Origins of Styles: This sample uses inline, embedded, linked and imported styles to illustrate how the cascade rules resolve conflicts when an element is styled by more than one source. Download the files here. Then play with the styles, and change their order, to understand how the cascade works in different situations.

<< Home