Zack

Over the next couple of weeks I will be writing a mini book about advanced css techniques that are desired on the 'net. Each week will come out with a new section of the mini book, for review, questions, and comments from the users here. Any fixes or questions will really help me accomplish this! This week will be the body tag (kind of short, since I only wrote it today).

All of the code provided is welcome to be taken, but you may not redistribute this content in any way without my permission. For now, this and Talkfreelance are the only forum I will be posting this on, so if you see it on another forum, please pm me. Thanks!

CSS Body Tags and Attributes

1.1) The body tag

There are many different uses for the body tag in CSS. You can alter backgrounds, fonts, margins, and more! I will go over the more of the harder aspects that the body tag can pose.


First, I will teach you how to have a fixed background (where an image in the background stays in the same place, even if you scroll!

…or if you want to use background-image…
This is the easiest way to accomplish this. You can change the no-repeat to repeat for the image to repeat indefinitely. You can also change the position from bottom left to top right, or some other mix of that.

A lot of people are confused on the difference of font tags. You have font-family, font-weight, and a couple of others, when you can have all of your font styles in one string. Compiling it into a single font: style will work just as well. Choose which one you think is easier.

…or you could just use the font style…

As you can see, using just the font tag is just as good as all of the other styles, but is easier to write and manage.

A lot of people aren’t aware of the wonderful things you can do with margins. In the body tag, it isn’t as useful as if you used it in a div tag, but it is just as important. Have you noticed that there is a 5px white bar around your page (unless you use margins)? You can stop that by making the margins 0 like so.
Basically, a margin is the space between the borders of the browser window, and your actual page. The default isn’t 0 in some browsers, which is why you may see a white bar around your page without setting the margins.

What if you wanted to change the cursor type for your website? This is really simple to do, with only one line of code in your body tag, like so…
That will make your cursor look like a crosshair when your cursor is on the page. Other possible values you could use are auto, default, pointer, move, wait, and help.

This covers most of the body tag attributes that you can do, our next lesson will be a bit more interesting.
HTMLGuy

__________________
yaxal releases '07

Zack

2.1) Menus
Link styling can be fun, and make your site look really good! You can add really cool special effects with them, and in this section, I will also go over how to make a vertical and horizontal menu using lists.

Basic link style markup (BLSM) - Here is what you can accomplish in seconds with links.

Basically what I just wrote was a link that was red (using color, with no text-decoration (such as underline, overline, or blink), 3px of padding (space around the object, in this case, a link), has a 2px blue border around it, and has a white background with the image linkback.png behind it, starting at the top left, and repeating.

Now I want to style what happens when I had already clicked that link on the page (visited), when I hover my cursor over it, and when I click the link. Here is how you do that...
...or if you want it so more than 1 link type is the same style...
That makes things a lot easier to use, with a lot less code, making it easier to change your code, if all of your links are desired to look the same.

Now that you know basic link syntax we will go over a basic rollover menu using small image files as a background (repeating in the background to create a unified background).

CSS:
HTML:

Doesn't that look nice and clean!? Anyway, basically what I made was a fixed width div, and styled some links like I showed at the beginning. Then I styled the ul and li. I didn't style the ul, because it isn't needed, since styling the li does it all. When I styled the li, I told the browser to show div navcontainer's, list items to display in one line, and have no list-style-type (if i wanted a bullet, I would write "bullet" instead of none, which doesn't display anything like that). That creates a great clean xhtml / css run menu (if somebody views your source, your menu for creating a rollover menu is 6 lines .

__________________
yaxal releases '07