Web Developer Network

Class is in Session

UNL Stylesheet Samples

This UNL Template CSS page shows samples of all of the currently-available styles in

http://www.unl.edu/wdn/templates_3.0/css/all.css

Before creating a secondary stylesheet, please call and request that your required style be integrated into the global UNL style library.

Selector Name Usage Sample

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h1>The quick brown fox jumped over the lazy dog's back.</h1>
<h1>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h1>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h2>The quick brown fox jumped over the lazy dog's back.</h2>
<h2>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h2>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h3>The quick brown fox jumped over the lazy dog's back.</h3>
<h3>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h3>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h4>The quick brown fox jumped over the lazy dog's back.</h4>
<h4>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h4>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h5>The quick brown fox jumped over the lazy dog's back.</h5>
<h5>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h5>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<h6>The quick brown fox jumped over the lazy dog's back.</h6>
<h6>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</h6>

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<p>The quick brown fox jumped over the lazy dog's back.</p>
<p>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</p>

blockquote

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<blockquote>The quick brown fox jumped over the lazy dog's back.</blockquote>
<blockquote>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</blockquote>

pre

The quick brown fox jumped over the lazy dog's back.

	visited link,
	unvisited link

View source+

<pre>The quick brown fox jumped over the lazy dog's back.</pre>
<pre>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</pre>

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<a>The quick brown fox jumped over the lazy dog's back.</a>
<a>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</a>

abbr

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<abbr>The quick brown fox jumped over the lazy dog's back.</abbr>
<abbr>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</abbr>

acronym

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<acronym>The quick brown fox jumped over the lazy dog's back.</acronym>
<acronym>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</acronym>

address

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<address>The quick brown fox jumped over the lazy dog's back.</address>
<address>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</address>

cite

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<cite>The quick brown fox jumped over the lazy dog's back.</cite>
<cite>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</cite>

code

The quick brown fox jumped over the lazy dog's back.


	visited link,
	unvisited link

View source+

<code>The quick brown fox jumped over the lazy dog's back.</code>
<code>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</code>

del

~~The quick brown fox jumped over the lazy dog's back.~~ ~~visited link, unvisited link~~

View source+

<del>The quick brown fox jumped over the lazy dog's back.</del>
<del>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</del>

dfn

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<dfn>The quick brown fox jumped over the lazy dog's back.</dfn>
<dfn>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</dfn>

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<em>The quick brown fox jumped over the lazy dog's back.</em>
<em>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</em>

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<q>The quick brown fox jumped over the lazy dog's back.</q>
<q>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</q>

~~The quick brown fox jumped over the lazy dog's back.~~ ~~visited link, unvisited link~~

View source+

<s>The quick brown fox jumped over the lazy dog's back.</s>
<s>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</s>

samp

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<samp>The quick brown fox jumped over the lazy dog's back.</samp>
<samp>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</samp>

strike

~~The quick brown fox jumped over the lazy dog's back.~~ ~~visited link, unvisited link~~

View source+

<strike>The quick brown fox jumped over the lazy dog's back.</strike>
<strike>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</strike>

strong

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<strong>The quick brown fox jumped over the lazy dog's back.</strong>
<strong>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</strong>

sub

_{The quick brown fox jumped over the lazy dog's back.} _{visited link,
unvisited link}

View source+

<sub>The quick brown fox jumped over the lazy dog's back.</sub>
<sub>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</sub>

sup

^{The quick brown fox jumped over the lazy dog's back.} ^{visited link,
unvisited link}

View source+

<sup>The quick brown fox jumped over the lazy dog's back.</sup>
<sup>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</sup>

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<tt>The quick brown fox jumped over the lazy dog's back.</tt>
<tt>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</tt>

var

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<var>The quick brown fox jumped over the lazy dog's back.</var>
<var>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</var>

Definition Term: Definition

visited link, unvisited link

View source+

<dl>
    <dt>Definition Term</dt>
    <dd>Definition</dd></dl>
<dl>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</dl>

Item 1

visited link

unvisited link

View source+

<ol>
    <li>Item 1</li></ol>
<ol>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</ol>

