SimonCox.com

Version 7.1

HTML Test Page for CSS Style Guide

by Simon Cox

2011-12-07

Articles
Web


This content is used to test that css has been covered for all tags used in content.

Tests for CSS styles when creating new web designs

CSS Basic Elements

The pur­pose of this HTML is to help deter­mine what default set­tings are with CSS and to make sure that all pos­si­ble HTML Ele­ments are includ­ed in this HTML so as to not miss any pos­si­ble Ele­ments when design­ing a site.

Head­ings

Head­ing 1

Head­ing 2

Head­ing 3

Head­ing 4

Head­ing 5
Head­ing 6

[top]

Para­graph

CSS | God's Language

Lorem ipsum dolor sit amet, test link adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. Donec fau­cibus. Nunc iac­ulis sus­cip­it dui. Nam sit amet sem. Ali­quam libero nisi, imperdi­et at, tin­cidunt nec, gravi­da vehic­u­la, nisl. Prae­sent mat­tis, mas­sa quis luc­tus fer­men­tum, turpis mi volut­pat jus­to, eu volut­pat enim diam eget metus. Mae­ce­nas ornare tor­tor. Donec sed tel­lus eget sapi­en fringilla non­um­my. Mau­ris a ante. Sus­pendisse quam sem, con­se­quat at, com­mo­do vitae, feu­giat in, nunc. Mor­bi imperdi­et augue quis tellus.

Lorem ipsum dolor sit amet, empha­sis con­sectetuer adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. Donec fau­cibus. Nunc iac­ulis sus­cip­it dui. Nam sit amet sem. Ali­quam libero nisi, imperdi­et at, tin­cidunt nec, gravi­da vehic­u­la, nisl. Prae­sent mat­tis, mas­sa quis luc­tus fer­men­tum, turpis mi volut­pat jus­to, eu volut­pat enim diam eget metus. Mae­ce­nas ornare tor­tor. Donec sed tel­lus eget sapi­en fringilla non­um­my. Mau­ris a ante. Sus­pendisse quam sem, con­se­quat at, com­mo­do vitae, feu­giat in, nunc. Mor­bi imperdi­et augue quis tellus.

[top]

List Types

Def­i­n­i­tion List

Def­i­n­i­tion List Title

This is a def­i­n­i­tion list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

[top]

Field­sets, Leg­ends, and Form Elements

Leg­end

Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. Donec fau­cibus. Nunc iac­ulis sus­cip­it dui. Nam sit amet sem. Ali­quam libero nisi, imperdi­et at, tin­cidunt nec, gravi­da vehic­u­la, nisl. Prae­sent mat­tis, mas­sa quis luc­tus fer­men­tum, turpis mi volut­pat jus­to, eu volut­pat enim diam eget metus.

Form Ele­ment

Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. Donec fau­cibus. Nunc iac­ulis sus­cip­it dui.

Text Field:

Text Area:

Select Ele­ment:
Option 1Option 2Option 3 Option 1Option 2Option 3

Radio But­tons:
Radio 1
Radio 2
Radio 3

Check­box­es:
Radio 1
Radio 2
Radio 3

Pass­word:

File Input:

[top]

Tables

Table Head­er 1Table Head­er 2Table Head­er 3
Divi­sion 1Divi­sion 2Divi­sion 3
Divi­sion 1Divi­sion 2Divi­sion 3
Divi­sion 1Divi­sion 2Divi­sion 3

[top]

Misc Stuff — abbr, acronym, pre, code, sub, sup, etc.

