Welcome!
Welcome to Siddey's CSS Help! This is a guide created by me for you, to teach CSS. I find knowing CSS very helpful. Some of the most intricate and dazzling layouts on Neopets are made using only CSS and HTML. There is no need for any fancy program and you don't need to buy anything! All you have to do is be patient and learn. Believe me; I'm learning new tricks every day!Updates
Guess what? As of yesterday, I have been playing neopets for five whole years! YAY!
I added a couple of sections and two new animated buttons!
I added a lot of new sections today and took out the templates. I may re-add them, I might not. I have lots of stuff left to add, so remember to bookmark/favorite this page and tell all your friends about so I can be famous!
Special Notes
Before you begin the guide please read this!When I teach you coding, an x by itself means you can replace the x with a value of your choice. The possible values will be listed, so don't worry.
1. You do NOT have to credit me if you use my guide, but I appreciate it!
2. Do not steal this! I spent hours of my time making this a great guide.
3. Please send me feedback, hatemail and fanmail. I read it all!
4. Feel free to request a section about what's troubling you with coding!
In the guide, anything in a box with a yellow outline goes inside style tags.
A Quick Intro
Before we jump into my guide, you need to know what in Neopia you are doing. HTML and CSS go hand-in-hand when styling petpages, guilds, shops, you name it. Without the HTML, the CSS doesn't work. Without the CSS, the HTML isn't beautiful. They are partners and they work together. Not apart. TOGETHER! Now that you know that, on to the rest of my uber-awesome guide! ^^About HTML
Out of HTML and CSS, HTML is the easier one to understand. It is very, very basic and is useful when you are just beginning to learn web coding.
In HTML there is a opening tag and a closing tag. The first tag is the opening tag and the second is the closing tag. Those tags tell the text between them what to do. There are a bunch of tags for HTML but CSS will style your HTML tags so it's vital you are familiar with both.
Opening and closing tags work like a mirror image. So, if you wanted to make a marquee and then make it bold, it would look like the example below.
If your coding does not look like a 'mirror' it will not work!
HTML- HyperText Mark-Up Language
About CSS
CSS, or Cascading Style Sheets, is what styles the webpage. It can move things around, change the colors of things, make borders, remove images, place images and a million of other things. CSS goes into two style tags where you can customize everything. There are three main parts to CSS: the selector, the property and the value. Which looks like this:
selector {
property: value;
}
When using CSS, the background and the properties about the overall page text, go into the body. The code for that is below:
body {
background: x;
color: x;
font: x;
}
If you intend to decorate your page with CSS, the style tags can be found below.The style tags below will not work in shops, galleries or any other place offsite. For those tags, please consult the F.A.Q.
Text
Text is normally what fills up your page and it's fairly easy to understand.The text properties below can be used to spice up links, bolds, italics, underlines, strikes, headers, navigation bars and, of course, just the regular page text. Adding too many text properties will make your page look messy and amateurish. Stick to what is necessary and looks nice.
Below are all the possible ways to design your text.
body {
font: x;
color: x;
text-align: x;
letter-spacing: x;
text-decoration: x;
text-transform: x;
}
Now, this all looks new to you, right?
The "font: x;" let's you change the font style on the page. Some common ones are tahoma, georgia and verdana. The second line, "color: x;", is used to change the color of your font! Just make sure it isn't too hard to see. "text-align: x;" tells your page where to align the text. You can align to the left, center or right.
The next three properties I only suggest using on headers, BIUS, links and navigation bars. If you use them for the regular page text, it could end up looking messy.
Okay so, "letter-spacing: x;" puts a pixel amount of spaces in between each letter. Just don't make it too big. You can also go in negative numbers.
The fifth line is "text-decoration: x;". This will add an underline, overline or line-through (strike) effect to your text. You can also use 'underline overline', which will put a line under and over your text.
Last, but not least, is "text-transform: x;". This will make your text lowercase, uppercase or have it capitalize.
That wasn't to hard, was it?
Back to Top?
Bold, Italic, Underline, Strike
Most of the time I use bold, italic and underline to emphasize something. I use strike to cross something off a to-do list or goals. Those are the only times you should use bold, italic, underline and strike or, it can become a very annoying array of colors. To customize BIUS, you need to use CSS. This goes between your style tags.
b {
color: x;
font-weight: bold;
}
i {
color: x;
font-style: italic;
}
u {
color: x;
text-decoration: underline;
}
strike {
color: x;
text-decoration: line-through;
}
If you know text properties, BIUS is really easy to understand. Most users like to change the colors of each selector, but it's up to you. You can also change the font and add borders! NOTE! The last line of coding in each selector is important! It makes sure that the "b" is bold text, the "i" is italic text, so on, and so forth. Don't change it!
Backgrounds
Backgrounds can make or break a page. As long as you keep them pretty and professional looking, it can look awesome!
body { background: colorx url('url herex') repeatx;
attachment: x; background-position:x; }
Your first impression of that was "Siddey's insane! This is not basic!" right? Well, it is basic! Let me explain, there are many background codes but, you can merge them all together into one big happy background code family!
Anyways, where it says "colorx" you can add your own color! That was pretty obvious right? Now it gets a little trickier.
The second part, "url ('url herex'), is for image backgrounds. You put the url of the image here. To get the image url, right click on the picture and from the choices, choose 'view image'.
The next part has to with an image background. If you don't have an image background, you can erase this and the part above from the code. Anyways "repeatx" tells the background how you want it to repeat, or if you don't want it to repeat at all. If you want it to repeat all over the page, change it to "repeat". If you want it to repeat vertically, change it to "repeat-y". If you want it to repeat horizontally, change it to "repeat-x". If you don't want it to repeat at all, change it to "no-repeat".
This next part of coding, "attachment: x;", dictates whether your image background scroll with the page or not. If you want it to scroll with the page, change it to "scroll". If you don't want it to scroll with the page, change it to "fixed".
The last bit, "background-position: x;", determines where the background is placed it. Do not use this if you have a color background or repeating background.... will be continued.
Userlookup Background Code:
Borders
Borders make things look cool. Well, I think so. The concept of borders is easy to understand.border: xpx xborderstyle xcolor; border-top: xpx xborderstyle xcolor; border-bottom: xpx xborderstyle xcolor; border-right: xpx xborderstyle xcolor; border-left: xpx xborderstyle xcolor;
I know that may look slightly confusing. I'm right there with you. Just remember to only change the first x.
For borders, there are three values. The pixel, border style and color. The pixel determines the width of height of the border (It depends on what border you are using). The border style, dictates what style of border will be used (Solid, dotted and dashed are common ones) and the color tells the border what color it should be!
Now, depending on what you're putting a border on, you will need to use different codes. If you're making a header and just want a border on the bottom and the right, you would use the "border-bottom and border-right" properties. Whereas, if you wanted a border on the top only you would use the "border-top" property. Likewise, if you were coding a DIV or scroll-box you will most likely use the "border" code because, it makes it go all the way around whatever it is you're coding.
Border Styles
Back to Top?
Links
Links are extremely important. They are the only way you can migrate to another page! So I thought it was very important to place a section about links and their awesomeness. Links are also customizable but, I prefer to keep mine simple.
a:link, a:visited, a:active {
color: x;
text-decoration:none; }
a:hover {
color: x; }
You may be wondering why three selectors are grouped together and one stands alone. It all has to do with design.
a:link, a:visited, a:active" all are different forms of a link. "a:link" is a link when it's just sitting there, "a:visited" is a link that you've visited previously and "a:active" is what a link looks like when you're clicking on it. Most coders like to group these together because, in general, it looks better.
a:hover" is what a link looks like or does when you hover over it. I normally have my links change color or have the letters space when hovering but, the possibilities are endless.
Like with BIUS and headers, you can add many different text attributes to the links but do so sparingly. As said above, don't let it be obnoxious!
A link code is below:
NOTE! The part of the coding that says "text-decoration: none;" is very important! It tell the link to get rid of the ugly underline it will have without it.
Back to Top?
Navigation Bars
Ooh. Navigation bars. Personally, I love making navigation bars because there is so much you can do with them! So let's get on to explaining them...
a.nav:link, a.nav:active, a.nav:visited {
display: x;
background-color: x;
color: x;
text-decoration:none;
}
a.nav:hover {
color: x;
}
You can add any text attributes to the coding. You can also add any border attributes.
The main difference between regular links and navigation links is the .nav part of the coding. This tells the link that it's class is "nav".
The only new part of coding is "display: x;". There are two values you can put after "display:" and each does something different. You can use the value block to make the links stack up on each other or the value inline to make the links go side by side.
Other than that, navigation bars are like regular links but, look at the coding below for the change in coding the actual link.
The code for a navigation link is:
NOTE! The property and value set "text-decoration:none;" gets rid of the ugly underline on the text of you navigation bar.
NOTE TWO! Remember to add the "class=nav" to the link code or it will come out like a regular text link!
Back to Top?
Headers
In my opinion, headers are very awesome inventions! They can completely change the way your page looks. With ugly headers your page has no flavor! You can have up to seven different headers. Normally I use two or three but, whatever suits your fancy!
h1 {
font: 18px tahoma;
background-color: #babaac;
border-bottom: 4px solid #c8edfe;
color: #b7171a;
text-align: center;
}
h2 {
font: 16px tahoma;
color: #61615b;
border-bottom: 1px dashed #1c9b7f;
border-right: 10px solid #b71619;
letter-spacing: 5px;
text-align: center;
}
I actually used examples for this one since it's easiest to explain headers that way. Remember that you can edit the properties and values however you want!
I use headers to separate the page into different sections or for site titles.
Since we didn't add anything new to the coding, it shouldn't be that hard to understand. Experiment and see what you can come up with. The code for a header is below. If you wanted to place your header two, replace the "1" in the coding with a "2".
NOTE! If you wanted more than two headers, you need to make a new selector. Put an "h" followed by the header number (3, 4, 5, 6, 7,). Then add the curly brackets and property value pairs!
Dimensions & Positioning
After this part of the guide, dimensions and positioning will be a huge part of your coding life. I'm absolutely serious with you. If you do not know how to position things or what dimensions do, you will be completely lost.
width: x; height: x;
Those are dimensions. Commonly, pixels are used to measure dimensions. So, if you want the the width to be 200 pixels, instead of the x, you would put 200px.
You also need to know that if someone says "20px by 45px" or "20x45" it means 20 pixels wide by 45 pixels high.The width will always come first.
position: relative; left: x; top: x;
Positioning is slightly tricky. You can either use relative positioning or absolute positioning. Depending on what you're trying to position, you need to use a different value.
I'm going to explain relative positioning first, since it's easiest. You need to use relative positioning if you are coding userlookups and petpages (sometimes.) For userlookups, you use it to position all the blogs and DIVs and the stats. In petpages, you should use it when positioning a container. That means, if you are going to have more than one column or blog, you need to put it into a container, which will hold everything together. Position the container with relative positioning.
Absolute positioning should be used sparingly. The only time I use it is when I'm coding petpages. I use it to position the DIVs inside container. Otherwise, don't use it because, on different browsers and screen resolutions it will make everything placed oddly.
The last bit of coding is much easier. "left:x;" is how many pixels from the left something is and "top:x;" is how many pixels from the top something is. You can also position from the bottom and right. Just exchange right for left or bottom for top.
Back to Top?
Scroll-Boxes
Scroll boxes are extremely useful. As you may have noticed I use one to keep my updates in so I don't have to delete them! You can use them for blogs, layouts, to stick affiliates in and loads of other awesome stuff.But first DO NOT mix-up a scroll-box with a text area. You type words or put images in scroll-boxes but you put coding in text areas.
Moving on...
#scroll {
height: x;
width: x;
border: x;
background: x;
color: x;
overflow: auto;
}
Let's go over the code:
We've already learned all the coding, except for one line.
overflow: auto;" is the line that makes it a scroll-box. This means, when the text or images will be longer than the specified height, the box needs to scroll. If you leave this line out, your box will not scroll.
You can also position a scroll-box to go a certain place. To do this, add the three positioning lines from the section above.
Here is the code for a scroll-box. Remember, your scroll-box doesn't have to be called "scroll". It can be called whatever you want!
NOTE! When coding a scroll-box in CSS, there needs to be a # in front of the name of your scroll-box. It's called an "id" and it makes sure that you can code it correctly. If you are confused about this, feel free to neomail me.
Back to Top?
DIVs
With a lot of my CSS layouts I use DIVs. They are quite simple to make and if you know how to properly use them, it can be very useful. This layout is an example of DIVs. See my boxes with all the words in them? DIVs. The coding is quite simple.
#box {
position: x;
width: x;
height: auto;
top: x;
left: x;
border: x;
background-color: x;
}
DIVs are almost like scroll-boxes, but they don't scroll and you need to position them somewhere on the page.
Remember, when positioning, to use the correct value. If the wrong one is used, it won't work right in different browsers.
The only new thing in the coding is "height:auto;". The dictates that the DIV won't scroll and it will just extend down the page. Everything else should be familiar.
Remember to keep the # in the CSS! Without it, the HTML won't recognize what it's doing and your box will not show up.
Back to Top?
F.A.Q
What borders can I use?Dotted, dashed, solid, double, groove, ridge, inset, outset, hidden or none.
What fonts can I use?
Papyrus, Chiller, Impact, Cursive, Garamond, Verdana, Modern, Roman, Terminal, Georgia and Tahoma.
My style tags aren't working!
Try these (Remove spaces in the style tags!):
If the ones above don't work, use these (with carrot brackets):
I can't see the save changes button on my petpage!
First, try deleting that last closing DIV tag. If that doesn't work, re-add the tag, and add this to your CSS. You'll have to scroll down to see it, and you can change the "margin-top" value depending on the length of your petpage.
Back to Top?
Awards & Fanmail
Awards
Fanmail
Back to Top?
First and foremost, W3 Schools, for their awesome coding tutorial. That's where I learned how to code like I can now. Seriously, check that guide out when you're done here.
Secondly, I would like to thank Kitty of Shattered Crystals. She is a great neofriend and always there when I need her help. Her site is an inspiration and shows how much you can progress over months. I highly suggest you check out Shattered Crystals right now. She also has a very detailed GIMP Guide. It helps me a lot, considering I always forget how to install brushes and fonts.
Thirdly, I would like to thank the WAM (Altador Cup chat group) for being supportive and not getting annoyed when I repeatedly asked them to make sure everything looked as good as it possibly could!
Now time for my credit. The layout, content and link-back buttons (except for the fourth one) were made entirely by me, siddey34 (siddeylikesipods, tatootinejedi).
Counter from BoingDragon.
Back to Top?
(First Award; February 8, 2009)
(Second Award; February 8, 2009)
(Third Award; February 28, 2009)
(Fourth Award; March 3, 2009)
(Fifth Award; March 4, 2009)
(Sixth Award; March 3, 2009)
(Seventh Award; April 4, 2009)
(Eight Award: April 9, 2009)
(Ninth Award: April 12, 2009)
(Tenth Award: April 18, 2009)
(Eleventh Award: April 25, 2009)
(Twelfth Award: April 26, 2009)
(Thirteenth Award: May 8, 2009)
(Second Award; February 8, 2009)
(Third Award; February 28, 2009)
(Fourth Award; March 3, 2009)
(Fifth Award; March 4, 2009)
(Sixth Award; March 3, 2009)
(Seventh Award; April 4, 2009)
(Eight Award: April 9, 2009)
(Ninth Award: April 12, 2009)
(Tenth Award: April 18, 2009)
(Eleventh Award: April 25, 2009)
(Twelfth Award: April 26, 2009)
(Thirteenth Award: May 8, 2009)
Fanmail
(First Fanmail/Post; April 9, 2009)
Back to Top?
Credits & Thank You's
Wow. This is a long guide. Which means a lot of credits and thank you's!First and foremost, W3 Schools, for their awesome coding tutorial. That's where I learned how to code like I can now. Seriously, check that guide out when you're done here.
Secondly, I would like to thank Kitty of Shattered Crystals. She is a great neofriend and always there when I need her help. Her site is an inspiration and shows how much you can progress over months. I highly suggest you check out Shattered Crystals right now. She also has a very detailed GIMP Guide. It helps me a lot, considering I always forget how to install brushes and fonts.
Thirdly, I would like to thank the WAM (Altador Cup chat group) for being supportive and not getting annoyed when I repeatedly asked them to make sure everything looked as good as it possibly could!
Now time for my credit. The layout, content and link-back buttons (except for the fourth one) were made entirely by me, siddey34 (siddeylikesipods, tatootinejedi).
Counter from BoingDragon.
Back to Top?
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® 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