elri's css

a myriad of clean, stylish CSS

Welcome, guest, to my new hoard of CSS layouts, both petpages and userlookups. They are categorized into three divisions for your convenience: layout style, color name, and number. They are simple to use; barely any coding experience is needed. I guarantee that they will work in Safari and Firefox; I have checked every single one myself. Scroll down and knock yourself out.

terms of usage

+ leave my credit and link untouched
+ refrain from claiming any part of whole of my CSS as your own
+ DON'T STEAL. It's a reportable offense, and coding is content too.

petpage classes

Fancy

A clean and professional Century Gothic/Tahoma based layout class.

Cute Marquee

A stylish page in Century Gothic and Verdana with a moving announcements bar.

Cute

An adorable page based off of Cute Marquee, combining two colors for a dazzling effect.

petpage css

If you want to see more of the code and are using Safari, drag the bottom right corner down and you can browse the whole thing. Nifty, eh?

Class: Cute Marquee

All of these have a moving announcements bar.

The hearts are not actually on them.

Colors: Green & Aqua Blue; Class: Cute Marquee; ID: CM01

.heart {font-size: 120px; line-height: -2px; font-family: Webdings; color: #eeeeee;text-align:left}

.css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #ABE144}

.title {font-size: 50pt; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #ABE144;text-align:right}

.H {font-size: 12pt; line-height: 20px; font-family: Century Gothic; letter-spacing: 3px; color: #60DFCC; text-align:right;text-transform:uppercase;font-weight:bold}

.small {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.move {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.bottom {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

a {color:#60DFCC;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:bold}
a:hover {color: #cccccc; text-transform:uppercase;}

div.content {background-color: #ffffff;
width: 400px;
text-align:left;
padding: 15px;}

</style>

<font class=title> Title Here</font><br><font class=H>subheader here</font><br>
<font class=small> - - anything you want - - anything you want - - </font><br><br>
<div style="border-top: #ABE144 2px solid; width: 390px; text-align: center"></div>
<font class=move>
<marquee><br>

<b>Date here:</b> Here you can put a few announcements or something you would like of as importance. It's just another place for text.

</marquee><br></font><br>
<div style="border-top: #ABE144 2px solid; width: 390px; text-align: center"></div>

<font class=H>Normal header here</font><br>

You can just have a bunch of text here for whatever purpose you feel like, as long as you keep my credit/link back. To make new paragraphs or space between your text, use the command <b>br</b> in brackets like these:<>.

<font class=H>Another header here</font><br>

More text here!

<font class=css>Like the CSS?</font><br>
<font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a>
</font>

</div>
<br>
<font class=bottom>css by Elri (electric_gelert567)</font>

</center>

Colors: Hot Pink & Orange; Class: Cute Marquee; ID: CM02

.heart {font-size: 120px; line-height: -2px; font-family: Webdings; color: #eeeeee;text-align:left}

.css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #F3922A}

.title {font-size: 50pt; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #F3922A;text-align:right}

.H {font-size: 12pt; line-height: 20px; font-family: Century Gothic; letter-spacing: 3px; color: #E35990; text-align:right;text-transform:uppercase;font-weight:bold}

.small {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.move {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.bottom {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

a {color:#E35990;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:bold}
a:hover {color: #cccccc; text-transform:uppercase;}

div.content {background-color: #ffffff;
width: 400px;
text-align:left;
padding: 15px;}

</style>

<font class=title> Title Here</font><br><font class=H>subheader here</font><br>
<font class=small> - - anything you want - - anything you want - - </font><br><br>
<div style="border-top: #F3922A 2px solid; width: 390px; text-align: center"></div>
<font class=move>
<marquee><br>

<b>Date here:</b> Here you can put a few announcements or something you would like of as importance. It's just another place for text.

</marquee><br></font><br>
<div style="border-top: #F3922A 2px solid; width: 390px; text-align: center"></div>

<font class=H>Normal header here</font><br>

<font class=H>Another header here</font><br>

More text here!

<font class=css>Like the CSS?</font><br>
<font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a>
</font>

</div>
<br>
<font class=bottom>css by Elri (electric_gelert567)</font>

</center>

Colors: Lime & Rose; Class: Cute Marquee; ID: CM03

.heart {font-size: 120px; line-height: -2px; font-family: Webdings; color: #eeeeee;text-align:left}

.css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #C9EA11}

.title {font-size: 50pt; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #C9EA11;text-align:right}

.H {font-size: 12pt; line-height: 20px; font-family: Century Gothic; letter-spacing: 3px; color: #F884B3; text-align:right;text-transform:uppercase;font-weight:bold}

.small {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.move {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.bottom {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

a {color:#F884B3;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:bold}
a:hover {color: #cccccc; text-transform:uppercase;}

div.content {background-color: #ffffff;
width: 400px;
text-align:left;
padding: 15px;}

</style>

<font class=title> Title Here</font><br><font class=H>subheader here</font><br>
<font class=small> - - anything you want - - anything you want - - </font><br><br>
<div style="border-top: #C9EA11 2px solid; width: 390px; text-align: center"></div>
<font class=move>
<marquee><br>

<b>Date here:</b> Here you can put a few announcements or something you would like of as importance. It's just another place for text.

</marquee><br></font><br>
<div style="border-top: #C9EA11 2px solid; width: 390px; text-align: center"></div>

<font class=H>Normal header here</font><br>

<font class=H>Another header here</font><br>

More text here!

<font class=css>Like the CSS?</font><br>
<font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a>
</font>

</div>
<br>
<font class=bottom>css by Elri (electric_gelert567)</font>

</center>

Colors: Violet & Periwinkle; Class: Cute Marquee; ID: CM04

.heart {font-size: 120px; line-height: -2px; font-family: Webdings; color: #eeeeee;text-align:left}

.css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #D66DF8}

.title {font-size: 50pt; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #D66DF8;text-align:right}

.H {font-size: 12pt; line-height: 20px; font-family: Century Gothic; letter-spacing: 3px; color: #6C9FF4; text-align:right;text-transform:uppercase;font-weight:bold}

.small {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.move {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

.bottom {font-size: 7pt; line-height: 10px; font-family: Century Gothic; color: #999999; letter-spacing:1px}

a {color:#6C9FF4;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:bold}
a:hover {color: #cccccc; text-transform:uppercase;}

div.content {background-color: #ffffff;
width: 400px;
text-align:left;
padding: 15px;}

</style>

<font class=title> Title Here</font><br><font class=H>subheader here</font><br>
<font class=small> - - anything you want - - anything you want - - </font><br><br>
<div style="border-top: #D66DF8 2px solid; width: 390px; text-align: center"></div>
<font class=move>
<marquee><br>

<b>Date here:</b> Here you can put a few announcements or something you would like of as importance. It's just another place for text.

</marquee><br></font><br>
<div style="border-top: #D66DF8 2px solid; width: 390px; text-align: center"></div>

<font class=H>Normal header here</font><br>

<font class=H>Another header here</font><br>

More text here!

<font class=css>Like the CSS?</font><br>
<font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a>
</font>

</div>
<br>
<font class=bottom>css by Elri (electric_gelert567)</font>

</center>

Class: Cute

Colors: Green & Blue; Class: Cute; ID: C01
<style> body {background-color:#eeeeee} body, .table, .td, .tr, .font, .br, .p {color: #999999; font-family: 'Verdana'; font-size: 7pt; line-height: 15px} b {color: #AAD140} i {color: #777777} u {color: #4ACCAC} .css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #AAD140} .title {font-size: 80px; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #AAD140} .H {font-size: 25px; line-height: 10px; font-family: Century Gothic; letter-spacing: 1px; color: #4ACCAC; text-align:right} .small {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: gray; letter-spacing:1px} .bottom {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: #999999; letter-spacing:1px} a {color:#4ACCAC;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:normal} a:hover {color: #cccccc; text-decoration: line-through;} div.content {background-color: #ffffff; text-align: left; width: 400px; padding: 15px;} </style> <center> <br> <div class="content"> <center> <font class=title>Title Here</font><br><font class=H>subheader here</font><br> <font class=small> - - anything you want - - anything you want - - </font><p> <div style="border-top: #AAD140 3px dashed; width: 370px; text-align: center"></div> <br><br> <font class=H>Normal header here</font><br> You can just have a bunch of text here for whatever purpose you feel like, as long as you keep my credit/link back. To make new paragraphs or space between your text, use the command <b>br</b> in brackets like these:<>. <br><br><br> <font class=H>Another header here</font><br> More text here! <br><br><br> <font class=H>Even another!</font><br> Even more space here. This can go on for as long as you want. <br><br><br> <font class=css>Like the CSS?</font><br> <font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a> </font> </center> </div> <br> <font class=bottom>css by Elri (electric_gelert567)</font> </center>

Colors: Hot Pink & Orange; Class: Cute; ID: C02
<style> body {background-color:#eeeeee} body, .table, .td, .tr, .font, .br, .p {color: #999999; font-family: 'Verdana'; font-size: 7pt; line-height: 15px} b {color: #E35990} i {color: #777777} u {color: #F3922A} .css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #E35990} .title {font-size: 80px; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #E35990} .H {font-size: 25px; line-height: 10px; font-family: Century Gothic; letter-spacing: 1px; color: #F3922A; text-align:right} .small {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: gray; letter-spacing:1px} .bottom {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: #999999; letter-spacing:1px} a {color:#F3922A;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:normal} a:hover {color: #cccccc; text-decoration: line-through;} div.content {background-color: #ffffff; text-align: left; width: 400px; padding: 15px;} </style> <center> <br> <div class="content"> <center> <font class=title>Title Here</font><br><font class=H>subheader here</font><br> <font class=small> - - anything you want - - anything you want - - </font><p> <div style="border-top: #E35990 3px dashed; width: 370px; text-align: center"></div> <br><br> <font class=H>Normal header here</font><br> You can just have a bunch of text here for whatever purpose you feel like, as long as you keep my credit/link back. To make new paragraphs or space between your text, use the command <b>br</b> in brackets like these:<>. <br><br><br> <font class=H>Another header here</font><br> More text here! <br><br><br> <font class=H>Even another!</font><br> Even more space here. This can go on for as long as you want. <br><br><br> <font class=css>Like the CSS?</font><br> <font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a> </font> </center> </div> <br> <font class=bottom>css by Elri (electric_gelert567)</font> </center>

Colors: Lime & Rose; Class: Cute; ID: C03
<style> body {background-color:#eeeeee} body, .table, .td, .tr, .font, .br, .p {color: #999999; font-family: 'Verdana'; font-size: 7pt; line-height: 15px} b {color: #C9EA11} i {color: #777777} u {color: #F884B3} .css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #C9EA11} .title {font-size: 80px; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #C9EA11} .H {font-size: 25px; line-height: 10px; font-family: Century Gothic; letter-spacing: 1px; color: #F884B3; text-align:right} .small {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: gray; letter-spacing:1px} .bottom {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: #999999; letter-spacing:1px} a {color:#F884B3;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:normal} a:hover {color: #cccccc; text-decoration: line-through;} div.content {background-color: #ffffff; text-align: left; width: 400px; padding: 15px;} </style> <center> <br> <div class="content"> <center> <font class=title>Title Here</font><br><font class=H>subheader here</font><br> <font class=small> - - anything you want - - anything you want - - </font><p> <div style="border-top: #C9EA11 3px dashed; width: 370px; text-align: center"></div> <br><br> <font class=H>Normal header here</font><br> You can just have a bunch of text here for whatever purpose you feel like, as long as you keep my credit/link back. To make new paragraphs or space between your text, use the command <b>br</b> in brackets like these:<>. <br><br><br> <font class=H>Another header here</font><br> More text here! <br><br><br> <font class=H>Even another!</font><br> Even more space here. This can go on for as long as you want. <br><br><br> <font class=css>Like the CSS?</font><br> <font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a> </font> </center> </div> <br> <font class=bottom>css by Elri (electric_gelert567)</font> </center>

Colors: Violet & Periwinkle; Class: Cute; ID: C04
<style> body {background-color:#eeeeee} body, .table, .td, .tr, .font, .br, .p {color: #999999; font-family: 'Verdana'; font-size: 7pt; line-height: 15px} b {color: #D66DF8} i {color: #777777} u {color: #6C9FF4} .css {font-size: 30px; line-height: 9px; font-family: Century Gothic; color: #D66DF8} .title {font-size: 80px; line-height: 50px; font-family: Century Gothic; letter-spacing: -4px; color: #D66DF8} .H {font-size: 25px; line-height: 10px; font-family: Century Gothic; letter-spacing: 1px; color: #6C9FF4; text-align:right} .small {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: gray; letter-spacing:1px} .bottom {font-size: 9px; line-height: 9px; font-family: Century Gothic; color: #999999; letter-spacing:1px} a {color:#6C9FF4;font-family: 'Century Gothic'; font-size: 7pt; letter-spacing:0px; line-height: 15px;font-style:normal; font-weight:normal} a:hover {color: #cccccc; text-decoration: line-through;} div.content {background-color: #ffffff; text-align: left; width: 400px; padding: 15px;} </style> <center> <br> <div class="content"> <center> <font class=title>Title Here</font><br><font class=H>subheader here</font><br> <font class=small> - - anything you want - - anything you want - - </font><p> <div style="border-top: #D66DF8 3px dashed; width: 370px; text-align: center"></div> <br><br> <font class=H>Normal header here</font><br> You can just have a bunch of text here for whatever purpose you feel like, as long as you keep my credit/link back. To make new paragraphs or space between your text, use the command <b>br</b> in brackets like these:<>. <br><br><br> <font class=H>Another header here</font><br> More text here! <br><br><br> <font class=H>Even another!</font><br> Even more space here. This can go on for as long as you want. <br><br><br> <font class=css>Like the CSS?</font><br> <font class=small>CSS by Elri [electric_gelert567] For yours, <a href=http://www.neopets.com/~Kaluhei>go here</a> </font> </center> </div> <br> <font class=bottom>css by Elri (electric_gelert567)</font> </center>

Class: Fancy

Colors: Light Gray; Class: Fancy; ID: F01

a.nav:link, a.nav:active, a.nav:visited {
font: 7pt century gothic;
color: #bbbbbb;
text-transform: lowercase;
text-decoration: none;
text-align: center;
background-color: #ececec;
padding: 5 5 5 5;
font-weight:bold;}

a.nav:hover {
color: #b5b5b5;
background-color: #dcdcdc;}

a {font-family: Century Gothic;
font-size: 7pt;
font-weight: bold;
color: #bbbbbb;
letter-spacing: 1px;
text-decoration:none;}

a:hover {text-decoration:underline;
color: #cccccc;}

#content {
width: 100%;
width: 400px !important;
background: #f2f2f2;
padding: 10px;
text-align:left;}

b {
color: #bbbbbb;
font-size: 8pt;}
i {
color: #888888;
font-style: italic;}
u {
color: #bbbbbb;
text-decoration:underline;
text-transform:uppercase;
font-weight:bold;}

h1 {
color: #bbbbbb;
font: 36pt Century Gothic;
text-align: left;
text-transform: lowercase;
letter-spacing: -3px;
line-height: 36px;
border-bottom:3px solid #dddddd;
align:top;}

h2 {
color: #bbbbbb;
font: 12pt Century Gothic;
text-align: right;
text-transform: uppercase;
background-color: #ececec;
border-bottom:3px solid #cccccc;
font-weight: bold;
line-height:1px;
letter-spacing: 3px;
padding: 9px;
padding-right: 0px;
padding-bottom: 10px;}

</style />

<br>

<h2>Header</h2>
Text

<h2>credits</h2>
<center>
<a href="~Kaluhei">CSS by Elri</a> (electric_gelert567)
</center>

</div>

<br>

<a href="http://neopets.com/~Kaluhei" class=nav>Like the CSS?</a><a href=/~BabyAngora class=nav>Learn How</a><a href=http://neopets.com/userlookup.phtml?user=electric_gelert567 class=nav>The Creator</a>

</center>

</center>
<BR><BR><BR>

NO PREVIEW AVAILABLE
Colors: Cucumber Melon; Class: Fancy; ID: F02

#credit {width:400px;}

a.nav:link, a.nav:active, a.nav:visited {font: 7pt century gothic;
color: #b1d646;
text-transform: lowercase;
text-decoration: none;
text-align: center;
background-color: #dbf888;
padding: 5 5 5 5;
font-weight:bold;}

a.nav:hover {color: #9cc81d;
background-color: #cbed68;}

a {font-family: Century Gothic;
font-size: 7pt;
font-weight: bold;
color: #b1d646;
letter-spacing: 1px;
text-decoration:none;}

a:hover {text-decoration:underline;
color: #cbed68;}

#content {width: 100%;
width: 400px !important;
background: #e9fbb7;
padding: 10px;
text-align:left;}

b {color: #b1d646;
font-size: 8pt;}
i {color: #aaaaaa;
font-style: italic;}
u {color: #cbed68;
text-decoration:underline;
text-transform:none;
font-weight:bold;}

h1 {color: #b1d646;
font: 36pt Century Gothic;
text-align: left;
text-transform: lowercase;
letter-spacing: -3px;
line-height: 36px;
border-bottom:3px solid #cbed68;
align:top;}

h2 {color: #b1d646;
font: 12pt Century Gothic;
text-align: right;
text-transform: uppercase;
background-color: #dbf888;
border-bottom:3px solid #b1d646;
font-weight: bold;
line-height:1px;
letter-spacing: 3px;
padding: 9px;
padding-right: 0px;
padding-bottom: 10px;}

</style />

<br>

<h2>Header</h2>
Regular Text. <b>Bold</b> <i>Italic</i> <u>Underline</u>

<h2>Header</h2>
Text

<h2>credits</h2>
<center>
<a href="~Kaluhei">CSS by Elri</a> (electric_gelert567)
</center>

</div>

<br>

<a href=/~Kaluhei class=nav>Like the CSS?</a><a href=/~BabyAngora class=nav>Learn How</a><a href=http://www.neopets.com/userlookup.phtml?user=electric_gelert567 class=nav>The Creator</a>

</div>
</center>

userlookup css

All of the userlookup codes are here due to the large amount of space I am using already.

These do not display correctly in IE.

having trouble?

Need help entering content into the CSS?

Head to my CSS Handbook to learn more tricks of the trade. There are numerous tips and tutorials to help you create your own petpage in no time. Still have an inquiry? Neomail me. I'll be (most likely) happy to help.

affiliate

If you have the desire to be an affiliate, send me a neomail. I am slightly picky, so before you ask make sure your page is neat. (No broken images, old links, typos, etc.)

credits

CSS and Content by Elri (electric_gelert567)

Stealing from this page in any way, shape, or form is against the rules.
Last Updated on 7.23.08

Logique Resources - - CSS Code Reference - - Elri's CSS Handbook - - Apply for Affiliation?