Welcome to css {for:you;} a freshly made guide to coding and design. It goes through all the basic codes you will need to make your own unique and personal neopets lookup.
User: kiillerkarma 
Things to Know
1. Indented Structure
Your HTML is likely to have a lot of parts: divs, headings, paragraphs, lists. Each of these parts has an opening and closing tag.Although indenting will not affect how the page loads, it will make the code a lot easier to read.
So: Indent one tab when you start a new element that is a child element of the tag above it. Then move back in a tab when you close that element.
This will allow you to see very clearly what content is being affected by a parent element, and also make sure you have closed all your tags.
- Alphabetized
- Tabbed attributes
- Consistent spaces and breaks
2. Structure
This isn't content structure, but a way to organize your CSS so that you can read it easily and find the elements you want to change later.Use comments to create sections in your CSS. There is no one right way to do this, some people just separate the reset from custom code, others create sections based on the divs in their HTML, others alphabetize. The idea is to make is easy for you and others to read the file.
Some designers recommend separating your layout styles from other styles. This is called "Future Proofing," which means that as CSS evolves, you'll be able to change the key elements - the layout, fairly easily.
Also, use white space to make your files legible. It does add a little weight to your file, but not enough to make it worth sacrificing readability.
3. Comments
Aside from using comments to give your CSS file structure, use them to explain what you're doing with your CSS code.You can also use comments to remind yourself when elements are being affected by parent elements.
Using designer comments helps you remember what is doing what and will cut back the time it takes you to code/fix/edit your layout.
4. Miscellaneous
As with your HTML, validate your CSS. There are online validaters that will point out any incorrect text within your coding. Using these validaters will help you become more fluent in HTML/CSS. A little unnecessary for someone who just codes every once in awhile, but for anyone interested in making web design a passion of there's correct coding is a must and a good skill to have.These are just a few ways that you can keep your CSS legible by both humans and browsers. Clean code means fewer bugs, easier editing and faster page loads. Of course, nothing can beat a formal education in HTML, CSS and web standards.
The Basics
Action |
Start Code |
End Code |
Example |
Code Shown |
Link | Css For You | Bold | Css for you. | Strike |
|
Italicized | Css for you. | Underline | Css for you. | Center text |
|
Left text |
Css for you. |
Right text |
Css for you. |
Marquee(scroll) | Break |
Css for you from me |
Paragraph |
First paragraph Second paragraph |
Advanced - Font Size, Color & Face
Font size 1Font size 2
Font size 3
Font size 4
Font size 5
Font size |
Css for you |
Change the "3" to the font size you want. The higher the number the bigger the text. "1" is the smallest font size using this method of changing font size. Remember to choose a font size that is not too small for people to read.
Css For You
Css For You
Css For You
Css For You
Font color |
Css for you |
To change the color of text replace the "#35c0e2", known as a hex code, with the hex code of your color. A hex code is just a line of number/letters that form the action of a color. Ex. #35c0e2 is a light blue. Some colors can be used by simply just typing there name in. Such as "red". Always make sure the color is light/dark enough for people can actually read it without straining there eyes.
Css For You.
Css For You.
Css For You.
Css For You.
Font face |
Css for you |
To change to a different font face, replace "Georgia" with the font face of your choice. Three of the most common used font faces are Georgia, arial, and century gothic. If a person does not have a certain font downloaded on there computer then they will not see it. So when choosing a font face try and choose default fonts. Also keep in mind weather the font is legible or not.
Css For You
Css For You
Css For You
Mix & match |
Css for you |
You can mix and match font sizes, colors and faces as you please. Just add the action after the word "font". Do not forget to use quote marks and equals. Also remember before every hex code you have a "#.
Advanced - Style Tags
From here on out some codes may need to be placed in "style tags". The style tag is used to define style information. In the style element you specify how HTML elements should render in a browser.Remember to match the tags. For every opening style there must be a closing. Typically you will only have one set of style tags.
Advanced - Uploading, Linking & Adding Borders to Photos
Uploading
1. Go to a hosting site such as tinypic, phototbucket, or image shack. (I personally use tinypic)2. Click the "Browse" button
3. Click on the image you want to up lode
4. 4 codes will show up copy the "direct Link for Layouts" (4th one down if you are using tinypic)
5. Paste the copied code in between the quotation marks in the code below.
6. Paste on profile and your done.
EX.
Linking
To link and image copy and paste the URL of where you want the page to link to and past it where it says URL HERE in the code below. Remember to replace my direct link with the direct link to your image.EX.
Adding a Border
To add a border you need to add border="#. Replace the # with how thick you want the border. 1 being the thinnest.EX.
Changing opacity
This will make all the images either 1) On hover turn transparent or 2) Be already transparent and turn solid when hovered.Transparent on Hover
Solid on Hover
Advanced - Mouse
To change the way your mouse you have to make (or find) the image you want to replace your mouse with.This code goes in style tags.
Action |
Start Code |
End Code |
Example |
Code Shown |
Mouse one |
 |