Item 1

visited link

unvisited link

View source+

<ul>
    <li>Item 1</li></ul>
<ul>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</ul>

Item 1

visited link

unvisited link

View source+

<ol>
    <li>Item 1</li></ol>
<ol>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</ol>

Item 1

visited link

unvisited link

View source+

<ul>
    <li>Item 1</li></ul>
<ul>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</ul>

blockquote

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<blockquote>The quick brown fox jumped over the lazy dog's back.</blockquote>
<blockquote>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</blockquote>

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<q>The quick brown fox jumped over the lazy dog's back.</q>
<q>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</q>

del

~~The quick brown fox jumped over the lazy dog's back.~~ ~~visited link, unvisited link~~

View source+

<del>The quick brown fox jumped over the lazy dog's back.</del>
<del>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</del>

a.email

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='email'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='email' href='/webdev/css.php'>visited link</a>,
	<a class='email' href="#">unvisited link</a>

sub

_{The quick brown fox jumped over the lazy dog's back.} _{visited link,
unvisited link}

View source+

<sub>The quick brown fox jumped over the lazy dog's back.</sub>
<sub>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</sub>

sup

^{The quick brown fox jumped over the lazy dog's back.} ^{visited link,
unvisited link}

View source+

<sup>The quick brown fox jumped over the lazy dog's back.</sup>
<sup>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</sup>

sup

^{The quick brown fox jumped over the lazy dog's back.} ^{visited link,
unvisited link}

View source+

<sup>The quick brown fox jumped over the lazy dog's back.</sup>
<sup>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</sup>

abbr

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<abbr>The quick brown fox jumped over the lazy dog's back.</abbr>
<abbr>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</abbr>

acronym

The quick brown fox jumped over the lazy dog's back. visited link, unvisited link

View source+

<acronym>The quick brown fox jumped over the lazy dog's back.</acronym>
<acronym>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</acronym>

.code

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='code'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='code' href='/webdev/css.php'>visited link</a>,
	<a class='code' href="#">unvisited link</a>

pre

The quick brown fox jumped over the lazy dog's back.

	visited link,
	unvisited link

View source+

<pre>The quick brown fox jumped over the lazy dog's back.</pre>
<pre>
	<a href='/webdev/css.php'>visited link</a>,
	<a href="#">unvisited link</a>
</pre>

a.imagelink

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='imagelink'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='imagelink' href='/webdev/css.php'>visited link</a>,
	<a class='imagelink' href="#">unvisited link</a>

a.external

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='external'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='external' href='/webdev/css.php'>visited link</a>,
	<a class='external' href="#">unvisited link</a>

a.application-map

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-map'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-map' href='/webdev/css.php'>visited link</a>,
	<a class='application-map' href="#">unvisited link</a>

a.mail-message-new

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='mail-message-new'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='mail-message-new' href='/webdev/css.php'>visited link</a>,
	<a class='mail-message-new' href="#">unvisited link</a>

a.text-vcard

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-vcard'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-vcard' href='/webdev/css.php'>visited link</a>,
	<a class='text-vcard' href="#">unvisited link</a>

a.application-pdf

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-pdf'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-pdf' href='/webdev/css.php'>visited link</a>,
	<a class='application-pdf' href="#">unvisited link</a>

a.application-certificate

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-certificate'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-certificate' href='/webdev/css.php'>visited link</a>,
	<a class='application-certificate' href="#">unvisited link</a>

a.application-x-executable

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-x-executable'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-x-executable' href='/webdev/css.php'>visited link</a>,
	<a class='application-x-executable' href="#">unvisited link</a>

a.audio-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='audio-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='audio-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='audio-x-generic' href="#">unvisited link</a>

a.font-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='font-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='font-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='font-x-generic' href="#">unvisited link</a>

a.image-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='image-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='image-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='image-x-generic' href="#">unvisited link</a>

a.package-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='package-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='package-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='package-x-generic' href="#">unvisited link</a>

a.text-html

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-html'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-html' href='/webdev/css.php'>visited link</a>,
	<a class='text-html' href="#">unvisited link</a>

