Tutorials

Tutorial:CSS
This tutorial actually came about when I was trying to code the layout for Version 17. I needed help with something, and after a post at the Scented Angels forum in which Ayame said she wished there was a place that listed CSS stuff, I decided to do this.

First off, CSS stands for Cascading Style Sheet. It can be used for a many number of things, and can be used one of two ways. The easiest way is, once you've made your css sheet (which we'll get to in a moment), link it in every page of your html. You'd do it like this:
<link href="the name of your css file.css" style="rel" type="text/css">
You would place this just after the <head> tag of your document.
There's also another way you can do stylesheets, but it doesn't conserve space and I wouldn't recommend it. Here's how:
<style type="text/css">

</style>

Now. Onto the actual css itself. Style sheets are most commonly used for three things: setting your scrollbar color, setting your link style, and setting your text style. We'll cover the scrollbar first, since it's the easiest.

body {
scrollbar-3dlight-color: #387E45;
scrollbar-arrow-color: black;
scrollbar-base-color: #41A554;
scrollbar-darkshadow-color: black;
scrollbar-face-color: #68D079;
scrollbar-highlight-color: #41A554;
scrollbar-shadow-color: #41A554;
scrollbar-track-color: #2567C7;}

This is the code for the scrollbar I used in V.17. I'll try to break it down for you. The arrow color should be fairly obvious, it's the color of the arrows in the scrollbar at the top and bottom. If you don't want arrows, then you would set the arrow color and the face-color the same. The face color is the color of the actual scrollbar itself. The track color is the color of behind the scrollbar. The other colors are all the outlines. Except for the base color. I have no idea what that is. Really, the best way to figure out the colors is to just play with it and see what you like best. That's what I had to do when I first started out.

Now, for your text.

body,td,input,textarea{
font-family: tw cen mt;
color: black;
font-size: 10pt;
font-weight:normal;

These are the most common things used in the text, although there are other things you can add as well, which will not be covered in this tutorial. Let's break it down. The body,td,input,textarea are all areas that this style will effect. Anything between your body (or in the case of tables, td) tags will be affected by this. If you have a form, that's what the input and textarea cover. If, for some reason, you want the colors of these to be different, you can separate these into their own little tags, but that requires something a little different and will not be in this tutorial.
font-family is the name of the font you want your text to be. Mine is set to tw cen mt. But suppose someone browsing your site doesn't have this font? Well, unlike me, you can add multiple fonts. You would do it like this: font-family: tw cent mt; trebuchet ms; century gothic; verdana;
You can add as many fonts as you like, just make sure you put a ; after the last font. What the browser does is, if a user doesn't have the first specified font, it automatically skips to the second and displays that. If they don't have the second, it skips to the third. And so on. I generally find it a good idea to list about four fonts that are similar and would all look okay displayed in your font size.
Your color is fairly obvious. Whatever color you want your text to be, just put it there and put a ; after it.
The font-size is what size you want your text to be. If you're like me, and you used to list your font as <basefont size="size 1-7">, you may be a little confused by the way the size works here. So if you need a reference, open a word program like notepad or word pad. See where they have the sizes listed there? That's the sizes you use in font-size. I generally stay in a range of 8-11, depending on my font-face/family. And unlike your font-family, you
cannot have multiple sizes. So make sure the fonts you choose fit the one size you choose and look okay.
Font-weight is usually just set to normal. You can also set it to bold if you want bold text. Really though, you don't need this tag in here unless you specifically want bold text. I just leave it in because it's easier in case I ever wanted bolded text.

Okay, now on to the fun part! I've always found this the most enjoyable part of doing a css, because there are so many different oppurtunities to make it look neat. However, this is also going to be the most difficult to write about, precisely because there are so many different things. This is the style part for your links.
A:link{color: your color; text-decoration:decoration; cursor:cursor; font-weight:weight; additional stuff;}
A:visited{color: your color; text-decoration:decoration; cursor:cursor; font-weight:weight; additional stuff;}
A:active{color: your color; text-decoration:decoration; cursor:cursor; font-weight:weight; additional stuff;}
A:hover{color: your color; text-decoration:decoration; cursor:cursor; font-weight:weight; additional stuff;}

Okay. Let's attempt to break this down into something understandable.. Let's start easy. A:link and A:active are basically the same thing. So when you code them, make sure you set them the same. These will be the links before a person has clicked on them, and when they're not holding their mouse over them, or hovering over them. A:hover is what it looks like when the person is hovering over the link. A:visited is what a link looks like after a person has already clicked on it and visited it.

Now that that's explained, let me attempt to start with text-decoration. We shall skip color because that is self-explanatory. There are four types of text-decoration. 1) underline This is if you want your link to be underlined. 2) overline If you want your link to have a line over it rather than under it. 3) line-through If you want your link to be striked out with a line in the center of the text. 4) none If you don't want your text to have any sort of decoration at all.

Cursor is always a fun one to have. Instead of having that boring old hand when you go over your links, you can have different ones, or even a custom one if you'd like! Here are the different cursors: 1) wait This is that little hourglass cursor your computer usually makes when it's busy (or in my case, when a webpage has frozen because of too many tasks!). 2) default This is the default arrow cursor. 3) crosshair This is the cursor that is two intersecting lines going north/south, east/west. 4) n-resize, s-resize, w-resize, e-resize, ne-resize, se-resize, nw-resize, sw-resize These are the various resize cursors, respective to the directions of a compass. Not sure what a resize is? Hit the restore down button on your internet browser if it's maximized, then move your mouse to the upper-right corner of the window of your browser. See how the cursor changes to one with arrows on the ends? That's a ne-resize cursor. 5) hand This is the hand with the pointing finger. 6) text This is the old-fashioned text cursor that appears when you're typing words. Nowadays it's just a straight line, but on older computers it's not. 7) move This is the cursor that appears when you want to move a window somewhere. 8) help The arrow with a question mark next to it is the help cursor.
Wow, what a lot of cursors! Aren't you glad there aren't more? You can also make your own cursor. Just set it up like this: cursor:url("name of your cursor.cur"); You generally need a icon program to make your own cursor, and it must be saved as a .cur file.