Lorem super­script dolor sub­script amet, con­sectetuer adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. cite. Nunc iac­ulis sus­cip­it dui. Nam sit amet sem. Ali­quam libero nisi, imperdi­et at, tin­cidunt nec, gravi­da vehic­u­la, nisl. Prae­sent mat­tis, mas­sa quis luc­tus fer­men­tum, turpis mi volut­pat jus­to, eu volut­pat enim diam eget metus. Mae­ce­nas ornare tor­tor. Donec sed tel­lus eget sapi­en fringilla non­um­my. NBA Mau­ris a ante. Sus­pendisse quam sem, con­se­quat at, com­mo­do vitae, feu­giat in, nunc. Mor­bi imperdi­et augue quis tel­lus. AVE

Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit. Nul­lam dig­nis­sim con­va­l­lis est. Quisque ali­quam. Donec fau­cibus. Nunc iac­ulis sus­cip­it dui. Nam sit amet sem. Ali­quam libero nisi, imperdi­et at, tin­cidunt nec, gravi­da vehic­u­la, nisl. Prae­sent mat­tis, mas­sa quis luc­tus fer­men­tum, turpis mi volut­pat jus­to, eu volut­pat enim diam eget metus. Mae­ce­nas ornare tor­tor. Donec sed tel­lus eget sapi­en fringilla non­um­my. NBA Mau­ris a ante. Sus­pendisse quam sem, con­se­quat at, com­mo­do vitae, feu­giat in, nunc. Mor­bi imperdi­et augue quis tel­lus. AVE

This stylesheet is going to help so freak­ing much.” -Blockquote

[top]

And there is more...

Orig­i­nal­ly from the archive that is now kept at http://​snip​plr​.com/​v​i​e​w​/​8121​/​h​t​m​l​-​t​e​s​t​-​p​a​g​e​-​f​o​r​-​c​s​s​-​s​t​y​l​e​-​g​uide/.

Other articles in this topic

A first look at Safecont content quality analysis SEO tool

Review of a new tool from Data elasticity S.L in Spain that analyses the quality of your websites content Read more about A first look at Safecont content quality analysis SEO tool

How to find insecure pages in your site before Google start penalising them

Google will be highlighting all non-secure sites from July 2018 meaning that the Insecure Content Report of Screaming Frog will be in use a lot over the next few months - I will show you what to do. Read more about How to find insecure pages in your site before Google start penalising them

How I add canonicals into Perch CMS sites

The Canonical link in a page's header lets the search engines know where the original page resides. Originally conceived for situations where articles were duplicated they would reference the original. Google tends to choose the oldest version of a page that it can find (but not the only method it uses) and any other pages with the same or very similar content are considered duplicates and will not do a well on the Search Engine Results Pages - SERPs and we want our pages to do well there for the traffic. Read more about How I add canonicals into Perch CMS sites

Using a CDN to help migrate your sites hosting

Moving a site to new hosting can be fraught with issues. Here is one technique that I find useful when moving to a website to a new hosting server. Read more about Using a CDN to help migrate your sites hosting

EU cookie consent law largely ignored

The EU has give the UK until May 28th 2012 to comply with the cookie consent law - how many of the organisations pinpointed by the ICO have met the deadline? Read more about EU cookie consent law largely ignored

EEUK11 report

The UK's first ExpressionEngine conference has taken place in Manchester in August 2011. I provide a report on the event itself and the surrounding activities. Read more about EEUK11 report

Assets for ExpressionEngine

Assets is a new file management add-on for ExpressionEngine and brings a new way of managing assets in your website. I installed it and built a simple image Gallery. Read more about Assets for ExpressionEngine

Responsive web design

Responsive web design has been emerging as a way forward over the past two years. Following inspiration from the way Simon Collison's crafted his personal website I have now implemented a Responsive Web Design on this, my personal website. Read more about Responsive web design

WebFonts

With HTML5 finally emerging from the primordial soup I thought it was time to have a look at where we have got to with fonts on the web, what today's techniques are and what is new in the world of the digital hot metal. Read more about WebFonts

Nibbler

Online testing suites are a very useful way of checking your website to see if it's up to scratch. I take you through Nibbler from Silktide. Read more about Nibbler

New look for 2010

I have finally taken the plunge and updated the site and have switched over to ExpressionEngine. Read more about New look for 2010

Comments