|
body{background: url(http://img.photobucket.com/albums/v204/NyuSariyoko/layout_background-1.png)}
body, font, td {
font: 8pt tahoma;
letter-spacing: 1px;
color: #373439;}
p, .medText {
font: 8pt verdana;
letter-spacing: 1px;
color:#373439;}
A:link,A:visited,A:active,a{
font-weight: none;
color: #FFF!important;
text-decoration: none;}
a:hover{
color: #ea9b1b!important;}
b {
color: #804d82;
font-weight:normal;}
i {
color: #b941c0;}
u {
font-weight: none;
text-decoration: none;
color: #ef42b8;}
h1 {
font: 25pt georgia;
font-weight: none;
color: #fbd573;
text-align: center;
text-align: center;
padding-right:5px;
letter-spacing: 0px;
margin:0px;
text-transform:lowercase; }
TEXTAREA.sample
{
border-width: 0px;
border-style: solid;
border-color: #000;
background-color: #373439;
width: 260px;
height: 50px;
overflow: auto;
padding: 5px;
font: 8pt tahoma;
letter-spacing: 1px;
color: #FFF;
overflow-x: hidden;
overflow-y: hidden;
}
TEXTAREA.codes
{
border-width: 0px;
border-style: solid;
border-color: #000;
background-color: #373439;
width: 100px;
height: 50px;
overflow: auto;
padding: 5px;
font: 8pt tahoma;
letter-spacing: 1px;
color: #FFF;
overflow-x: hidden;
overflow-y: hidden;
}
TEXTAREA.codes2
{
border-width: 0px;
border-style: solid;
border-color: #000;
background-color: #373439;
width: 150px;
height: 50px;
overflow: auto;
padding: 5px;
font: 8pt tahoma;
letter-spacing: 1px;
color: #FFF;
overflow-x: hidden;
overflow-y: hidden;
}
div {
border: 0px solid #c38954;
}
#info {
background-color: #e994ed;
border-width: 0px;
border-style: solid;
border-color: #000;
width: 626px;
overflow: continuous;
}
div {
}
#info3 {
background-color: ;
border-width: 0px;
border-style: dashed;
border-color: #d5a770;
width: 539px;
height: 190px;
overflow: auto;
padding: 5px;
}
div {
}
#info4 {
background-color: ;
border-width: 0px;
border-style: dashed;
border-color: #d5a770;
width: 500px;
height: 70px;
overflow: auto;
padding: 5px;
}
div {
}
#info5 {
background-color: ;
border-width: 0px;
width: 450px;
height: 210px;
overflow: auto;
padding: 5px;
}
div {
}
#info9 {
background-color: ;
border-width: 0px;
width: 300px;
height: 150px;
overflow: auto;
padding: 0px;
}
Hey there! My name is Zecelia, but you can just call me Z. I know exactly why you're here so let me get some guidelines for you C:.
1. Do not copy this guide and claim it as your own!
2. If you use the CSS/HTML help here you are not required to link back, but I appreciate it when people do! Tell others how you got your own help! C:
3. Respect my image on this page and do not steal the art C:. If it were your's it would look like you - not me
4. Enjoy!
Also! Please link back to this page with the button below!
Note: Please do not expect this guide to be a one stop fix for your coding mishaps. I created this page because I have stressed the Poogle to the end of the earth searching for how to do some things and I thought it was rather rubish not having a quick guide to use to do what I needed.
It is really easy to use this guide. If you want a quick find for some coding - tap CTRL + F for a quick find of something you are looking for. I also have made a couple of quick links for you to use too C:.
All updates to this page will be posted here! There will be a lot in the beginning but not too many once this page is filled up C:.
July 1, 2010: Created the whole layout, worked on coding the page, added in some of the information.
Okay, let's start with the basics. These are simple codes almost every CSS/HTML Guru probably knows and a lot of non-coders actually know these too. It's simple link codes, image codes, etc. But you'll see that all soon enough C:.
|
|
|
|
|
|
|
If you need to underline something in your text, this is the code to do that! C:
|
If you need to bold something in your text, this is the code to do that!
|
If you need to italicize something in your text, this is the code to do that!
|
If you want to post an image, you will have to use a specific code. This is the code. All you have to do is replace the IMAGEURL.PNG with the URL of the image you want to use
|
To post a link you will have to use this code. All you have to do is replace the "URL HERE" with the URL you want to link to
|
These tags are going to be your most important tags when creating CSS. These tags are used for putting your CSS between. You must put everything you are going to use between these tags otherwise your css won't work
|
Now we're going to have to focus on getting your CSS into your style tags and organizing it and showing you how each element works. If I were you I'd open up a new document and start by putting in your style tags. Okay, now once you have that we can start to determine what you need and breaking down each aspect of these things.
First, let's start with divs. Divs are the most important part of the layout because it will determine what type of layout, how the layout works, how you set it up, etc. This is even more important then images. I like to think of divs as the skeletal system as they support all the aspects of your layout.
|
|
|
|
|
This is the basic tags you will put into your style tags to say that you're naming div properties. Anything you put into the { } tags will apply to ALL of your divs. To say you want certain aspects applied to certain divs, we go to the next area.
|
This is the tags you will put under the div {} tags to say you want specific divs to have specific properties. These will only apply to the divs you associate with this coding. You can put as many of these as you want under the div {} tags as long as you make sure you keep it with it's own set of tags and don't leave a set of tags open. Make sure to rename the DIVNAME to the name you want - DON'T! remove the # sign!
|
Now we are to the part of the code you will use for your div! This code is the basic form, you will get more advanced options later in the lesson - but this is the code. Whatever properties you made for a specific div in the #DIVNAME {} will be applied to the div you name this after. Remember that the id of the div is important because it tells the coding what codes to use for your div. So make sure you name the id after the #DIVNAME you had chosen. When you put the name in the id code, don't include the number symbol.
|
Now this is what you will have inside your style tags. It's pretty simple, but we're about to elaborate on that!
|
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® 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
