CSS

Cascading Style Sheets

I've found in my wandering and figuring things out, that most things consist of repeatedly copying and pasting text from one .txt file to another...and that doesn't bother me, as long as I have it all clearly titled so I'm not fishing for what I need.

For a cascading style sheet, it goes in the <head> tag. Personally, I put it indented and under the <title> </title> tags. That's just my little thing that started from what Liz was doing when she showed me the initial html pages I have up on the site.

Your basic style sheet starts with the <style> tag. To keep from confusing browsers who don't read CSS (I think) this is followed by  </style>.

<html>
<head>
<title> </title>
<style>

</style>
</head>

Savvy? ...So then comes the interesting question of what we put between these tags...and that varies with your intent. I'll do my basics, including links color/control, background positions, and the scrollbar. Gotta love a colored scrollbar (for ie, anyway). I don't seem to have the patience and not O.C.D.-ness to do the font manipulations, so I'll leave you to look that up on other sites.

So, without further adieu, let's dive in, shall we?

Links
We'll start where I start. There's a:link, a:visited, and a:hover that I bother with. a:link is the active link color, a:visited should be fairly obvious as visited links, and a:hover should also be fair obvious. There's a whole slue of things you can do for each of these options, but for now I'll stick with colors and underlining.

<html>
<head>
<title> </title>
<style>

</style>
</head>

Easy, right? You fill the #rrggbb in with your chosen hex colors, or something simple like {color:red;} if you're not into the hex thing yourself. The next part is the text-decoration, which is simple once you know what it is. You can say bold, italic, underline, overline, and line-through...to name few. Granted, I've never done the italic one myself. Marking it as none means it will read the same as the rest of your text with the different colors.

My html section is all using the same style sheet, which reads something like this:

<style>

</style>

Granted, I use the relative link...thingy that I'll show later after we get our style sheet in a more complete form.

Another fun option is to use a filter. There are some good ones, like glow, or drop-shadow. Let's implement some of these.

<style>


For something like this here.

Blur isn't as pretty.

a:link {filter:blur(Add=1,Strength=5,Direction=135); height: 0;}

You get something like this. It's hard to tell the difference...at least, not as obviously as Glow.

Here's one I've never played with before. Wave

a:link {filter:wave(Add=1,Freq=2,LightStrength=20,Phase=45,Strength=3); height=0}

