The CSS Express

account | central | explore | games | boards | shops | news | video | nc mall

Drag the image up to the address bar for a better view! Note: all CSS has been tested and works correctly in Internet Explorer, but I do NOT know if it works in Firefox. If you find a problem with the coding, feel free to send me a message!

Also, there are more petpages here!

Navigation

Home
Sitely
More CSS
Exit

Style One

Style One was the first CSS I've ever done...obviously. It has one column, and a seperate column for navigation.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #9D70BF; } #RIGHT, #LEFT { } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #4A2A63; } #LEFT { left: 100px; width: 700px; height: auto; background: #E2D7FF; } #RIGHT { left: 815px; width: 200px; height: auto; background: #E2D7FF; } #TOP { top: 10px; left: 400px; width: 450px; background: #E2D7FF; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #E2D7FF; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #4D3A8C; letter-spacing: 3px; padding: 2px; border: 1px solid #76529A; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~zuicie">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #C3EBC7; } #RIGHT, #LEFT { } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #325E36; } #LEFT { left: 100px; width: 700px; height: auto; background: #FFFFFF; } #RIGHT { left: 815px; width: 200px; height: auto; background: #FFFFFF; } #TOP { top: 10px; left: 400px; width: 450px; background: #FFFFFF; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #FFFFFF; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #BCE4E3; letter-spacing: 3px; padding: 2px; border: 1px solid #325E36; } a:link, a, .pa, a:visited, a:active { color: #2F2A6D; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~zuicie">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #4D3D1D; } #RIGHT, #LEFT { } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #1C160A; } #LEFT { left: 100px; width: 700px; height: auto; background: #9FA483; } #RIGHT { left: 815px; width: 200px; height: auto; background: #9FA483; } #TOP { top: 10px; left: 400px; width: 450px; background: #9FA483; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #9FA483; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #5B6624; letter-spacing: 3px; padding: 2px; border: 1px solid #1C160A; } a:link, a, .pa, a:visited, a:active { color: #16433D; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~zuicie">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #BC5252; } #RIGHT, #LEFT { } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #410C0C; } #LEFT { left: 100px; width: 700px; height: auto; background: #EBEAD1; } #RIGHT { left: 815px; width: 200px; height: auto; background: #EBEAD1; } #TOP { top: 10px; left: 400px; width: 450px; background: #EBEAD1; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #EBEAD1; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #81667E; letter-spacing: 3px; padding: 2px; border: 1px solid #EBEAD1; } a:link, a, .pa, a:visited, a:active { color: #4E0830; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~zuicie">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

Style Two

Style two has one column and a scrollbar, and it's perfect for a blog. Change the background to any one you want, or keep the current one.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } body { background: #15375A url("http://i579.-blocked--blocked-photobucket.com/albums/ss238/SherFam/lightyellowtilebackground.jpg"); } #CENTER { } #CENTER, #TOP { top: 100px; margin: 6px; padding: 6px; border: 3px solid #669799; } #CENTER { left: 345px; width: 475px; height: 250px; background: #EAFEED; } #TOP { top: 8px; left: 345px; width: 475px; background: #EAFEED; } scrollbar-face-color #0E243Ascrollbar-track-color #98BFE7scrollbar-highlight-color #98BFE7scrollbar-shadow-color #0E243Ascrollbar-3dlight-color #ffffffscrollbar-darkshadow-color #000000scrollbar-arrow-color #98BFE7 h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #EAFEED; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #3C3C82; letter-spacing: 3px; padding: 2px; border: 1px solid #AB8055; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .sf, .td { } </style> <div id="top"> <h1><center><a name="top"><font color="#000000">Page Title</font></a></center></h1> </div> <div id="center"> <div style="width: 455; height: 350px; overflow: auto; background-color: #EAFEED; border: -blocked- 2px solid #669799;" align="center"> <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>Credits</h2> Petpage made by <a href="http://www.neopets.com/~zuicie">Mackenzie</a>. </div> </div>

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions