updatesAugust 1, 2013 +1 Grammar Check
First of all, as you surely have noticed, Decoded is now hosted at /~xycote, which means my old main account (siddey34) was unfrozen! All neomails will need to be sent to my siddey34 account or else they will more than likely not be read. On another note, Kitty from Siren's Isle grammar checked the entire guide! If you need a review, request one from her because they are in-depth and will be extrememly helpful as you try to improve your site! The templates will be coming soon. I am going to add three either tonight or tomorrow.
July 21, 2013 +1 Affiliate
Decoded is now affiliated with The Button Club! I will be home almost all day tomorrow so I plan on writing some tutorials and/ or creating some templates to be added to the site.
coming soonLately, I've had a lot of users request for me to add some things to Decoded, so they are next on my list.
+ a tutorial for anchored layouts
+ a tutorial for a 'double anchored' layout (like Decoded's)
+ grayscale templates
+ design sections
If you have anything you think I should add, please let me know!
This is a secret box. I made it to text and make sure that my boxes worked. LOLOLOLOL.
If you happen upon this little box, neomail me with the words 'the tardis landed on the death star' and I will make you a CSS layout or code something for you.
EASY TO READ THROUGH
HARD TO READ THROUGH
If you are just starting to code, I suggest you code like the first example. By keeping everything on a different line, you can easily find everything and it makes finding mistakes much easier. If you are experienced and can read through coding quite well, then go ahead and code any way you would like.
Another great way to keep organized is grouping. By grouping I mean, if you have a bunch of DIVs, put their CSS near each other so you can easily find your DIVs. I do this in my coding and it helps me find things that need fixing much quicker.
1. All characters in your coding should be lowercased. No coding should be capitalized.
2. Make your coding like a mirror.
3. Unless you are using an empty tag, all coding should have a closing tag.
4. Your CSS should come before the content of your page.
5. DO NOT CODE ON NEOPETS! You should code in a program such as Notepad or Notepad++ (my preference). This allows you to save your coding to your computer.
6. If you are having a problem, make sure everything in your coding is written correctly. An missing ';' in your CSS can mess up a whole property.
7. Be patient as you learn. Coding takes practice. Eventually, you will find methods that work well for you.
8. Save frequently! You do not want to be working on something only to have the coding lost.
9. Preview your work often. This allows you to see what your work looks like so you can tweak it to your liking.
10. Never be afraid to ask, use a search engine, or reference a tutorial. I have been coding web pages for five years and I still have to look things up daily.
HTML is sort of like the skeleton or structure of a web page. By adding the HTML, you get the base of what you are creating and most of the time it is not pleasing to the eye. It is very bare, like a skeleton
CSS designs the HTML. By using CSS, you can add different components to HTML to make your creation beautiful. However, you cannot make anything beautiful by just using CSS. If the HTML isn't present, then your CSS won't be visible.
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. The tags tell the text between them what to do. You can do some styling using only HTML, but not very much. It also makes for messy coding.
A line break, the "br", will put text on a new line. So if want a space of four lines between two chunks of text, you can put four line breaks after the end of your first block of text. An example is below.
Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one. Text block one.
Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two. Text block two.
See? There is a space of four lines between my two blocks of text.
A line break is an empty tag, so it has no closing tag.
When designing text using HTML, there are seven possible font sizes, which are displayed below.
font size 1
font size 2
font size 3
font size 4
font size 5
font size 6
font size 7
You can replace the "2" in the code above with any of the seven possible font sizes.
The next part of the code, the font face, is where you pick what type of font you want. Some common ones are georgia, arial, tahoma, and verdana. When deciding on the text for your whole page, verdana, tahoma, and arial are the easiest to read and look the best.
The last part of the code, the font color, is currently set to red. You can change it to any color you want, including hex color codes. Hex codes are the color codes with number signs in front. #D68189 is the hex code for the border of the DIVs on this layout.
First, you need to know how to make an image appear on a page.
That is the code for putting an image on a page. Now, where it has a URL to tinypic ending with a .jpg, you need to put the image URL. To get the image url, right click an image and choose the option that says Copy Image URL. If that doesn't work for you, drag the image to your address bar and copy the URL in the address bar.
changing the sizeFirst, we are going to learn how to change the size of the image. Currently, our picture is 80 pixels by 80 pixels. We are going to make it the size of an icon, which is 100 pixels by 100 pixels.
|From This:||To This:|
All you need to do is add two parts of coding to the original image code. So, it will look like this:
You can change the image to have any size you want, but the larger you make it, the more pixelly it will become.
If you hover over the button above, the message A Guide to Coding! pops up. This is really simple to do.
The alt and title are what makes the message pop up. You have to include the alt and the title so your message will pop up in all browsers. Just replace your message with mine in the coding and your hover message should appear.
The code for a color background looks like this:
Adding an image background looks slightly different. Also, when we add an image background, it looks best if it's fixed, meaning that the background stays in one place and does not scroll with the page. The code for that looks like this:
All you need to do is put your image url where it says "url here". The code above is for repeating backgrounds; if you want to specifically place your background somewhere, go here.
The best way to explain anchors is to give examples.
The 'a name="siddey"' is the anchor. This needs to go on the outside of the word you want it to jump to.
The actual link to jump to the word or section will look like this:
It is vital that you put the number sign (#). Without putting the number sign, your anchor will not work.
When using anchors to jump to sections, you have to make sure you put the actual anchor coding outside of the header coding so it looks like this:
If you put the anchor coding inside the header tags, your headers will take on the same qualities as links, just won't be clickable.
When using CSS, you can designate some properties to be used throughout the entire page. The code for the body is below.
Style tags can be found below.
Below are all the possible ways to design your text.
The font: 12px tahoma; let's you change the font style and how big it is on the page. Some common fonts used are tahoma, georgia and verdana. You also need to change the size of your text. For page text I suggest using 12px to 14px.
The second line, color: gray;, is used to change the color of your font. I suggest using a dark gray if you have a white or lighter colored background and light gray if you have a dark background. However, you can make the text whatever color you like.
text-align: left; tells your page where to align the text. You can align to the left, center or right. You can also set the value to justify, which will make your text line up on the left, but it gives an even, cleaner look.
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: none;" puts a pixel amount of spaces in between each letter. Don't make it too big or the letters will look like different words.
The fifth line is text-decoration: none;. This will add an underline (under the text), overline (on top of the text), or line-through (strike) effect to your text. You can also use 'underline overline', which will put a line under and over your text.
The last line is "text-transform: none;". This will make your text lowercase, uppercase or have it capitalize automatically. Just be aware that capitalize will make the first letter of every word capitalized, not the first in every sentence.
If you know text properties, BIUS is really easy to understand. You can add any text properties to your BIUS, just don't add too much and make sure it is pleasing to the eye.
The last line of coding in each selector is the most important! It makes sure that the "b" is bold text, the "i" is italic text, so on, and so forth. Don't change it and make sure it is the last!
There are many background codes, but you can merge them all together into one big happy background code family!
Where it says "colorx" you can pick the color you would like the background to be. That was pretty obvious right? Now it gets a little trickier.
The second part, "url ('url here'), 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 'copy image url'. Paste the image code where it says 'url here'.
The next part also has to with an image background. If you don't have an image background, you can erase this and the part about adding an image background from your 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 scrolls 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. Only use this code if you want a background in a specific place on the page. The possible choices for the value are: top left, top center, top right, center left, center center, center right, bottom left, bottom center, and bottom right.
Userlookup Background Code:
There are three values for borders: the pixel, border style, and color. The pixel determines the width or thickness of the border, depending 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 a scroll-box, you would most likely use the "border" code because it makes the border go all the way around whatever it is you're coding.
The top selector, property, value set is "a". "A" is a link. Some users use the code "a:link, a:visited, a:active", but I think it is simpler to just use "a".
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:
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.
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 we are learning 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 there are changes in coding the actual link.
The code for a navigation link is:
The property and value set "text-decoration:none;" gets rid of the ugly underline on the text of your navigation bar. Also, remember to add the "class=nav" to the link code or it will come out like a regular text link! If you have a border on your regular link, and don't want a border on your navigation bar link, you have to add "border:none;" or it will show up! This goes for all property value sets.
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".
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, ). Then add the curly brackets and property value pairs.
Those are dimensions. Commonly, pixels are used to measure dimensions. So, if you want the the width to be 200 pixels, instead of the 500px, you would put 200px. You can also make the height "auto" which will make it grow depending on the amount of text you have.
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.
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 sometimes for petpages. 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 of my container. Otherwise, don't use it because on different browsers and screen resolutions it will place everything in the wrong spots.
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.
Remember to use the correct value when positioning. If the wrong one is used, it won't work right in different browsers.
You can make your DIV scroll or extend down the page. To make it extend down the page keep the "height:auto;" propery-value set. If you would like to make your box scroll, give your box a set height and change the "overflow:none;" to "overflow:auto;
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.
Opacity is really neat actually. It can change how well you see something.
The image on the left is set to full opacity and the image on the right is set to 0.5 opacity.
For the code, we are going to set opacity to a DIV with a purple background.
The opacity selector value set is on the very last line. I set the opacity of the box to "0.4". You can set opacity between "0.0" and "1.0". At "0.0" you cannot see the object at all and at "1.0" you can see it fully.
It's a fairly easy concept to understand. You need to make sure you use decimals, however, or it will not work. You can set opacity to anything you want! Opacity effects work really well using hover effects, which you can learn about in the next section.
Actually, if you know how to make links and navigation bars, you've already learned to do hover effects without realizing it.
We're going to do an example of a page header. The background on the header will change when you hover over it. Cool right?
What you need to remember, though, is to have the regular coding and the hover coding.
There is an example below. Hover to see what happpens (what you just learned):
hover over me!
positioningWe used to position like this:
But now, because of the filters, we cannot put position in our CSS, so we have to do this.
See the difference? You have to add 'style="position:x;"' at the end of your DIV tag.
You can also position using margins, if you know how to do that.
UL stands for userlookup.
By the way, all of the codes below go between style tags.
One column layouts are the easiest to code and therefore are great for beginning layout makers.
First, we need some colors to work with. I suggest going to COLOURlovers and picking a nice palette, or finding a Neopets item that you like and eyedropping the colors to get the HEX codes. I am using a palette called Cheer Up, Emo Kid. Just remember to exchange your colors for mine.
We need to start our layout by adding style tags, like so:
All of our CSS goes inside the style tags. Our CSS is what makes the HTML look pretty.
Okay, so if you go look at your petpage now, there is the top neopets bar and it has a really ugly yellow part. Since we need to keep the clickable link part of the bar, we are going to get rid of the yellow part.
This makes the yellow part transparent and any other tables you create will have a transparent background.
Next, we are going to edit the body of our layout. The body is made up of properties that control the enitre web page. We are going to add the background color and text properties to our body.
Okay so, obviously, the first property is what color you want your background to be. The background color sets the mood of your layout (whether it's dark or light). Darker layouts tend to be easier to code, but whatever you think will look best is fine. The second two properties both have to deal with the font of your layout. The one that says "font" is where you choose how large your font is and what font face you want to use. Where is says "color" choose the color of your font. I suggest using a darker color (black, navy blue) or a dark shade of gray.
Now, you should save your work.
Next, we are going to start adding our column. Our column is going to be a non-scrolling DIV. Since we are only using this column once, we need to make a DIV id.
We aren't completely done, but those four properties are the basics we need to create and position a DIV for a layout. The first property, width, is where you put how wide you want your column to be in pixels. The second property is the height. We are making a layout the keeps extending down the page the more you type.
The next two properties deal with the position of the DIV on the web page. The margin property is important because it centers the web page. You have to put "margin:0px auto 0px auto;" exactly like that so it will center. If you want your column to align to the left, exchange margin with "left" and add a pixel amount after left. The last property, top, is how many pixels from the top your DIV is.
Before we move on, we are going to add our DIV to the webpage. Make sure to type something in the DIV so you can see what the text looks like. Remember that this goes outside of the style tags.
You will only be able to see the text and should be somewhere in the center of your page. (If your background is dark as well as your text, you may not be able to see it. Press CTRL + A to highlight the whole page and find the text.)
As of now, your coding should look like this:
Now, we are going to save our progress.
We are going to make our DIV pretty by adding a background color, border, padding, and a text-align!
As you can see, I added four new properties to our DIV. The first is one we've already worked with: background-color! This just changes the background color of the the DIV. The next property is the border. It creates an outline around the outside of your DIV. I suggest having a 1-5 pixel border. Common borders to use are solid, dotted, dashed, and double (two lines of the same color). You need to put your border values in the order I have them or it won't work.
The next two properties have to do with the content inside the DIV. The first one, padding, makes it so the text doesn't line up right next to the edges of the DIV. It creates a space between the border and text. Padding of 3-5 pixels usually works well. The next property, text-align, is how you want your text to align in the DIV. I usually use center (align in the center) or left (align to the left).
Now if you preview your page, you should a very pretty DIV! We are going to save again, so we don't have to re-do all of that!
Since we finished our DIV, we are going to add all of things that make a layout pretty: headers, links, and BIU!
We are going to start with making our header. Now, there's a lot we can do with headers. I am going to make a simple, but awesome, one. You can change yours up however you wish.
Well the header is kind of open-ended. You can add borders, backgrounds, different font colors, different font sizes, different font faces, letter-spacing, and text transforms. For information on what the different text properties do, go here.
To add the header, inside your DIV put:
It will add the header to your DIV. Now preview your page and save.
Next are going to add bold, italic, and underlined text. This is really simple; you just need to add colors to the base coding.
The only thing that needs to stay the same are the last properties. The colors can change.
Add this to your text to see what your BIU look like:
Last, but not least, we are going to decorate our links!
When we code links, we have the regular link and what happens when you hover over it. The first selector is what the link looks like when it's sitting there and the second selector is what the link looks like when you hover over it.
I normally have the link change color and the letters space when you hover over it, but whatever suits you is fine. The text-decoration property is important; it gets rid of the ugly underline the link would have.
To code a link and see what it looks like, put this in your DIV:
Of course, exchange my URL for yours and exchange my text for yours.
That's it! You made a one columned petpage layout! Congrats!
For layouts I would suggest solid, dotted, dashed, double, and hidden.
What are some good fonts to use?
Papyrus, Chiller, Impact, Cursive, Garamond, Verdana, Modern, Roman, Terminal, Georgia and Tahoma. If you cannot see one of these fonts (it will display as times new roman), you do not have it installed on your computer. If that is the case, I would suggest using a different font.
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!
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.
How do I get rid of the ugly yellow bar on my petpage?
You can't get rid of it completely, but you can remove the yellow part. Use the code below:
become an affiliateI am currently looking for affiliates. I am open to accept any design or very well established sites. Design sites include premade CSS and layouts, coding guides, graphic guides, and graphic sites. If you are interested, neomail me here.
Why did you create this guide? In short, I LOVE CODING! Yes that may seem weird, but coding is something I like to do and I'm quite good at it if I do say so myself. I wanted to share my knowledge with everyone.
Why did you change the name from Siddey's CSS Help to Decoded? The site needed a change and a new, more interesting name along with it.
I have a question about coding. Can I neomail you to ask? Of course! I love getting neomails and helping people. I will try to help you the best I can.
You're really good at coding! Will you make me a layout? I will if I have time. I would like you to learn yourself. -pokes guide- That's why my guide is here, after all.
Why don't you have a premades site? I don't like making premades. I find it boring and dull, plus there are many great premade sites out there already. I don't mind taking requests, however.
Cool banner! How did you make it? GIMP. It really is quite easy to explain. I just blended two images, added brushes, text and BADDA BING! Instant banner. If you want some help I could probably tell you how.
When did you learn to code and how old are you? I learned to code the summer of 2008, when I was 12. That makes me 17 now. Yeah, I'm pretty young. -shrug-
Why does your name on your userlookup say Sydney Luke Skywalker? I love Star Wars and earned myself the nickname Luke. So I just combined three names
That autumn, I went on an unexpected hiatus due to school and sports. Siddey's CSS Help was long forgotten until January 15, 2009. In January, I gave SCH a new layout and took down the templates to add sections. Even then, I didn't really know what I was talking about.
In the spring of 2009, I changed the layout yet again, and revised and edited all my sections even though I didn't have many of them.
In the summer of 2009, I added many sections to SCH, explaining many different components of CSS. Then, in the fall, I created a new autumn leave themed layout, revised the sections even further, and added more. Oh, and I procrastinated. I took an unexpected hiatus during the winter of 2009-2010 due to sports and my increase in schoolwork.
I came back in March and knew that SCH needed a major revamp. I created a new layout and gave the guide a new name, Decoded. I also added more sections to do with coding basics. I am continually adding more content as my coding knowledge increases.
The second button is from εxpressions. The third button is from Happily Ever After.
I have put a lot of my time into this guide, and I don't appreciate stealers.
I learned to code at W3 Schools. I highly suggest you go there after you have been to my guide.
The counter is from BoingDragon.
Counter Started August 6, 2008.
This site was started August 6, 2008. It was re-opened officially on January 16, 2009.
I revamped Siddey's CSS Help and changed the name to Decoded on March 28, 2010.
NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013.