Disclaimer: Page best viewed in Firfox. Scrolling "back to top" button does
not work in Internet Explorer.
Note: This page is long because I've tried to get as in-depth as possible so anyone can learn to customize whatever they want. I'm assuming that you already have a good understanding of HTML and how to create tables, divs, add images and format text. If not, you need to check out a basic HTML tutorial before reading this.
I've place a link button in the bottom right corner that will bring you back to the top of the page, as well has navigation links to the left to jump to a particular section in the tutorial.
Basic CSS
To start, we must understand that all CSS is formatted as follows:
Element {Property:Value;}
Element is the part of the page we want to change.
{ opens the element's defining attributes.
Property is the type of change we want to do.
: seperates the property and value.
Value is the exact change we are making.
; seperates each property/value group.
} closes the line.
CSS coding goes at the TOP of the rest of your coding, between the style tags.
<style>
CSS codes here
</style>
<body>
HTML coding goes here
Defining Colors on a page
1. This sets the background color of the main part of your page. To define the color, you can use hex codes (a six-digit number which must start with a #) or a color name, such as black.
2. This sets the color of the text on the page.
3. This sets the basic font on the page. If you don't do this, viewers will see your page in their default font (typically Times New Roman). The "10pt" part of the value is the size of the font. The "Tahoma" is the font face, (the type of font you want to use). Try to choose a font that is widely used on all types of computers. Verdana is a good basic choice.
(The text on this page is 10pt Tahoma)
Using an image for your background
1. This tells the page that you want to use an image that is stored on the internet.
2. This is where you'll put the web address of the image.
What you can do with a background image
1. Only use this if you want your background image to not move while the rest of your page scrolls over it. Default is the background image will scroll with the rest of your page.
Options:
fixed or
scroll
2. This will define how you want the image repeated on your page.
repeat will tile the image horizontally and vertically over the entire page.
no-repeat means the it will show one image and won't repeat at all.
repeat-y will repeat the image vertically (up and down) on your page.
repeat-x will repeat the image horizontally (across) on your page.
3. This will place the image in a certain area on your page. Default is top left corner.
Define the vertical position first, and then the horizontal position.
Vertical options: top, center, bottom
Horizontal options: left, center, right
If you only specify one keyword, the second value will be "center".
You can also use x% and y%.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
Another option is xpos and ypos.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.
Combining all these elements into one tag
You can combine the background property values into a shorter version to save character space.
background is the shorthand property for setting all background properties in one declaration. Place the values in order as shown.
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Special Text Effects
You can change values for different types of text as you want them.
Links
1. These are the regular links and visited links on the page.
2. These are links that are on hover. When someone places their mouse over a link, the text will change to what's defined here.
Active is a link that is currently clicked.
3. Color of your links.
4. A decoration that will show on links. Default is underline.
Options for text-decoration:
underline is the default, will have a line under the text.
none will have no decoration, will look like normal text other than a color change (if defined).
overline will have a line above the text.
line-through will have a line through the middle of the text. Similar to
strikethrough.
Headers
Sometimes you'll see headers that are more than just larger text. (Such as the ones on this page).
There are 6 different default headers, ranging from H1 through H6, with 1 being the largest.
I have 3 different header types on my page. H1 is being used for the headers like the one at the top that says Basic CSS.
H2 is for the different section headers such as the one above that says Headers. H3 is being used for the smaller headers to the left like the one that says Handy Links.
While I'm typing my page, all I have to do is type a simple H2 tag and it automatically renders the color changes, font, size and everything you see.
It's easy to do this by creating a new line in your CSS.
1. This tells which header size you are defining.
2. The color of the words in your header.
3. The background color of the header. (will form a box around your text)
4. Changes the font used in the header. When two sizes are used like this, the first size will be the height of your letters, and the second will be the height of the
line those letters occupy. This can be used to make the background "box" larger or shorter than the text. The name here will change the font used for your header.
There are other things you can do with headers. Just experiment. I used a width and border with my headers.
Customize extra things
Now we'll get into the extra things you can do that I haven't fully covered yet so far.
Adding Borders
You can add borders to images, headers, text, tables, divs, pretty much anything you want.
Just try not to over do it.
1. This specifies the border.
Options:
border affects all four sides of the object.
border-top affects the top border.
border-right affects the right side border.
border-left affects the left side border.
border-bottomaffects the bottom border.
2. This is the size of the border. (How thick it will appear)
3. This is the style of the border.
Options:
none shows no border.
hidden hides the border. (if width is specified, the width will be there, but will be invisible in color)
dotted makes a dotted border.
dashed makes a dashed border.
solid makes a solid line border.
double makes a double lined border.
groove makes a grooved border. (border looks carved into page)
ridge makes a ridged border. (border looks raised above page)
inset makes an inset border. (object in border looks "sunk" into page)
outset makes an outset border. (object in border looks "raised" above page)
4. The color of the border. You can use hex codes, or a color name.
Setting Width and Height
1. Setting a width of an object.
Options:
auto is the default. The browser calculates the actual width.
% defines the width in % of the parent element's width. (whatever "container" the object is in)
length defines the length in px, em, etc. Most commonly used is px, as in the example above.
2. Sets the height of an object.
Options are the same as width.
Class Vs. ID
A basic rule of thumb:
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
Okay, so what
is a "class" and "id"?
Here's the quick explanation. They are ways to define an area within your style tags, referenced by the individual object within the page. Having these definitions in your style tags instead of in the actual object, makes it easier to find for quick editing. Also, if you are using it more than once (as in the case of my headers), if you wanted to change something about the header's appearance, I would only have to change one line of my coding, instead of every header in the page coding.
How to use them. I gave a brief example of making a line to define the headers. Now we are getting into defining ONLY the parts we
want to define with these changes.
That's where the class and id's came into play.
1. the # signifies an id.
2. the . signifies a class.
To reference these selectors, we use regular HTML.
3. The name of these selectors can be whatever you want. Stick with something easy to remember and type.
1. This is the object we are using to define with the selectors we've created.
2. This tells the object where to find it's special formatting. "class"(#) or "id"(.)
3. This is the specific formatting we want to use.
4. This is the area that will be affected by the formatting.
5. Don't forget to close the area or your special formatting will continue through the rest of the page or mess up your coding.
Positioning objects on page
Using "position" you can move objects around on your page. This comes in handy for editing your userlookup.
1.
How to position the object.
Options:
static is the default. It moves normally within the page.
relative moves the element relative to it's normal position.
absolute moves the element at the specified coordinates relative to it's containing block. If the container's position isn't specified, it will use the window itself.
fixed keeps the element at the specified coordinates regardless of scrolling.
2. This specifies how far from the top you want to move.
3. This specifies how far from the left you want to move.
Something to note about positioned items. You may need to "move" the object "up" in a stack so it can be seen, or even "down" the stack to hide it.
You do this with the z-index.
z-index:1 a larger number raises it further in the "stack".
z-index:-1 a negative number will lower it.
Z-index:auto is the default. The stack order is equal to its parents.
User Lookup Specific
I'm going to assume that you already know the basics of how to edit your User Lookup. If you don't, then check out one of the tutorials in my "Handy Links" section. I'm going to try to show you how to do things that other tutorials don't.
First off, let's find out how to edit each area of your stats.
#userinfo is the box that contains your name, shield, and quick links to neomail, trades, etc.
#usercollections is the box that contains your albums, BD stats, secret avatars, etc.
#userneopets is the box that shows off your pets.
#usershop is the box that displays your shop and gallery. (if you have one)
#userneohome is the box that displays information about your neohome. (if you have one)
#usertrophies is the box that displays all the trophies you've won playing games and participating in events, etc.
Each of these boxes have a few different areas that you can modify.
.contentModuleHeader refers to the Headers of your stat boxes.
.contentModuleHeaderalt refers to the Header of your info stat box.
.contentModuleContent refers to the main portion of your stat boxes.
.contentModuleTable refers to all of the stat box.
For the main area of your lookup, there are a few other things you need to know.
#main refers to the very bottom background area of your lookup.
#content refers to the main table of the page that holds all the information you see.
Now that you know what these areas are called, you can reference each of them in your own style tags to format or position them wherever you want.
Take a look at my own userlookup to see how much you can do with this knowledge. Feel free to "view source" of the page to see what I've done.
I just ask that you don't copy any of my coding and use it for yourself without giving me credit. I've spent a lot of time researching and learning how to code and work with these elements.
I hope you've learned something, and if you still have questions on how to do something, just drop me a neomail and I'll see if I can help you. If I get enough questions, I'll begin a FAQ for this page.
