Are you bored with those old, gray buttons and text boxes? I bet you are! Well, why not change them? It's easy with Cascading Style Sheets, new from the W3C.

Does that sound like some cheesy ad on local radio? Sorry.... It's true though, it is very easy to make your pages look a little different and, dare I say, professional.

This article is mainly in response to the mails I get asking me how I make the buttons and input boxes look so "professional" (Seems silly to explain it in every reply when I can do it once here). The answer is using CSS. Don't get scared though as it is, as I said earlier, easy.

In the case of the fields and buttons I simply add the following CSS to all pages:

INPUT {
color: #808080;
background-color: transparent;
font: bold 8pt verdana;
border: 1px solid #808080;
}

What this does is tell the browser that ALL elements of type INPUT should inherit these styles. In my case I have the first line also include other elements that I want to look similar:

INPUT, TEXTAREA, SELECT {


Notice, that buttons are not included in this line. That is because your standard 'button' is actually an Input HTML element where type='button'.

All we need to do now is plug this in to all our pages. How do we do that though? There are various ways but I prefer to use a .css file (R5 users read Page). First create a Page called 'global_ie.css' that is "Treated as HTML" and add your CSS to it. Now, in the head of your forms ($$HTMLHead field or equivalent) add the following formula:

bt := @If(@BrowserInfo("BrowserType")="Microsoft"; "ie"; "nn");
db := @ReplaceSubstring( @Subset( @DBName; -1); "\\"; "/");
"<link rel=\"stylesheet\" type=\"text/css\" href=\"/"+ db +"/global_"+ bt +".css\">"

Notice that there is also a need for a page called 'global_nn.css'. This is becuase Netscape is next to useless and supports almost none of these nice styles. If you were to redefine input elements using CSS and use it with Netscape there is a side-effect where little boxes appear here and there. Wierd (and annoying - sort it out Netscape!).

Using this method of redefining the look of HTML elements there are almost no limits as to what is possible. Too much to even touch upon here. Let's look at one example though - say we want all links to be in UPPERCASE (have you noticed they already are on this page?). All we need do is redefine the Anchor <a> element.

A {
text-transform : uppercase;
}

Hey presto!

If you want to get to know CSS is more detail then I would recommend firstly buying the Dynamic HTML book and then investing in TopStyle, shown below, which takes some pain out of the syntax and testing.