a.text-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-generic' href="#">unvisited link</a>

a.text-x-generic-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-generic-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-generic-template' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-generic-template' href="#">unvisited link</a>

a.text-x-script

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-script'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-script' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-script' href="#">unvisited link</a>

a.video-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='video-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='video-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='video-x-generic' href="#">unvisited link</a>

a.x-office-address-book

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-address-book'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-address-book' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-address-book' href="#">unvisited link</a>

a.x-office-calendar

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-calendar'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-calendar' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-calendar' href="#">unvisited link</a>

a.x-office-document

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-document'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-document' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-document' href="#">unvisited link</a>

a.x-office-document-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-document-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-document-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-document-template' href="#">unvisited link</a>

a.x-office-drawing

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-drawing'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-drawing' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-drawing' href="#">unvisited link</a>

a.x-office-drawing-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-drawing-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-drawing-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-drawing-template' href="#">unvisited link</a>

a.x-office-presentation

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-presentation'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-presentation' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-presentation' href="#">unvisited link</a>

a.x-office-presentation-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-presentation-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-presentation-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-presentation-template' href="#">unvisited link</a>

a.x-office-spreadsheet

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-spreadsheet'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-spreadsheet' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-spreadsheet' href="#">unvisited link</a>

a.x-office-spreadsheet-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-spreadsheet-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-spreadsheet-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-spreadsheet-template' href="#">unvisited link</a>

a.application-msword

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-msword'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-msword' href='/webdev/css.php'>visited link</a>,
	<a class='application-msword' href="#">unvisited link</a>

a.application-vnd-ms-excel

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-vnd-ms-excel'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-vnd-ms-excel' href='/webdev/css.php'>visited link</a>,
	<a class='application-vnd-ms-excel' href="#">unvisited link</a>

a.application-vnd-ms-powerpoint

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-vnd-ms-powerpoint'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-vnd-ms-powerpoint' href='/webdev/css.php'>visited link</a>,
	<a class='application-vnd-ms-powerpoint' href="#">unvisited link</a>

a.application-zip

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-zip'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-zip' href='/webdev/css.php'>visited link</a>,
	<a class='application-zip' href="#">unvisited link</a>

a.feed-icon

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='feed-icon'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='feed-icon' href='/webdev/css.php'>visited link</a>,
	<a class='feed-icon' href="#">unvisited link</a>

a.mail-message-new

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='mail-message-new'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='mail-message-new' href='/webdev/css.php'>visited link</a>,
	<a class='mail-message-new' href="#">unvisited link</a>

a.text-vcard

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-vcard'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-vcard' href='/webdev/css.php'>visited link</a>,
	<a class='text-vcard' href="#">unvisited link</a>

a.application-pdf

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-pdf'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-pdf' href='/webdev/css.php'>visited link</a>,
	<a class='application-pdf' href="#">unvisited link</a>

a.pdf

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='pdf'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='pdf' href='/webdev/css.php'>visited link</a>,
	<a class='pdf' href="#">unvisited link</a>

a.application-certificate

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-certificate'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-certificate' href='/webdev/css.php'>visited link</a>,
	<a class='application-certificate' href="#">unvisited link</a>

a.application-x-executable

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-x-executable'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-x-executable' href='/webdev/css.php'>visited link</a>,
	<a class='application-x-executable' href="#">unvisited link</a>

a.audio-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='audio-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='audio-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='audio-x-generic' href="#">unvisited link</a>

a.font-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='font-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='font-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='font-x-generic' href="#">unvisited link</a>

a.image-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='image-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='image-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='image-x-generic' href="#">unvisited link</a>

a.package-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='package-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='package-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='package-x-generic' href="#">unvisited link</a>

a.text-html

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-html'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-html' href='/webdev/css.php'>visited link</a>,
	<a class='text-html' href="#">unvisited link</a>

a.text-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-generic' href="#">unvisited link</a>

a.text-x-generic-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-generic-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-generic-template' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-generic-template' href="#">unvisited link</a>

a.text-x-script

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='text-x-script'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='text-x-script' href='/webdev/css.php'>visited link</a>,
	<a class='text-x-script' href="#">unvisited link</a>