And to quote from my source (that I'm not sure where I got it):

In this filter, Freq specifies the number of waves the filter makes, and LightStrength is a percentage value that specifies the strength of light on the wave effect.

Now for Shadow.

a:link {filter:shadow(Color=#003399,Direction=135); height: 0;}

Drop-Shadow:
a:link {filter:dropshadow(Color=#ff0000,Direction=180); height: 0;}

To get this.

The directions are:

0 top
90 right
135 bottom right
180 bottom
225 bottom left
270 left
315 top left

Now that I've gone way more into that than I actually planned, we should push right along.

From my links, I go into the body portion of the CSS tags. This is where you can control the background image, and the scrollbar specifically—I haven't dug anymore into what this portion can really do on my own because I generally find it faster to type it up as I go than to use trial and error to get what I want done. This is why I don't do the fonts here *grins*.

<html>
<head>
<title> </title>
<style>

</style>
</head>

The scroll bar is an example of my "copy and paste" that I mentioned before. My friend had typed this up from her CSS book, and I copied it from her file and saved it into my own .txt file. Most of my CSS is saved in notepad, and I actually use notepad to make my pages. I can't stand html generators because they make things messy and hard to find.

scrollbar-face-color:#rrggbb;
scrollbar-arrow-color:#rrggbb;
scrollbar-track-color:#rrggbb;
scrollbar-shadow-color:#rrggbb;
scrollbar-highlight-color:#rrggbb;
scrollbar-3dlight-color:#rrggbb;
scrollbar-darkshadow-Color:#rrggbb;

That's the code. The face color is the sliding part of the scrollbar, the top-most layer, as it were. The arrow color is the arrows in the corner. The track color is the bottom part. The shadow color is the outer-edge of the "upper" portion. The highlight color is the inner edge of the "upper". The 3dlight is the lower inner-edge, and that leaves the darkshadow to be the lower outer edge. If you make it all one color, it's kind of hard to see, but if you mix it up some, it can be good.

This is the current coding:

scrollbar-face-color:#000000;
scrollbar-arrow-color:#0000aa;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#95c9ff;
scrollbar-highlight-color:#00509f;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-Color:#0080ff;

That, and the background color, are all I have in my style sheet for this section, but if you want to manipulate a background image, it'd go in the same tag-set. Oh, I should show what this part should look like, huh?

BODY {scrollbar-face-color:#rrggbb;
scrollbar-arrow-color:#rrggbb;
scrollbar-track-color:#rrggbb;
scrollbar-shadow-color:#rrggbb;
scrollbar-highlight-color:#rrggbb;
scrollbar-3dlight-color:#rrggbb;
scrollbar-darkshadow-Color:#rrggbb;}

So, the background image. The coding for this is also very straightforward. There's position, which is where you want it on your screen, there's repeat, which is if you want it to tile, like this background, show up once, or repeat vertically or horizontally. You can add in the URL for your image in this portion, and make the bg-properties fixed. (Personally, I do that in the <BODY> tag).

The background things go inside the BODY brackets, either above or below the scroll-bar code, though I suppose you could mix it up, but then you have to think to do better editing.

BODY{background-position: 0 0;
background-repeat: repeat;
background-image: url('http://yourimage.bmp');
background-attachment: fixed;}
-->

The background position is placement on the x and y axis...X being horizontal, y being Vertical. More specifically, the first number the y and the second is the x...I think. You can do it in specific pixel amounts, or in percentages. Say, if you want it in the bottom right corner, that'd be background-position: 100% 100%; 50% 50% would be the center...and 0 0 would be the top left. I probably didn't need to reiterate it like that, but I'd like to be able to read it and not think "WTf?" or something, so there we go.

Background-repeat is, as I said, if the image repeats or not. After setting the position, you can decide if you want it to repeat-y, repeat-x, or no-repeat.

The attachment being fixed means the background stays stationary, which is good if you don't want it to scroll off screen on a longer page...and I like the look of the table moving along the background independently from it, so yes.

hm...

<html>
<head>
<title> </title>
<style>

</style>
</head>

You can replace the #rrggbb with your own hex codes, or you can type in the simple "red", "blue", "Green", "cyan"...or whatever. The 0 0 can be changed in pixels or percentages, the repeat part has the options: no-repeat; repeat-x; or repeat-y; ...I think that covers that part...so with this done, we can talk about the relative style sheets.

If you've been reading all of my html lessons here, you may have noticed that the scroll-bar and link colors are the same. I don't have the background on all the lessons, because...well, if that background shows up, it means is my lesson. Liz did the main of the lessons, and Calethos did the frames lesson...but I did my entire site on my own...and it was a lot of copy and pasting, lmao.

At any rate, what you do for your relative style sheet is to take the style sheet:

<style>

</style>

And save it as a .css file. I use notepad to do it, and am actually making this entire page in notepad...so it makes a bit of sense.

For every page that you want to use that style sheet you insert the code:

<link rel="stylesheet" href="yourname.css" type="text/css">

Between the head tags.

<html>
<head>
<title> </title>
<link rel="stylesheet" href="yourname.css" type="text/css">
</head>

...like so. Actually, if you're storing your style sheet in another folder, you'll need to type in the full URL and note just the name, but I tend to keep my .css files in the folder they're being used in.

And here ends my CSS lesson. I've explained that I can't get the font stuff to work properly, right? There are plenty of sites out there to get that information on, and you'll probably get what it's supposed to mean, lol. I, however, will stick to my nice way of getting it done until it doesn't get it done any more. I'm off to my life now...or bed, since it's after midnight, but I hope my things here helped.

~Kye

kyeian@hotmail.com HTML Home Home