Sample Files

These pages have been used at our meetings to demonstrate different HTML and CSS topics. Each page can be used to experiment with a particular tag or technique. There are notes 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.

For more recent samples, see the PACS CodePen site.

CSS Variables

CSS variable example
As of this date, CSS variables are only supported in Firefox starting in version 31. Save the sample file and turn the styles on and off to see the difference in styling when using a variable.

Pseudo-classes

:First-child
This sample from October 2013 demonstrates the use of :first-child to fix a problem with the margin at the top of a page. Save the file to your computer and experiment with :first-child in the source. Also experiment with the column-count and column-gap styles.

General

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.
Generated Content
If you are interested in playing with this property, download this test page. To see the property in action, open the page in a text editor and comment out (“/* */”) the generated content declarations and comment others in.

Tables

  1. Baseball standings with columns
  2. Comparison of nth-child and nth-of-type
  3. Baseball standings with a complete set of HTML tags
  4. Baseball standings with three tbodys, one for each division and striping for one division
  5. Baseball standings with separate tables for each division and striping
  6. Table with checkered styling
  7. Table with multiple striping

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

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.

<< Home