|
|
Tutorial #14:
|
If you're having a little bit of trouble with CSS in Netscape Navigator 4.x browsers, then this is the tutorial you want! It is like CSS, so you shouldn't have too much trouble.JSS looks weird when you see it, but with a little explanation, it will seem very easy. JSS (JavaScript Style Sheets), like I said, can be used, in the Netscape Navigator 4.x browsers. This means that anything from NN 4.0 to 4.9. It may work in other 5.x browsers, but I wouldn't know, because I have 4.7. However, I don't use it, because 20m doesn't support it. Setting up JSS is a lot like setting up CSS. It goes in the header of your HTML file. Take a look...
Your JSS stuff goes here... </style>
I really don't think that needs much explanation, since I'm assuming you've taken my CSS tutorial. So, let's cut to the chase! First things first. In CSS, you learned about font-size, font-family, etc. In JSS, it is written in a JavaScript syntax. fontSize, fontFamily, etc. It is like that for just about all of the JSS properties. Here's how to define a selector. Remember what those are?
tags.h2.fontSize = "20pt"; </style>
I told you it was a little different, didn't I? tags states that an HTML selector is coming up. h2, or whatever selector you select (ha ha), comes up next. Last in this example, The property you want to change is stated, and then you have you = " ", just like in HTML, then at the end, a semicolon. Now I bet you're asking: What if I want to set up more than one property? Then, you have to do this:
tags.h2.fontSize = "20pt"; with (tags.h2) {fontWeight = "bold"; fontFamily = "Arial";} </style>
Although this looks a little weird, it is easy to follow. You defined tags.h2, so everything else is going to be with that, and then, the other definitions are defined in kind of a JavaScript-CSS mix. Now, I'll show you how to set up IDs and classes. IDs are easy. They are the same as defining a selector, except that instead of typing tags.h2 or whatever in, you type in ids.idName. Also, wherever you want to call it up in the body, you need to put this in: <span (or div, whichever) id="idName"> Classes do the same thing with div and span, except that in the header, it would look like this: classes.className.all.fontSize = "20pt"; with (classes.className.all) {fontWeight = "bold"; fontFamily = "Arial";} </style>
You see? That all is stuck in there. And, like I said, when you want to call it up, do this: <div (or span) class="className"> One last thing I am going to show you is calling up an external JSS file. It's easy, but 20m doesn't support it, so I can't use it. Here goes... <style src="filename.jss" type="text/javascript"></style> So, if you take in interest I hope this got you started. Close out this window to return to HTML Central. |