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/ucomm/templatedependents/templatecss/layouts/main.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
.imagetag		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='imagetag'>The quick brown fox jumped over the lazy dog's back.</div> <a class='imagetag' href='/webdev/css.php'>visited link</a>, <a class='imagetag' href="#">unvisited link</a>
p.sec_main		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='sec_main'>The quick brown fox jumped over the lazy dog's back.</div> <a class='sec_main' href='/webdev/css.php'>visited link</a>, <a class='sec_main' href="#">unvisited link</a>
.adr		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='adr'>The quick brown fox jumped over the lazy dog's back.</div> <a class='adr' href='/webdev/css.php'>visited link</a>, <a class='adr' href="#">unvisited link</a>
.bgcolcream		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='bgcolcream'>The quick brown fox jumped over the lazy dog's back.</div> <a class='bgcolcream' href='/webdev/css.php'>visited link</a>, <a class='bgcolcream' href="#">unvisited link</a>
.bgcolscarlet		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='bgcolscarlet'>The quick brown fox jumped over the lazy dog's back.</div> <a class='bgcolscarlet' href='/webdev/css.php'>visited link</a>, <a class='bgcolscarlet' href="#">unvisited link</a>
.bgcolfixed		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='bgcolfixed'>The quick brown fox jumped over the lazy dog's back.</div> <a class='bgcolfixed' href='/webdev/css.php'>visited link</a>, <a class='bgcolfixed' href="#">unvisited link</a>
.bgcolmedgray		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='bgcolmedgray'>The quick brown fox jumped over the lazy dog's back.</div> <a class='bgcolmedgray' href='/webdev/css.php'>visited link</a>, <a class='bgcolmedgray' href="#">unvisited link</a>
.bgcoldkgray		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='bgcoldkgray'>The quick brown fox jumped over the lazy dog's back.</div> <a class='bgcoldkgray' href='/webdev/css.php'>visited link</a>, <a class='bgcoldkgray' href="#">unvisited link</a>
.caption		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='caption'>The quick brown fox jumped over the lazy dog's back.</div> <a class='caption' href='/webdev/css.php'>visited link</a>, <a class='caption' href="#">unvisited link</a>
.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>
.highlight-green		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='highlight-green'>The quick brown fox jumped over the lazy dog's back.</div> <a class='highlight-green' href='/webdev/css.php'>visited link</a>, <a class='highlight-green' href="#">unvisited link</a>
.highlight-navy		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='highlight-navy'>The quick brown fox jumped over the lazy dog's back.</div> <a class='highlight-navy' href='/webdev/css.php'>visited link</a>, <a class='highlight-navy' href="#">unvisited link</a>
.sserifstoryheadnavy		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='sserifstoryheadnavy'>The quick brown fox jumped over the lazy dog's back.</div> <a class='sserifstoryheadnavy' href='/webdev/css.php'>visited link</a>, <a class='sserifstoryheadnavy' href="#">unvisited link</a>
.highlight-red		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='highlight-red'>The quick brown fox jumped over the lazy dog's back.</div> <a class='highlight-red' href='/webdev/css.php'>visited link</a>, <a class='highlight-red' href="#">unvisited link</a>
.sserifstoryheadred		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='sserifstoryheadred'>The quick brown fox jumped over the lazy dog's back.</div> <a class='sserifstoryheadred' href='/webdev/css.php'>visited link</a>, <a class='sserifstoryheadred' href="#">unvisited link</a>
.image_large		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_large'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_large' href='/webdev/css.php'>visited link</a>, <a class='image_large' href="#">unvisited link</a>
.image_large_16x9		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_large_16x9'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_large_16x9' href='/webdev/css.php'>visited link</a>, <a class='image_large_16x9' href="#">unvisited link</a>
.image_medium		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium' href='/webdev/css.php'>visited link</a>, <a class='image_medium' href="#">unvisited link</a>
.image_medium_16x9		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium_16x9'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium_16x9' href='/webdev/css.php'>visited link</a>, <a class='image_medium_16x9' href="#">unvisited link</a>
.image_medium_4x3		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium_4x3'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium_4x3' href='/webdev/css.php'>visited link</a>, <a class='image_medium_4x3' href="#">unvisited link</a>
.image_medium_3x2		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium_3x2'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium_3x2' href='/webdev/css.php'>visited link</a>, <a class='image_medium_3x2' href="#">unvisited link</a>
.image_medium		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium' href='/webdev/css.php'>visited link</a>, <a class='image_medium' href="#">unvisited link</a>
.image_small_16x9		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_16x9'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_16x9' href='/webdev/css.php'>visited link</a>, <a class='image_small_16x9' href="#">unvisited link</a>
.image_small_4x3		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_4x3'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_4x3' href='/webdev/css.php'>visited link</a>, <a class='image_small_4x3' href="#">unvisited link</a>
.image_small_square		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_square'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_square' href='/webdev/css.php'>visited link</a>, <a class='image_small_square' href="#">unvisited link</a>
.image_small_tall		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_tall'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_tall' href='/webdev/css.php'>visited link</a>, <a class='image_small_tall' href="#">unvisited link</a>
.image_small_short		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_short'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_short' href='/webdev/css.php'>visited link</a>, <a class='image_small_short' href="#">unvisited link</a>
.image_small_4x3_vertical		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_4x3_vertical'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_4x3_vertical' href='/webdev/css.php'>visited link</a>, <a class='image_small_4x3_vertical' href="#">unvisited link</a>
.image_small_3x2_vertical		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_3x2_vertical'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_3x2_vertical' href='/webdev/css.php'>visited link</a>, <a class='image_small_3x2_vertical' href="#">unvisited link</a>
.image_small_3x2		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_3x2'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_3x2' href='/webdev/css.php'>visited link</a>, <a class='image_small_3x2' href="#">unvisited link</a>
.image_medium_3x2		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium_3x2'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium_3x2' href='/webdev/css.php'>visited link</a>, <a class='image_medium_3x2' href="#">unvisited link</a>
.image_medium_4x3		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_medium_4x3'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_medium_4x3' href='/webdev/css.php'>visited link</a>, <a class='image_medium_4x3' href="#">unvisited link</a>
.image_small_16x9		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_16x9'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_16x9' href='/webdev/css.php'>visited link</a>, <a class='image_small_16x9' href="#">unvisited link</a>
.image_small_3x2		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_3x2'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_3x2' href='/webdev/css.php'>visited link</a>, <a class='image_small_3x2' href="#">unvisited link</a>
.image_small_3x2_vertical		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_3x2_vertical'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_3x2_vertical' href='/webdev/css.php'>visited link</a>, <a class='image_small_3x2_vertical' href="#">unvisited link</a>
.image_small_4x3		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_4x3'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_4x3' href='/webdev/css.php'>visited link</a>, <a class='image_small_4x3' href="#">unvisited link</a>
.image_small_4x3_vertical		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_4x3_vertical'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_4x3_vertical' href='/webdev/css.php'>visited link</a>, <a class='image_small_4x3_vertical' href="#">unvisited link</a>
.image_small_short		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_short'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_short' href='/webdev/css.php'>visited link</a>, <a class='image_small_short' href="#">unvisited link</a>
.image_small_square		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_square'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_square' href='/webdev/css.php'>visited link</a>, <a class='image_small_square' href="#">unvisited link</a>
.image_small_tall		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='image_small_tall'>The quick brown fox jumped over the lazy dog's back.</div> <a class='image_small_tall' href='/webdev/css.php'>visited link</a>, <a class='image_small_tall' href="#">unvisited link</a>
.organization-name		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='organization-name'>The quick brown fox jumped over the lazy dog's back.</div> <a class='organization-name' href='/webdev/css.php'>visited link</a>, <a class='organization-name' href="#">unvisited link</a>
.organization-unit		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='organization-unit'>The quick brown fox jumped over the lazy dog's back.</div> <a class='organization-unit' href='/webdev/css.php'>visited link</a>, <a class='organization-unit' href="#">unvisited link</a>
.organization-unit		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='organization-unit'>The quick brown fox jumped over the lazy dog's back.</div> <a class='organization-unit' href='/webdev/css.php'>visited link</a>, <a class='organization-unit' href="#">unvisited link</a>
.sec_header		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='sec_header'>The quick brown fox jumped over the lazy dog's back.</div> <a class='sec_header' href='/webdev/css.php'>visited link</a>, <a class='sec_header' href="#">unvisited link</a>
.sserifstoryhead		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='sserifstoryhead'>The quick brown fox jumped over the lazy dog's back.</div> <a class='sserifstoryhead' href='/webdev/css.php'>visited link</a>, <a class='sserifstoryhead' href="#">unvisited link</a>
.street-address		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='street-address'>The quick brown fox jumped over the lazy dog's back.</div> <a class='street-address' href='/webdev/css.php'>visited link</a>, <a class='street-address' href="#">unvisited link</a>
.post-office-box		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='post-office-box'>The quick brown fox jumped over the lazy dog's back.</div> <a class='post-office-box' href='/webdev/css.php'>visited link</a>, <a class='post-office-box' href="#">unvisited link</a>
.tel		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='tel'>The quick brown fox jumped over the lazy dog's back.</div> <a class='tel' href='/webdev/css.php'>visited link</a>, <a class='tel' href="#">unvisited link</a>
.title		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='title'>The quick brown fox jumped over the lazy dog's back.</div> <a class='title' href='/webdev/css.php'>visited link</a>, <a class='title' href="#">unvisited link</a>
.toggle_click		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='toggle_click'>The quick brown fox jumped over the lazy dog's back.</div> <a class='toggle_click' href='/webdev/css.php'>visited link</a>, <a class='toggle_click' href="#">unvisited link</a>
.toolResults		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='toolResults'>The quick brown fox jumped over the lazy dog's back.</div> <a class='toolResults' href='/webdev/css.php'>visited link</a>, <a class='toolResults' href="#">unvisited link</a>
.unl_liquid_pictureframe		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='unl_liquid_pictureframe'>The quick brown fox jumped over the lazy dog's back.</div> <a class='unl_liquid_pictureframe' href='/webdev/css.php'>visited link</a>, <a class='unl_liquid_pictureframe' href="#">unvisited link</a>
.unl_liquid_pictureframe_footer		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='unl_liquid_pictureframe_footer'>The quick brown fox jumped over the lazy dog's back.</div> <a class='unl_liquid_pictureframe_footer' href='/webdev/css.php'>visited link</a>, <a class='unl_liquid_pictureframe_footer' href="#">unvisited link</a>
.unl_liquid_pictureframe_inset		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='unl_liquid_pictureframe_inset'>The quick brown fox jumped over the lazy dog's back.</div> <a class='unl_liquid_pictureframe_inset' href='/webdev/css.php'>visited link</a>, <a class='unl_liquid_pictureframe_inset' href="#">unvisited link</a>
.vcard span.email		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='vcard span.email'>The quick brown fox jumped over the lazy dog's back.</div> <a class='vcard span.email' href='/webdev/css.php'>visited link</a>, <a class='vcard span.email' href="#">unvisited link</a>
.zenboxfeature		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='zenboxfeature'>The quick brown fox jumped over the lazy dog's back.</div> <a class='zenboxfeature' href='/webdev/css.php'>visited link</a>, <a class='zenboxfeature' href="#">unvisited link</a>
.zenboxsolid		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='zenboxsolid'>The quick brown fox jumped over the lazy dog's back.</div> <a class='zenboxsolid' href='/webdev/css.php'>visited link</a>, <a class='zenboxsolid' href="#">unvisited link</a>
.zenboxfixed		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='zenboxfixed'>The quick brown fox jumped over the lazy dog's back.</div> <a class='zenboxfixed' href='/webdev/css.php'>visited link</a>, <a class='zenboxfixed' 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-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-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-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-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.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.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.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.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.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.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.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.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-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.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>
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		< acronym>The quick brown fox jumped over the lazy dog's back. < acronym> 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>
img.center_image		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='center_image'>The quick brown fox jumped over the lazy dog's back.</div> <a class='center_image' href='/webdev/css.php'>visited link</a>, <a class='center_image' href="#">unvisited link</a>
img.left_image		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='left_image'>The quick brown fox jumped over the lazy dog's back.</div> <a class='left_image' href='/webdev/css.php'>visited link</a>, <a class='left_image' href="#">unvisited link</a>
img.right_image		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='right_image'>The quick brown fox jumped over the lazy dog's back.</div> <a class='right_image' href='/webdev/css.php'>visited link</a>, <a class='right_image' href="#">unvisited link</a>
p.more		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='more'>The quick brown fox jumped over the lazy dog's back.</div> <a class='more' href='/webdev/css.php'>visited link</a>, <a class='more' href="#">unvisited link</a>
p.more a		The quick brown fox jumped over the lazy dog's back. visited link, unvisited link View source+ <div class='more a'>The quick brown fox jumped over the lazy dog's back.</div> <a class='more a' href='/webdev/css.php'>visited link</a>, <a class='more a' 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>
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		< sup>The quick brown fox jumped over the lazy dog's back. < sup> 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>

