A Touch of Stylesheets
A Touch of Stylesheets
As with JavaScript, I’m familiar with how cascading stylesheets operate, but I’ve never put them to work on my Web sites. GoLive provides full support for CSS1, and even though the browsers still can’t display it correctly, you might as well see what’s possible.
As a simple example, I decided to remove underlining from all of the links on my site so users with the appropriate browsers (a browser-check script is included with GoLive’s other Actions, incidentally) will get uncluttered links that aren’t underlined.
To do this, I go to the Layout view of the page I want to attach the style to and then select the stylesheet button in the upper right-hand corner (it looks like a little staircase: 
). This brings up the Stylesheet Window, where I can define the various styles for my page.
There is an Internal and an External tab atop this window, letting me configure my stylesheets the way I want. (An external stylesheet is a separate document containing the styles, while an internal stylesheet is embedded in the head of the HTML file, like JavaScript.)
The toolbar mutates into the Stylesheet Toolbar, featuring a handful of buttons that will add new items to the stylesheet. All I want is to change how links appear, which means I need to apply a style to all <A> tags. So I press the New Tag button in the Stylesheet Toolbar (
), and this plugs a generic “newTag” into the Tags section of my stylesheet. Selecting newTag will make the CSS Selector Inspector (!) window appear, where I can rename this tag A.
Then I press the Font tab, which is where I can adjust font styles. I choose None from the Decoration menu, so everything that’s within an <A> tag will cease to be underlined – or have any kind of decoration whatsoever, aside from the standard link color that I established in the <BODY> tag.
By returning to the Basics tab, I see that GoLive has added “text-decoration: none.” This is what will appear in the source code, with the complete stylesheet looking something like this:
<style type="text/css">
<!-- a { text-decoration: none }-->
</style>
That’s all there is to it. Preview your page in a 4.0+ browser and all the links should be free from underlines, free and easy in their birthday suits the way nature intended. People looking at the page with old browsers won’t have any compatibility problems or anything; they’ll just have lines under the links. No big whoop.
CSS can do stuff that’s a lot more substantial, like positioning elements exactly where you want them and controlling the formatting of everything on your page – margins, indentation, overlapping text, etc. And all of this can be accomplished as simply as the underlining example. Now, whether the browsers will interpret your CSS1 code according to the W3C’s standards remains to be seen, but at least GoLive is ready when they are.
Comments