Intro to CSS and Assigning Classes

Write your "How To" regarding anything you are comfortable with and you feel it will help the forum members.

NOTE :: All threads started here will appear only after the approval from Administrator
Post Reply
xyunaxfantasiesx
Posts: 49
Joined: Thu Feb 08, 2007 1:06 am

Intro to CSS and Assigning Classes

Post by xyunaxfantasiesx »

If you know basic HTML, you’ll see a lot of codes like this:

Code: Select all

[color=#000000][font=arial]
The part we’ll be focusing on here is the "style" part.

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.

Let’s say you’re coding a Xanga layout, and you’re 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, it’s 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. That’s 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 don’t have to type it all out every time you have a new div.

A stylesheet looks like this:
<style type=”text/css”> shows the beginning of the stylesheet, and </style> shows the end of the stylesheet. Everything that goes between the two tags is part of the style.

Now let’s take a sample code.
Look familiar? These specify the scrollbar colors and the background image and colors of the main site. The .body part of the code means this applies to the entire site. It's what I call the title. (Sorry, I don't know the actual term for it.)

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 don’t put the semicolon between each aspect, the stylesheet won’t work.

Now let’s look at something a bit more complicated. We’re getting into assigning classes now.

I often use this code in my layouts:
It doesn’t look so complicated at first. Until you get to coding the div of the module.

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
That’s fine. Except when you look at it through a Xanga, the fonts will be default, the div won’t have a border; everything you detailed in the stylesheet isn’t going to show up. Why is that?

Well, the computer can’t tell that the code above is for your module. So even if you specify everything in the stylesheet, it’s 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”? We’re 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:
That’s how you assign a class to a div. The "div class" part is the link between the stylesheet and the actual div. If you look at it through a Xanga again, it will be the width, height, font, color, etc. of what you have in the stylesheet. Neat, huh?

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
See what I mean? Now you’re linking the header into your code.

This works for anything. It can be the blogbody, the custom module, each section of the module, etc.


SHAdmin
Posts: 2089
Joined: Sat Dec 18, 2004 11:28 am
Contact:

Post by SHAdmin »

Thank you for sharing this "How To" with the community, and you have been credited 30 points for it.
Post Reply