View Source+


<?php
$selectedFile = 'http://www.unl.edu/ucomm/templatedependents/templatecss/';
$test = '';
if(isset($_GET['file']) ){
    $test = $_GET['file'];
}

$stylesheets = array();
$stylesheets['globalstyle']     = 'fonts/globalstyle.master.css';
$stylesheets['mimetypes']       = 'fonts/mimetypes.master.css';
$stylesheets['default']         = 'layouts/default.master.css';
$stylesheets['hcard']           = 'layouts/hcard.master.css';
$stylesheets['ie7']             = 'layouts/ie7.master.css';
$stylesheets['ieonly']          = 'layouts/ieonly.master.css';
$stylesheets['print']           = 'layouts/print.master.css';
$stylesheets['secure']          = 'layouts/secure.master.css';
$stylesheets['shelf']           = 'layouts/self.master.css';
$stylesheets['splash']          = 'layouts/splash.master.css';

if (array_key_exists($test,$stylesheets)) {
    $selectedFile .= $stylesheets[$test];
} else {
    $selectedFile .= 'layouts/main.css';
}

require_once 'UNL/Templates.php';
require_once 'HTML/CSS.php';
require_once 'HTML/Table.php';
require_once 'UNL/HTML/CSS/Sampler.php';
$page = UNL_Templates::factory('Liquid');
$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->collegenavigationlist = '<ul>';
foreach ($stylesheets as $name=>$file) {
    $page->collegenavigationlist .= '<li><a href="?file='.$name.'">'.$name.'</a></li> ';
}
$page->collegenavigationlist .= '</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;}
                    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->omit_selectors = array('body','img','.sIFR-flash','.sIFR-replaced','span.sIFR-alternate','.skipnav',
                                    '.weathertempf','.weathertempc','.weatherforecast',' .weatherconditions',' .weatherasof','.toolresults',
                                    '.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',
                                    '.image_large a','.image_medium img',' .image_medium a img','.image_large a.imagetag','.image_large img',
                                    '.image_medium_16x9 img','.image_large_16x9 img','.image_medium_3x2 img','.image_small_16x9 img',
                                    '.image_medium_4x3 img','.image_small_3x2 img','.image_small_3x2_vertical img','.image_small_4x3 img',
                                    '.image_small_4x3_vertical img','.image_small_short img','.image_small_square img','.image_small_tall img');
$css_sampler->parseCSS();

$css_sampler->css->parseString(file_get_contents($selectedFile));                                        
$css_sampler->css_array = $css_sampler->css->toArray();
$css_sampler->css_array['.sec_header'] = array();
ksort($css_sampler->css_array);
$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 .= $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();

University of Nebraska–Lincoln

UNL Calendar

UNL Peoplefinder

Lincoln Weather

UNL Webcams

Web Developer Network

Class is in Session

Navigation

UNL Stylesheet Samples