a.video-x-generic

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='video-x-generic'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='video-x-generic' href='/webdev/css.php'>visited link</a>,
	<a class='video-x-generic' href="#">unvisited link</a>

a.x-office-address-book

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-address-book'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-address-book' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-address-book' href="#">unvisited link</a>

a.x-office-calendar

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-calendar'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-calendar' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-calendar' href="#">unvisited link</a>

a.x-office-document

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-document'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-document' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-document' href="#">unvisited link</a>

a.x-office-document-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-document-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-document-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-document-template' href="#">unvisited link</a>

a.x-office-drawing

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-drawing'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-drawing' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-drawing' href="#">unvisited link</a>

a.x-office-drawing-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-drawing-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-drawing-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-drawing-template' href="#">unvisited link</a>

a.x-office-presentation

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-presentation'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-presentation' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-presentation' href="#">unvisited link</a>

a.x-office-presentation-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-presentation-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-presentation-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-presentation-template' href="#">unvisited link</a>

a.x-office-spreadsheet

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-spreadsheet'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-spreadsheet' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-spreadsheet' href="#">unvisited link</a>

a.x-office-spreadsheet-template

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='x-office-spreadsheet-template'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='x-office-spreadsheet-template' href='/webdev/css.php'>visited link</a>,
	<a class='x-office-spreadsheet-template' href="#">unvisited link</a>

a.application-msword

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-msword'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-msword' href='/webdev/css.php'>visited link</a>,
	<a class='application-msword' href="#">unvisited link</a>

a.msword

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='msword'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='msword' href='/webdev/css.php'>visited link</a>,
	<a class='msword' href="#">unvisited link</a>

a.application-vnd-ms-excel

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-vnd-ms-excel'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-vnd-ms-excel' href='/webdev/css.php'>visited link</a>,
	<a class='application-vnd-ms-excel' href="#">unvisited link</a>

a.application-vnd-ms-powerpoint

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-vnd-ms-powerpoint'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-vnd-ms-powerpoint' href='/webdev/css.php'>visited link</a>,
	<a class='application-vnd-ms-powerpoint' href="#">unvisited link</a>

a.application-zip

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='application-zip'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='application-zip' href='/webdev/css.php'>visited link</a>,
	<a class='application-zip' href="#">unvisited link</a>

a.feed-icon

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='feed-icon'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='feed-icon' href='/webdev/css.php'>visited link</a>,
	<a class='feed-icon' href="#">unvisited link</a>

body.popup

View source+

<div class='popup'>The quick brown fox jumped over the lazy dog's back.</div>
<a class='popup' href='/webdev/css.php'>visited link</a>,
	<a class='popup' href="#">unvisited link</a>

.zenbox

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox '>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox ' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox ' href="#">unvisited link</a>

.zenbox bright

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox bright'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox bright' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox bright' href="#">unvisited link</a>

.zenbox cool

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox cool'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox cool' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox cool' href="#">unvisited link</a>

.zenbox soothing

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox soothing'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox soothing' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox soothing' href="#">unvisited link</a>

.zenbox energetic

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox energetic'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox energetic' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox energetic' href="#">unvisited link</a>

.zenbox neutral

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox neutral'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox neutral' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox neutral' href="#">unvisited link</a>

.zenbox primary

Zenbox h3

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zenbox primary'><h3>Zenbox h3</h3>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zenbox primary' href='/webdev/css.php'>visited link</a>,
	<a class='zenbox primary' href="#">unvisited link</a>

.zentable

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

View source+

<div class='zentable '>The quick brown fox jumped over the lazy dog's back.</div>
<a class='zentable ' href='/webdev/css.php'>visited link</a>,
	<a class='zentable ' href="#">unvisited link</a>

.zentable bright

zentable bright
table body

visited link, unvisited link

View source+

<div class='zentable bright'>
    <table class="zentable bright">
        <thead>
            <tr><th>zentable bright</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable bright' href='/webdev/css.php'>visited link</a>,
	<a class='zentable bright' href="#">unvisited link</a>

