Home →

Examples

A whole bunch of examples demonstrating various HTML elements and CSS properties in action. The web pages are minimal, bare-bone examples so that you can clearly see what's going on. Just view the source.

HTML Dog, The Book

HTML Dog is hosted by Titan Internet

Text

Headings - h1 to h6 in their default style
Size doesn't matter - you can make headings any size you want with CSS
Changing case - CSS properties text-transform and font-variant
Font sizes - Absolute vs. relative units - try bumping up the text size preference in Internet Explorer (View → Text Size → Largest)
Spacing out text - text-align, text-indent, word-spacing, and letter-spacing
Vertical alignment - examples of the vertical-align CSS property
Sub and Superscript - using positioning as an alternative to vertical-align
Drop caps 1 - a simple way to achieve a common effect
Drop caps 2 - using graphical drop caps
Drop caps 3 - using the :first-letter pseudo class (which isn't widely supported)
Pull Quotes 1 - a simple pull quote structure
Pull Quotes 2 - adding a bit of style
Pull Quotes 3 - a more elaborate example

Images

HTML images - the img element
CSS background images - the background-image property
Single instances - using the background-repeat property
Curved corners 1 - using smaller background images
Curved corners 2 - in variable width and height boxes
Image replacement 1 - replacing functional text with graphical text
Image replacement 2 - shifting the text out of the way using text-indent
Image replacement 3 - placing the image on top of the text

Layout

Borders
Margin collapsing
Block and inline 1 - changing the behaviour of boxes using the display property
Block and inline 2 - more differences between block and inline
Block and inline 3 - the not-widely-supported display: inline-block
Positioning 1 - static
Positioning 2 - relative
Positioning 3 - absolute
Positioning 4 - absolute within a relative box
Floating 1 - a simple floated box
Floating 2 - two floated boxes
Floating 3 - clearing floated boxes
Page layout 1 - two columns step 1 - positioning a navigation column
Page layout 2 two columns step 2 - using margin to push the content out from under the navigation column
Page layout 3 - using a border to provide the background for a column
Page layout 4 - three columns
Page layout 5 - adding a header
Page layout 6 - footers won't always work with absolute positioned columns...
Page layout 7 - adding a footer using floated columns
Charles Darwin - a styled up version of the basic principles of the previous examples

Lists

Basic lists - ul, ol, and li elements
Nested lists
Definition lists - dl, dt, and dd
List markers - changing bullets and numbering using list-style-type
Inside and outside list markers - using list-style-position
Dropdowns - using Suckerfish
Tabs 1 - basic tabs using display
Tabs 2 - basic tabs using float
Tabs 3 - adding more style
Tabs 4 - styled example
Tabs 5 - another style
Tabs 6 - yet another style

Tables

Basic table - table, tr, and td elements
Header cells - th elements
Merging cells 1 - the rowspan attribute
Mergining cells 2 - the colspan attribute
Border collapsing 1 - nicer tables using the border-collapse property
Border collapsing 2 - borders between cells and the table collapse differently in different browsers (try this in Firefox and in IE, for example)
Column groups - col and colgroup elements
Empty cells - using the empty-cells property to specify how empty cells should be displayed
Table layout 1 - automatic layout algorithm
Table layout 2 - fixed layout algorithm (set using the table-layout property)

Forms

Text boxes - text and password type input elements
Checkboxes and radio buttons - more input element types
File upload input
Text areas - the textarea element
Select boxes - basic use of select and option elements
Select box option groups - using the optgroup element
Multiple selection select boxes - using the multiple attribute