accepted:Intro To Css/stylesheets And..... - Blogring.net

dreamstar7^P · 10-10-2005, 10:29 PM

WARNING: It’s best to know basic HTML before attempting to read through and understand this tutorial. A good idea is to also read [Only registered and activated users can see links. ] before you read this.

Thanks to Snaple for the idea. ^_^

-----------------------------------------------------------------------------------------------

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

Code:

<div style="width: 500px; height: 500px; margin-top: 235px; margin-left: 60px; font: normal 8pt arial; color: #000000; background-color: #FFFFFF; border: 1px solid #000000;">

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:

Code:

<style type="text/css"> stylesheet stuff go here </style>

<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.

Code:

<style type="text/css">
.body 
{background-color: #FFFFFF;
background-image: url(urlhere);
background-repeat: repeat-y;
background-position: center;

scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;}
</style>

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:

Code:

<style type="text/css">
.module
{width: 500px;
height: 400px;
background-color: #FFFFFF;
background-image: url();
font: normal 8pt arial;
color: #000000;
line-height: 10pt;
border: 1px solid #000000;}
</style>

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:

<div style="overflow: auto; margin-top: ###px; margin-left: ###px;">
<b>About Me</b>
NAME: Blahh<br>
AGE: 264<br>
HOBBIES: picking on little kids<br>
EXPERTISE: being crabby<br>
DISLIKES: good kids</div>

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:

Code:

<div class="module" style="overflow: auto; margin-top: ###px; margin-left: ###px;">

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:

<style type="text/css">
.moduleheader 
{background-image: url(urlhere);
background-position: bottom center;
background-repeat: no-repeat;
font: bold 12px arial;
line-height: 20px;
color: #000000;
border: 0px solid #00000;}
</style>

<div class="module" style="overflow: auto; margin-top: ###px; margin-left: ###px;">
<div class="header">About Me</div>
NAME: Blahh<br>
AGE: 264<br>
HOBBIES: picking on little kids<br>
EXPERTISE: being crabby<br>
DISLIKES: good kids</div>

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.

--------------------------------------------------------------
tutorial copyright dreamstar7 @ blogring.net

imported_girl anachronism^P · 10-10-2005, 11:19 PM

This is how you taught me to create layouts.
*grabs megaphone*
I OWE MY SUCCESS AND KICK-ASS LAYOUTS TO THIS WOMAN RIGHT HERE. GIVE IT UP FOR...ZEPHYR!

elainn.^P · 10-10-2005, 11:49 PM

Great tutorial Zephyr. WONDERFULLL(: LOL

vivalahamandcheese · 10-20-2005, 04:45 AM

oh wow. HA. this is a great tut...i like the

Quote:

HOBBIES: picking on little kids

EXPERTISE: being crabby

DISLIKES: good kids</div>

part. interesting... thanks though!

tanoshii_niwa^P · 10-23-2005, 02:19 AM

This is soo awesome!! I understand a lot better now, thanks so much.