.zentable cool

zentable cool
table body

visited link, unvisited link

View source+

<div class='zentable cool'>
    <table class="zentable cool">
        <thead>
            <tr><th>zentable cool</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable cool' href='/webdev/css.php'>visited link</a>,
	<a class='zentable cool' href="#">unvisited link</a>

.zentable soothing

zentable soothing
table body

visited link, unvisited link

View source+

<div class='zentable soothing'>
    <table class="zentable soothing">
        <thead>
            <tr><th>zentable soothing</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable soothing' href='/webdev/css.php'>visited link</a>,
	<a class='zentable soothing' href="#">unvisited link</a>

.zentable energetic

zentable energetic
table body

visited link, unvisited link

View source+

<div class='zentable energetic'>
    <table class="zentable energetic">
        <thead>
            <tr><th>zentable energetic</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable energetic' href='/webdev/css.php'>visited link</a>,
	<a class='zentable energetic' href="#">unvisited link</a>

.zentable neutral

zentable neutral
table body

visited link, unvisited link

View source+

<div class='zentable neutral'>
    <table class="zentable neutral">
        <thead>
            <tr><th>zentable neutral</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable neutral' href='/webdev/css.php'>visited link</a>,
	<a class='zentable neutral' href="#">unvisited link</a>

.zentable primary

zentable primary
table body

visited link, unvisited link

View source+

<div class='zentable primary'>
    <table class="zentable primary">
        <thead>
            <tr><th>zentable primary</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table></div>
<a class='zentable primary' href='/webdev/css.php'>visited link</a>,
	<a class='zentable primary' href="#">unvisited link</a>

View Source+


<?php
chdir(dirname(dirname(__FILE__)));
ini_set('display_errors',false);
$selectedFile = 'http://www.unl.edu/wdn/templates_3.0/css/';

$stylesheets = array();
$stylesheets['Headers']  = 'content/headers.css';
$stylesheets['Columns']  = 'content/columns.css';
$stylesheets['Zenboxes'] = 'content/zenbox.css';
$stylesheets['Images']   = 'content/images.css';

if (isset($_GET['file'])
    && array_key_exists($_GET['file'], $stylesheets)) {
    $selectedFile .= $stylesheets[$_GET['file']];
} else {
    $selectedFile .= 'all.css';
}

require_once 'UNL/Templates.php';
require_once 'HTML/CSS.php';
require_once 'HTML/Table.php';
require_once 'UNL/HTML/CSS/Sampler.php';

UNL_Templates::$options['version'] = 3;

$page = UNL_Templates::factory('Fixed');
$page->doctitle        = '<title>UNL | WDN | Stylesheet Examples</title>';
$page->titlegraphic = '<h1>Web Developer Network</h1><h2>Class is in Session</h2>';
$page->breadcrumbs = '<ul>
                        <li><a href="http://www.unl.edu/">UNL</a></li>
                        <li><a href="http://www.unl.edu/webdevnet/"><abbr title="Web Developer Network">WDN</abbr></a></li>
                        <li>Stylesheet Examples</li>
                    </ul>';
