~~~~~Hello! This is my f.a.q.'s (Frequently Asked Questions) page for CSS coding! CSS stands for Cascading Style Sheets. Using this coding, you can add beautiful effects to your webpage, neopets userlookup, neopets guild, xanga, or any other place on the web. This page goes in a question by question form, all categorized according to their topic. I hope you will find that this page works from the basics to the more complicated things, so that you can get in the hang of it before plunging into designing a lookup or webpage. :) ~~~~~Have a CSS related question that you would like to see here? You can Neomail me, or email me @ blonde_valley_girl@hotmail.com~~~If I think it's a good question, and I'm capable of answering it, I'll put it on here. You'll probably notice I try to explain things as thoroughly as possible, so that you can both modify the code to your liking and maybe even learn a little. :) Plus, I've got all the rare, cool codes you know you want. ;)  Backgrounds How do I make my background be just one color? Easy! All you gotta do is use this code, and change the color 'white' to any color you want. Purple, blue, yellow, red, green, etc. There are also things called 'hex codes' that you can use to get a color closer to want you want, rather than the basic colors. How do I add an image background? Firstly, you'll want to make sure that your image is uploaded to a webhost that allows direct linking (Aka, data transfer, bandwidth). Once you know it's location/url, which will look something like this: http://www.yourserver.com/youraccount/yourimage.gif, you can use it as a background on your neopets page or whatever. Take that url (Your pictures location, the http:// thing) and put it into this code: How do I make my background stay in place while text in front of it stays in place? What you're talking about is making it 'fixed'. :) It's a very simple bit of code added to the body{background:} tag. How do I make it so my background appears once, instead of repeating? This is much like the 'fixed' code, in fact you can combine the two. How do I make my background image be centered on my page? Again, this code is very similar to the above two. How do I combine the above 5 codes? Just add 'center' 'fixed' 'no-repeat' one after another in the same tag as your background color and url are. How do I have a background image that repeats only down the lefthand side? This code is taken from the 'Diabolical Rainbow' petpage layout on the main site. The background repeats down and on the left (on y axis on the left). It can be changed to repeat down the right side by replacing the word 'left' with 'right'. Copying this code will give you a black backdrop. Add you own picture, dimesions of 100 by 1 work well. :) Text & Links For funner (also a bit trickier) effects on your links, see the filters section. How do I change ALL of the fonts on my page? Well, there are several things you can change about your font. See my 'Basic HTML' page for further details on the different attributes of fonts. In this code, the all the text on your page, except links, becomes size 8 (css size, pt, not html/font size), the font verdana, and the color Black. You can change those attributes by replacing the text with your own choices. How do I make my links a different color? Well, most people like to have all of their basic links a certain color, sometimes having already visited links a different color, and then make them change when you put your mouse over them. To change just the basic links, when your mouse isn't over them, use this code. The on hover code is in the next question. How do I make my links change when my mouse goes over them? You most probably want to combine this with the code in the question above. In this code, I give the links a different color on hover. How do I make my links not have an underline on them, and, have the line appear on hover? You will want to modify the colors to fit your page, and maybe even change the on hover attributes to not have an underline, too. How do I make my links have a background or background color on hover? Well, if you look at the regular body{background:} codes, you'll notice some similarities. In this code, if you only want a background color, not a background image too, then totally delete the url(LOCATION OF YOUR PIC IN PLACE OF THIS) tag, parenteses and all. :) Cool idea: A commonly used, awesome looking trick is to use an animated image or bg as the background on your links on hover. How do I get a border around my links on hover? Be careful, because this tag can oftentimes throw the layout of your page totally off when someone hovers over a link, and sometimes even makes the link virtually unclickable. Personally, I don't like this effect much. You can change the colors, the thickness (it's in pixels), or replace the word 'solid' with 'dashed' or 'dotted' to make your borders look more interesting. :) Images For fun (but a bit tricky) effects on your images, see the filters section. How do I add an image to my userlookup? Well, if you just want any old image, that's no problem. Firstly, like with everything, you have to make it availible on the net, with bandwidth/data transfer. Then, once you know the location, find out the width and the height by right clicking on it, select 'properties', and there it is. Write it down somewhere, because you'll need to replace my numbers in the code with your own, to match your image. Place the < i class=""> < / i > tag near where you want your image to appear. Also, you can have as many as you want, just repeat the coding and change i.image1 to i.image2 or i.image3 etc. You don't have to name it 'image', you could have like, i.dog and it would still work, just make sure you have the ' i. ' and the < i class="" > < / i> (which goes after the < / style> tag.) :) How do I make my own banner appear over the regular neopets banner on my lookup/guild? Firstly, you've got to make a banner, of course (or get one from my site, Fairy-dust.com. If you get them from there, they're already coded for you. :D ). Make sure it's on bandwidth too. You'll want to know the dimensions of your banner, too. For this code, you'll have to fill in your own width and height, and depending on the size of your banner, you'll need to work with the Position:absolute;top:#;left:#; tag, by changing the top and left values to what you need. If you work with it long enough through trial and error, you can get it pixel perfect. :) How do I get my own sidebar over the regular neopets one? Hm, well, after much tinkering with this code, I think I got it down so that you won't have to worry about a fade effect on your other images on the page. :) You will want to add a banner to it- visit fairy-dust.com or make one of your own, whichever you perfer. Filters How do I make the images on the Neopets page, such as sidebar, banner, top image, etc dissapear? This will take away the images named above, but if you want all the images to dissapear, add a img{display:none} tag to your css. How do I make my information, where my pets names and sheilds are, be in a faded box? You can change the attributes of this by adding your own background color, border, etc... To make it more transparent, decrease the number in this tag: filter:alpha(opacity=70). To make it less transparent, increase the number. This particular code will give you a white box with a light blue border around your info. How do I make my links flip upside down onhover? This code is blue verdana text, you can change it to whatever you like. Misc. Changes How do I change the colors of the scrollbars on my page? This will change all of the scrollbars for your page, div layers, textareas, etc... You can, however, change it so each of those things has their own colors. Change the colors in this code to whatever you wish. How do I have the cursor be an image? Well, you need to make sure the image is uploaded to the web, and you know the url, and it has to be in either a .ani or .cur format for this code to work. There are some other things you can have your cursor be, instead of the normal arrow. For the standard cursors, change the word 'crosshair' to any of the following: hand, crosshair, text, wait, move, and resize. Image Cursor: Standard Cursors: How do I make the bullets on my guild/webpage be a different image? Make sure the bullet is uploaded to the internet. Put the CSS code on your page, and then to use the bullets, use the HTML code. CSS Code: HTML Code: Misc. Color Changes How can I change the color and appearances of the horizontal rules of my page? This code is great for neopets lookups, since there's a default horizontal rule put into each profile twice. As you may know, How do I put codes on the page in boxes? This really isn't a css question, but a lot of people want to know how, and ask using the CSS FAQ, so I'll answer it here. This code is great for posting urls and codes of your images so other people can use them. How can I change the colors and appearance of all the text boxes on my page? There's a lot of things you can do to textareas when using css. You can add borders, change scrollbar colors, add backgrounds, change background colors, fonts, etc. The code in the textarea below will make textareas have a border, changed bg color, and changed font. How do I make all of the images on my page appear dark and blue-ish? You probably want to apply an invert filter on your images. Using this code will make all of your images blue/black/white colored, no matter what color they started off as. No, it will not permanently change those image files to be that color. The first code given is for the blue effect, the second code given gives everything a glowing greyscale kind of look, called the xray filter. CSS Standards Always Now, I actually don't use CSS the way someone is supposed to. Because of that, my pages might not work in other browsers. So that's not the kind of standards I'm talking about here. :P These are a few things I always try to keep to when using CSS in my designs:
|
Navigation Backgrounds Text and Links Images Filters Misc Changes Misc Color Changes CSS StandardsLink Back? 
Main Site:  Other Help Sites:    |