Welcome Guest
[Log In]
[Register]
- RealEmotion
- →
- Tutorials
- →
- Scripting and Coding Tutorial
- →
- Cascading Style Sheet
| Welcome to RealEmotion. We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Cascading Style Sheet; By: Dreamstar7 | |
|---|---|
| Topic Started: Feb 9 2006, 03:37 PM (938 Views) | |
| +Kitzutsuita | Feb 9 2006, 03:37 PM Post #1 |
|
.-|-.
|
Submitted by: Dreamstar7 ---------------------------- @ Real Emotion ---------------------------- WARNING: It’s best to know basic HTML before attempting to read through and understand this tutorial. A good idea is to also read A Word About Divs before you read this. http://www.blogring.net/index.php?showtopic=88640 Thanks to Snaple for the idea. ----------------------------------------------------------------------------------------------- If you know basic HTML, you’ll see a lot of codes like this:
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:
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.
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. I hope this helped. Please feel free to ask any questions you might have. |
 |
 
|
| +hao. | Feb 9 2006, 06:10 PM Post #2 |
I love w-inds.
|
Nice step by step explanations. Great job, Dreamstar7! |
|
|
|
| Kage | Mar 12 2006, 04:54 PM Post #3 |
李世勳
|
havent read this completely, but it's "Cascading Style Sheets - CSS" |
|
|
|
| Endless Evil Bliss</3 | Mar 13 2006, 04:04 AM Post #4 |
|
CSS confuses me, even though it is the simplest form of html. I still can't make a div layout. Wah. -o- |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Scripting and Coding Tutorial · Next Topic » |
| Track Topic · E-mail Topic |
 8:26 PM Nov 24
|
Skin created by Valleri. Find more great skins at the ZB Theme Zone.