Font-weight is the same as the font-weight for the normal text, except it's more useful because you can bold links to make them stand out more.

*takes a deep breath* Okay. That was all basic. Now we're getting into some additional stuff here, of which there's lots. Borders, filters, transitions (IE 5.5+ only), backgrounds, etc...
Because the background is easiest, let's start with that. Say you want a small colored background behind your text. Well, make yourself a background of about.. oh, let's 10x10 pixels? Save it as a .gif or .jpg file and upload it to your site. Then you display it like this: background: url(your file.jpg/gif); It's quite simple.
Now we'll do borders. There are a lot of different borders out there, and some can usually be combined with others. 1) border-bottom: 1pt dotted This is if you want a little dotted border underlining your link. I suppose you could make it 2pt dotted, though I never do. You can also make it solid instead of dotted, but in that case, why not set underline for your text decoration instead? Oh, and as a note, text-decorations and borders can be combined. You can have an overline and a border-bottom, they won't override each other. 2) border-top: 1pt dotted Essentially the same as border-bottom, except along the top of the link. 3) border: 1pt dotted This will give you a boxed border around the link. I find this one sort of neat =P
And remember, you can combine all these to get neat links. Just experiment. Eventually you'll find something you like ^^

Filters. There are a bunch of various filters. I'll give you two. filter: fliph; height:0 or you can do filter:flipv; height:0; Flipv flips the text upside down when you hover over it. Fliph mirrors it. Place these filters only in the hover link.

Transitions. This one is so complicated I can't begin to explain it. You will need a file called pixel.htc for this to work. download it. If you'd like to mess with transitions, I'll give you a link that tells you how to pixelate text. You can explore the site if you want others, such as fade in, or blur, or dissolve. The pixelate filter. Please be aware, this effect only works with Internet Explorer browser 5.5 and up.

So, you got your various css stuff ready? Want to put it on your site? Here's how. Open up notepad, and lay it out like this:

A:link{color: #7F7174; text-decoration:underline; cursor:default; font-weight:normal; behavior:url(pixel.htc); filter:progid:dximagetransform.microsoft.randomdissolve(duration=.5, maxSquare=15, enabled=false); height: 2px;}
A:visited{color: #7F7174; text-decoration:underline; cursor:default; font-weight:normal; behavior:url(pixel.htc); filter:progid:dximagetransform.microsoft.randomdissolve(duration=.5, maxSquare=15, enabled=false); height: 2px;}
A:active{color: #7F7174; background-color:transparent; text-decoration:underline; cursor:default; font-weight:normal; behavior:url(pixel.htc); filter:progid:dximagetransform.microsoft.randomdissolve(duration=.5, maxSquare=15, enabled=false); height: 2px;}
A:hover{color: #FFFFFF; text-decoration:none; cursor:default; font-weight:normal; background-color:transparent;}

body,td,input,textarea{
font-family: tw cen mt;
color: #A7A693;
font-size: 10pt;
font-weight:normal;

body {
scrollbar-3dlight-color: #7F7174;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #7F7174;
scrollbar-darkshadow-color: #A7A693;
scrollbar-face-color: #7F7174;
scrollbar-highlight-color: #A7A693;
scrollbar-shadow-color: #7F7174;
scrollbar-track-color: #A7A693;}

This is actually the css I used for V.17 You'll replace it with your own stuff, of course. I'm just giving you an example. Now, on Notepad, go to file>>save as. Pick your folder to save it in, and pick a file name to save it as. I usually just save mine as default. So type in default.css and note, you must put .css, otherwise it will save as a .txt file and it won't work. Then once you've saved it, upload it to your site and link it like I told you. Or you can take all that and put it between the <style> tags I showed you.

And that's it! You're done. Now, doesn't your page look a bit better now that you've done that?

This tutorial and all contents found within are Š2003 to satori and are not to be reproduced in any way without permission.