	Sign In Sign-Up

Welcome to the Tactical Panda Websites CSS Pages

Tactical Panda

Cascading Style Sheets (2)

More Specific CSS

You can detail the way you want the fonts to behave on the page by being more specific about what you want to see. Here is an example of what I mean:

font-weight: medium;
font-style : normal;
font-size : 12pt;
font-color : #000000;
font-family : Verdana, Arial, Helvetica}

The above coding can be used instead of the line:

body,td { font-family: verdana, arial, helvetica; color: #000000; font-size: 12px; }

...but is obviously more 'focused' on what you want. CSS can also dictate the heading commands (<H1>, <H2> etc), like this the examples below. Headings are normally red (#FF0000), but you can have them any browser-safe colour you want.

H1 { color : #FF0000;
font-weight: bold;
font-size : 18pt;
font-family : Verdana, Arial, Helvetica}

H2 { color : #FF0000;
font-weight: bold;
font-style : normal;
font-size : 14pt;
font-family : Verdana, Arial, Helvetica}

So the entire code now looks like this (assuming you include them all):

H1 { color : #FF0000;
font-weight: bold;
font-size : 18pt;
font-family : Verdana,Arial,Helvetica}

H2 { color : #008000;
font-weight: bold;
font-style : normal;
font-size : 14pt;
font-family : Verdana,Arial,Helvetica}
</style>

To show you what all this will do on this page, this is how the text will look:

This is the default text size and colour.

This is a size one heading (H1)

This is a size two heading (H2)

Coloured Buttons

So what about the final (seperate) line? The one that looks like:

<style>.forms {background:"#0000C0"; color:"#ffffff";}</style>

This is a really clever bit of scripting that helps me overcome the naturally ugly grey buttons on websites by colouring them. Let me explain. If you use a form on your pages, you will have a 'Send' and 'Reset' button somewhere on the page, otherwise the form won't work! It will look something like this:

Now I don't know about you, but I think they are ugly, so I colour them, so they look like this:

Isn't that better? I thought you may say that. To do this I start with the original coding:

<input type="submit" value="Click here to send"> <input type="reset">

Using the CSS code mentioned above, I add the words class="forms" to the coding so it now looks like this:

<input type="submit" value="Click here to send" class="forms"> <input type="reset" class="forms">

The browser now relates the CSS coding and every time it sees the coding class="forms" it knows it has to change the colour to blue (or whatever colour you choose), and the text colour to white (#ffffff), or whatever you want it to be. You can have green buttons, yellow buttons or red buttons if you want. Experiment with your website and see what is best for you.

By the way, did you click one of those buttons above? To add the alert message was easy. Here is the code:

<input type="submit" value="Click here to send" class="forms" onfocus="this.blur()" onClick="alert('I knew you would not be able to resist clicking me!'); return true">

Coloured Scroll Bars

One of the more popular additions to browsers has been colouring the scroll bars. This is only applicable to the latter versions of Internet Explorer at the moment, but no doubt they will blossom to other browsers sooner rather than later.

The coding I use in the <HEAD> section is:

The best thing to do is experiment! This website uses the colour #004080 (blue) a lot, so you can see that the scroll bar face is that colour. I have decided the track colour is to be the same colour, and the shadow colour is to black (#ffffff), with the 'shadow' colour to be white (#000000). The arrows at the top and bottom of the scroll bar are also white.

Basically, you can use any browser-safe colour that take your fancy! I wouldn't recommend you go too wayward with the colours otherwise you will distract the viewer! Keep it to the same basic colurs as your website for best effect.

[1] [2]