Code: Select all
[color=#000000][font=arial]
What is style? Style shows how things will look on your layout. It sets the font, color, border, background color, background image, etc. for your layout.
Lets say youre coding a Xanga layout, and youre making your own custom modules. For each section, you have a specific header and a specific layout of the section. It gets annoying to have to type out the style of the section and/or header every time you have a new section. Plus, its easy to make typos that mess up the whole look of the layout, and you have to spend hours going through your code, trying to find the mistake. Thats where stylesheets come in.
Stylesheets, often referred to as CSS, are a way to make your codes clean, neat, and easy to read. They organize all the information into one stylesheet, so that you dont have to type it all out every time you have a new div.
A stylesheet looks like this:
Code: Select all
Now lets take a sample code.
Code: Select all
Everything after .body is put in brackets ({ and }). This is a must. Everything in a stylesheet (except the title) must go in between those brackets. Notice that each aspect is separated by a semicolon ( ; ). This is also a must. If you dont put the semicolon between each aspect, the stylesheet wont work.
Now lets look at something a bit more complicated. Were getting into assigning classes now.
I often use this code in my layouts:
Code: Select all
So your module div looks something like this:
Code: Select all
[B]About Me[/B]
NAME: Blahh
AGE: 264
HOBBIES: picking on little kids
EXPERTISE: being crabby
DISLIKES: good kids
Well, the computer cant tell that the code above is for your module. So even if you specify everything in the stylesheet, its not going to show up that way. What you need to do is link the stylesheet to the div.
Look at the stylesheet again. See where it says .module? Were going to call that the div class.
Now go back to your module code. Insert class="module" before the style, so that it looks like this:
Code: Select all
You can do the same thing for headers.
Code: Select all
About Me
NAME: Blahh
AGE: 264
HOBBIES: picking on little kids
EXPERTISE: being crabby
DISLIKES: good kids
This works for anything. It can be the blogbody, the custom module, each section of the module, etc.