Example HTML document styled with an universal CSS

Originally prepared by Peter Kahoun in 2009/04. Quick contact. More information about this universal stylesheet.

Following document illustrates styling abilities of the "Universal CSS" and features of the JavaScript document that is also attached and linkable optionally.

Table of contents

  1. (Basic inline elements)
  2. Lists
  3. Quoting
  4. Codes
  5. Images
  6. Tables
  7. Other

Second level heading

Donec vehicula ullamcorper Olle Aptent null taciti sociosqu ad litora torquent per conubia nostra? Pellen tesque eleif end, odio sit amet viverra porta, augue metus faucibus odio, pretium pellentesque velit tortor in libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra? Pellen tesque eleif end, odio sit amet viverra porta, augue metus faucibus odio, pretium pellentesque velit tortor in libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lists

  1. Ordered list
  2. Unordered list
  3. Definition list

Pellen tesque eleif end, odio sit amet viverra porta, augue metus faucibus odio, pretium pellentesque velit tortor in libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Unordered ordered

  1. Lorem ipsum dolor
  2. Sit amet. Pellen tesque eleif end, odio sit amet. Pellen tesque eleif end, odio sit amet.
  3. Consectetuer adip
  4. I scing elit
  5. Donec nec arcu Cras libero

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices dolor id erat.

An unordered list

Aliquam aliquet sagittis odio. Donec lacinia. Mauris dolor libero, vulputate quis, viverra ut, semper in, neque.

So-called definition list

Ullamcorper
Donec vehicula null class aptent taciti sociosqu ad litora torquent per conubia nostra
Donec vehicula
Ullamcorper null aptent taciti sociosqu ad litora torquent per conubia nostra
Pellen tesque eleif end, odio sit amet
Qonec
Commodo eget?

Quoting

Donec libero dui, commodo eget, fringilla eget, consectetuer in, libero. Donec vehicula ullamcorper nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque massa lorem, convallis non, hendrerit eget, bibendum id, risus. Phasellus turpis.

Don Ullamcorper, 1472

Donec vehicula ullamcorper null Class aptent taciti sociosqu ad litora torquent per conubia nostra?

Codes (block and inline also)

Class aptent taciti sociosqu ad litora torquent per conubia foreach ($array as $item) nostra, per inceptos himenaeos. Pellentesque massa lorem, convallis non, hendrerit eget, bibendum id, risus. Phasellus turpis.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<etc.>

...eventually longer one:

/* code */

code {
	padding:1px;
	background:#e6f0fb;
	font-family:monospace;}

pre code {
	display:block;
	max-height:15em; padding:.5em; overflow:scroll; overflow-y:auto;
	border:1px dashed #ccc;
	background-color:transparent;}

/* tables */

table {
	border-collapse:collapse;}

	th,
	td {
		padding:3px .5em;
		border:1px solid #ddd;
		text-align:left;}

Images

Note: in this section, some of the aligned images/blocks have a class specified. These classes are used: left, right, figure, figure-right, figure-left. Identical with Texy converter result.

Image - as simple as possible

Just image aligned to right

It's used the right class.

Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

More sophisticated images

Please notice, that HTML constructions in this section are very much affected/inspired/etc. by the default Texy converter output. After all, it's hardly possible to get simpler here, so why not to be compatible with existing conventions.

Linking image al. to left

Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Now some pics with description!

Look, I'm describing the (aligned) image!

Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Donec vehicula ullamcorper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Tables

By the way, following table contains also a tfoot section. But nothing like that is required, just optional.

Name Points
Total 71
Tony Stonem 17
Søren Kierkegaard 14
Emmanuel Adebayor 16
Maria Curie-Skłodowska 22
J. A. Wellington 13

A table with more content

ID Name Description
1 Lorem Ipsum

Lorem ipsum dolor sit amet consectetuer a a ut velit neque. Tristique odio fermentum Ut enim adipiscing consequat convallis hendrerit nunc pulvinar.

Condimentum Phasellus sagittis ut semper dolor Aenean justo Phasellus consectetuer nulla. Nulla orci consectetuer at orci felis justo a ut felis sed. Libero condimentum wisi urna sapien id quam quis at adipiscing sapien.

Nam molestie convallis enim et non tristique Nullam et consectetuer Vestibulum. Mauris.

2 Dolor sit amet

Lorem ipsum dolor sit amet consectetuer a a ut velit neque. Tristique odio fermentum Ut enim adipiscing consequat convallis hendrerit nunc pulvinar.

  • Condimentum Phasellus
  • sagittis ut semper dolor

Other elements

Horizontal line

as known as "thematic break".

Lorem ipsum dolor sit amet consectetuer a a ut velit neque. Tristique odio fermentum Ut enim adipiscing consequat convallis hendrerit nunc pulvinar.


Lorem ipsum dolor sit amet consectetuer a a ut velit neque. Tristique odio fermentum Ut enim adipiscing consequat convallis hendrerit nunc pulvinar.

An important block

Lorem ipsum dolor sit amet consectetuer Ut Curabitur laoreet turpis Phasellus. Nibh aliquet ipsum In Vestibulum sem sem ac justo nisl Nulla. Vestibulum id pretium Nulla eros pretium Vivamus ac Sed mi Curabitur. Morbi Nulla.

  1. Lorem ipsum dolor
  2. sit amet consectetuer
  3. Ut Curabitur

Poetry

This is actually raw HTML:

Lorem ipsum dolor sit amet
Consectetuer adipiscing at Nam id
Mauris Vestibulum in eu id
Habitasse faucibus sed vestibulum laoreet
Fringilla commodo hac adipiscing Pellentesque
Feugiat egestas Nunc Quisque quis

Et quis Curabitur urna hac
Consequat Vestibulum ac Praesent

Warning block

Nibh aliquet ipsum In Vestibulum sem sem ac justo nisl Nulla. Vestibulum id pretium

Negative block

Nibh aliquet ipsum In Vestibulum sem sem ac justo nisl Nulla. Vestibulum id pretium

Positive block

Nibh aliquet ipsum In Vestibulum sem sem ac justo nisl Nulla. Vestibulum id pretium

Download block

Download The Something
12 MB, ZIP archive

Thumbs of same height are required.

All six levels of headings

I'm number one

Second place also nice

Third still good

Four is pleasant

Five is better than six
Six? It really exists!

Lorem ipsum dolor sit amet consectetuer a a ut velit neque. Tristique odio fermentum Ut enim adipiscing consequat convallis hendrerit nunc pulvinar.

Tincidunt eget nisl ac convallis enim auctor velit Vestibulum ipsum laoreet. Vitae Phasellus ipsum quis lobortis tellus consequat enim nibh justo Curabitur. Amet felis Sed mollis ipsum metus nascetur facilisi quis convallis platea. Molestie dui.

Simple forms - α

This section is in alpha-stage. Or "experimental", if you want.

Sorry, this is not valid e-mail.
Will not be offered to spambots.
Pet person kind