Mouse Two |
 |
Put the URL of the image you want between the parentheses.
Advanced - Link Decorating
That is the code for a normal link. Change URL HERE to the url of the page you want to link too and change the "link name" to what ever you want the link to be called.
EX. Neopets.com
The link will style however you have it styled in the style tags. If you do not have anything in the tags it will become the default blue link.
Different link style examples:
- color:96e24b
- font-family: arial
- font-size:9pt
- letter-spacing: 0px
- font-weight: normal
- text-transform: uppercase
- background-color: transparent
font-weight: Font weight tells whether or not the link will be italicized, bolded, or underlined. By putting "normal" the link will have none of those traits.
text-transform: This is to tell weather you want the links to be all "uppercase" or all "lowercase" if you simply just want normal text you can wither delete it or put "none".
padding: Padding has 5 different styles:
- padding-left:
- padding-right:
- padding-top:
- padding-bottom:
- padding:
margin: Margin will make a indent with the whole link. Background and everything. Like padding margin has the same 5 styles.
display: block display: block will make it so that your links sit on top of each other (ie. like blocks)
The best way to get used to and learn link styles is to just endearment. Change codes see what happens when you change an attribute or add one.
To style a link you plan to use multiple times you would put this in your style tags:
link
Hover
and post this code where you need the link to show up:
For something more specific like a navigation you would place this in between style tags:
link
Hover
See the "nav" at the beginning? you can change that to whatever you like as long as you stay consistent. So if you change "nav" to "link1" then you would have to change nav on the hover code and to the link.
This is the link you would use with the code above:
Advanced - List
| Bulletin |
|
| Number |
|
Advanced - page anchors
The navigation system links on this page are all page anchors. Anchors are links within one page, transferring you to a particular place in that page. You click on the title of the chapter at the top of the page, and you immediately go to that chapter without having to scroll down the page. This can be very handy in long petpages for example.Anchors are also links, so the coding for those is very familiar to the coding of a link.
Where you want the link to the particular place on the page to be (in our case, the navigation system), you put the following:
You also need to put a html code at the place the link directs to. This code should have the same codeword as the link has, that way they are connected. Where you want the link to direct to you put the following code:
You can replace 'CODEWORD' with anything you like, as long as the codeword in the link is he same as the codeword in the code at the place the link directs to. If your codeword isn't the same your link will not work.
Advanced - Background
All these codes go between style tags.If you want to make your background fixed, no repeat, and in the bottom right hand corner then you would take the background code you are adjusting, in our case we will adjust body {background:url(URL);}, and you add background-attachment:fixed; , background-repeat:no-repeat; , and background-position: bottom right; to the code so it now looks like this:
body {background:url(URL);background-attachment:fixed; background-repeat:no-repeat;background-position: bottom right;}
You can do things like this to any code that involves backgrounds. Here are some other things you can change:
Code |
Example | Values | Explanation |
| background-attachment: VALUE; | background-attachment: fixed; | scroll, fixed | Makes your bg fixed so that info scrolls over it, or makes it so it scrolls with your page |
| background-position: VALUE; | background-position: top center; |
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right |
Sets the position of your bg |
| background-repeat: VALUE; | background-repeat: no-repeat; |
repeat, repeat-x, repeat-y, no-repeat |
Changes how your background repeats |
| background-image: VALUE; | background-color: pink; | Any color, be sure to add the # in front of the hexcodes if you use them, so like #FFFFFF instead of just FFFFFF | Changes the background color |
Advanced - Scrollbars
All these codes go between style tags.Just place your hex color codes to coordinate with how you want it the scrollbar to look. Remember that scrollbar customizations only apply in Internet Explorer.
BODY{
scrollbar-face-color: #2DBEE8;
scrollbar-shadow-color: #2DBEE8;
scrollbar-highlight-color: #2DBEE8;
scrollbar-3dlight-color: #2DBEE8;
scrollbar-darkshadow-color: #2DBEE8;
scrollbar-track-color: #2DBEE8;
scrollbar-arrow-color: #1C1C1C
}
Code
Overflow Options
These attributes will tell weather or not the scroll box will actually scroll or not.visible
Default Content is not clipped and scroll bars are not added.scroll
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.hidden
Content that exceeds the dimensions of the object is not shown.auto
Content is clipped and scrolling is added only when necessary. So your code would look like this:overflow: auto;
You would put it with the other commands for that DIV. For example:
#aboutme {
background-color:transparent;
width: 470px;
position:absolute;
margin-top:350px;
margin-left:-330;
text-align:justify;
font-size: 8pt;
overflow: auto;}
Advanced - DIV Boxes
There are two different ways you can create a DIV box. As of now (Oct. 11, 2009) the word position is not being allowed. So we can no longer use Cascading Style Sheets for now, but we can use Inline Styles to get the word position past the filter so that are lookup will be functual. We will talk about Inline Style Tags first.Inline Style Tags
Inline styles are where, instead of putting your specifications in the style sheet, you put them in the body.
You don't have to move any of the allowed style words you have for "aboutme in your style sheet. They can stay right where they are, since you still have id="mybox" in there.
Cascading Style Sheets
Cascading Style Sheets are what is most commonly used in coding anything. They are more organized and easier to edit and read, but thanks to TNT new filter at this time we can not use them. But just incase we can use them again one day I will explain how they work.
See how the "postion:absolute;" is in the style tags instead of in the DIV tag? That's really the only difference. If you code layouts or websites for another site other than neopets it is better to use this method instead of the above one.
Changing the look
To change the look and position of a DIV you do very similar codes to how you link decorate. Here is an example of what it might look like:#aboutme {
background-color:transparent;
width: 470px;
height: 500px;
top:350px;
text-align:justify;
font-size: 8pt;
overflow: auto;
}
Many people would rather the DIV not scroll. To do this set the overflow to auto (overflow: auto;) and the height to autopx (height: autopx;)
remember that the "aboutme" can be changed to whatever you would like the DIV to be called. They have to match up though. EX:
#goals {
background-color:transparent;
width: 470px;
height: 500px;
top:350px;
text-align:justify;
font-size: 8pt;
overflow: auto;
}
div id="goals"
text text text
/div
Advanced - Image Resizing
Sometimes your images just wont fit where you want them to. Be it a scrollbox or a div, it's a hassle to resize the image in an image program right? Well here's a simple code that will do it for you:replace "http://i35.tinypic.com/eam43a.png" with your own image url
It's perfect because it will make this large picture:
Icon size!
You can change the dimensions in the code to get the picture just the way you need it.
Advanced - Wrap Around Text
Wrap around text can be useful when you have just a little image you want to put up, but don't want to break your body of text up. This trick is great for stories, about me's, and any other instance where you have a large body of text. Example:
So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye. So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye.
So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye. So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye.
Left:
Right:
Replace my Willy Wonka icon with your image URL
Neopets - Hide Codes
All these codes go between style tags.
Remove the header sectionThis will remove the top header part. Remember if you do this you must provide some form of navigation somewhere else on your page. |
Get rid of the inner neo section, only have the outerAdd in your bg url where it says URLHERE, change the color after color: to the color you want your bg to be while it waits to load your image bg. Or add no BG image at all. This will give you just one constant background, now "inner" or "outer" |
Remove the footer sectionThis will remove the footer section. |
Get rid of section background and borderThis will get rid of the white inner background and the black border it has. |
Blank user lookup.This will remove your header, footer, and the main area stuff, and only leave your neo info on the page. |
Remove the horizontal scrollbarThis removes the horizontal rules that neo automatically has in some places in your lookup and your gallery. |
Remove the banners.This will remove the top and bottom banners that you have in your shop, gallery, guild, etc. |
Remove shop.This will hide your shop on your lookup. |
Remove pet imagesThis will remove your pet's image from your lookup |
Remove User CollectionsThis will remove your "User Collections" section |
Remove User InfoThis will remove your "User Info" section |
Remove trophies.This will remove your trophies from your lookup |
Neopets - Lookup Sections
All these codes go between style tags.
Change color of headersThis will change the color of headers that are on your lookup sections.Change where it says COLOR to change the background color and then the text color of the header. |
Change color of the table bordersThis will change the color of table border that is around the lookup sections.Change where it says COLOR to change color, you can also change the border width and type.. |
Change color of the outer gray table border.This will change the color of table border that is around the lookup sections.Change where it says COLOR to change color, you can also change the border width and type. |
Put a background in the lookup sections.This will put in a bg for each of the lookup sections.Put in the URL of the background you want to add, where it says URLHERE. |
Change color of the lookup sections background.This will put in a bg for each of the lookup sections.Put in the color you want the background to be where it says COLOR. |
Neopets - Fonts/Links
All these codes go between style tags.
Change the main body fontThis code will change the color of your whole pages font. |
|
Change your link colorsThis will change the color of all the links on the page. |
|
Change the color of the bolded fontsThis will change the color of all the bolded fonts on your page. |
|
Change the color of the bolded linksThis will change the color of the things that are both bolded and links, but leave the things that are only links the color you have your links set at. |
|
Change the color of the text in the footerThis will change the color of all the text in the footer. Like the Copyright info and the search bar/language select text. |
|
Change the color of your NeoclockThis will change the color of your neoclock text. |
|
Change the color of the top user stats textThis will change the color of the top user stats text, like Welcome, np, etc. |
|
Change the color of links when you hoverThis will change the color of when you hover over your links. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :hover after the "a", of whatever special area you want to make have a different hover color. |
|
Change the color of links that have been visitedThis will change the color of links that have been visited. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :visited after the "a", of whatever special area you want to make have a different visited color. |
Other things you can adjust
There are lots of other things you can add into the base codes to adjust certain things in the codes.For example, if you want to change the font-size of your links and make them bold, then after the #main a {color:COLOR;}, you would add in the code font-size:14pt; and font-weight:bold;, so your code would now look like: #main a {color:COLOR; font-size:14pt; font-weight:bold;}
You can do this to any of the above font/link codes.
Neopets - Graphics/Images
All these codes go between style tags.
Put in your own headerThis code will let you put in your own header image for the neo header background.You need to put in your url where is says URL. Then you need to change the ## after height to the height of your header. |
Put in your own footerThis code will let you put in your own footer image for the neo footer background.You need to put in your url where is says URL. Then you need to change the ## after height to the height of your footer. |
Add your own ShieldThis will put a shield in the general area of where your shield goes.You need to put in your url where is says URL. ** The image size is 100px width and 150px height** |
Resize Pet ImagesThis will change the size of the images of your pets on your lookup.The width is how long it will be and the height is how tall it will be. |
Neopets - Editing Content Modules
All these codes go between style tags.This will show you how you would edit size, background color, text color, etc. of the content modules on your lookup.
Here's an example. Lets say I wanted a smaller user collections (module that contains avatar, stamp, site theme count):
#usertrophies{ width:250px; height:autopx}
That is what it would look like. The "height:autopx" indicates that there will be no set height, but the module will only be 250px wide. You change the "250" to your desired module width.
All Module Names
#userneopets#usertrophies
#usercollections
#usershop
#userinfo td.medText
Now if you wanted to hide any of these modules you would simply put {display:none;} after it.