$page->maincontentarea = '<ul>';
foreach ($stylesheets as $name=>$file) {
    $page->maincontentarea .= '<li><a href="?file='.$name.'">'.$name.'</a></li> ';
}
$page->maincontentarea .= '</ul>';
$page->leftRandomPromo = '';
$page->navlinks        = str_replace('"/webdevnet/','"http://www.unl.edu/webdevnet/',file_get_contents('http://www.unl.edu/webdevnet/sharedcode/navigation.html'));
$page->footercontent = file_get_contents('http://www.unl.edu/webdevnet/sharedcode/footer.html');
$page->head .= '<script type="text/javascript">
                function showHide(e)
                {
                   document.getElementById(e).style.display=(document.getElementById(e).style.display=="block")?"none":"block";
                   return false;
                }
                </script>
                <style type="text/css">
                    .stylewrap {padding:5px;}
                    table td {max-width:720px; overflow:hidden;}
                    tr:hover {background-color:#F0F0F0;}
                    th {font-size:1.4em;color:#585858;padding:0.2em;}
                    td {border-bottom:1px solid #000;padding:0px;margin:0px;}
                    .vsource {margin-top:5px;overflow:auto;}
                </style>';


// Set up the sampler object.
$css_sampler = new UNL_HTML_CSS_Sampler(    array(),
                                            array('cellspacing'=>0));
$css_sampler->sort = true;
$css_sampler->omit_selectors = array('body','img','.skipnav','.hidden','iframe','span','applet','object','html','tfoot','fieldset',
                                    'kbd','ins','font','big','small','b','u','i','center','div',
                                    '.toolresults','.toolbar_plugin','table','caption','thead','tbody','form','label','legend','tr','th','td',
                                    '.toolResultsMask','form select option','hr.ppl_Sresult_line','p.ppl_Sresult.alt','p.ppl_Sresult',
                                    '.scrollButton','.image_large a img','.dtstart',' .dtend',' .dtstamp','.fn',' .org','.footer_logo',
                                    '.star','.star a','div.rating div.on a','div.done','.rating','.rating p','div.rating div.hover a',
                                    'div.done a','.cancel','ul.wdn_tabs-nojs span img','ul.wdn_tabs span sup','li','dt','dd',
);
$css_sampler->parseCSS();
$css_sampler->css->parseString(file_get_contents($selectedFile));
$css_sampler->css_array = $css_sampler->css->toArray();
$css_sampler->cleanSelectors();

foreach ($css_sampler->css_array as $key=>$val) {
    if (strpos($key, '.zentable') !== false
        || strpos($key,'.image_') !== false) {
        unset($css_sampler->css_array[$key]);
    }
}

$zentables = array();
$zenboxes = array();
foreach (array('','bright','cool','soothing','energetic','neutral','primary') as $style) {
    $zenboxes['.zenbox '.$style]      = array();
    $zentables['.zentable '.$style]    = array();
    $css_sampler->custom_samples['.zenbox '.$style] = '<h3>Zenbox h3</h3>'.$css_sampler->sampletext;
    $css_sampler->custom_samples['.zentable '.$style] = '
    <table class="zentable '.$style.'">
        <thead>
            <tr><th>zentable '.$style.'</th></tr>
        </thead>
        <tbody>
            <tr><td>table body</td></tr>
        </tbody>
    </table>';
}
$css_sampler->css_array = array_merge($css_sampler->css_array, $zenboxes);
$css_sampler->css_array = array_merge($css_sampler->css_array, $zentables);
$css_sampler->custom_samples['ul'] = '
    <li>Item 1</li>';
$css_sampler->custom_samples['ol'] = '
    <li>Item 1</li>';
$css_sampler->custom_samples['dl'] = '
    <dt>Definition Term</dt>
    <dd>Definition</dd>';

$css_sampler->buildSampleTable();

$page->maincontentarea = '<h1>UNL Stylesheet Samples</h1>' .
        '<p>This UNL Template CSS page shows samples of all of the currently-available styles in <pre>' . 
        $selectedFile . '</pre> ' .
                'Before creating a secondary stylesheet, ' .
                 'please call and request that your required style be integrated into the global ' .
                 'UNL style library.</p>'.$page->maincontentarea;
$page->maincontentarea .= $css_sampler->toHtml();
$page->maincontentarea .= '<a href="#" onclick="document.getElementById(\'source\').style.display=\'block\'; return false;">View Source+</a><div id="source" style="display:none;">'.highlight_file($_SERVER['SCRIPT_FILENAME'],true).'</div>';

echo $page->toHtml();

Your Feedback

Share This Page

© 2009 University of Nebraska-Lincoln | Lincoln, NE 68588 | 402-472-7211 | comments?
UNL web templates and quality assurance provided by the Web Developer Network | W3C | CSS

University of Nebraska–Lincoln

Web Developer Network

Class is in Session

UNL Stylesheet Samples

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

The quick brown fox jumped over the lazy dog's back.

visited link, unvisited link

Zenbox h3

Zenbox h3

Zenbox h3

Zenbox h3

Zenbox h3

Zenbox h3

Your Feedback

Share This Page