CSS Tricks

Below you will find a collection of simple, but effective, CSS tricks you can use on your webpages.

The first thing you need to know is that in HTML everything is treated as a block. So when you put a border around some text or apply a background colour it will appear as a block.

All the css on this page will be used inline. This means the CSS will be written into a tag rather than specified in the head section (internal) or an seperate page (external).

Borders

Ok lets start with some nice, easy, borders.

solid & black dashed & red double & blue grooved & purple ridged & orange

So how do you do it?
Well here is the code for the solid & black border:

<span style="border: 1px solid black;">solid & black</span>
As you can see it's not that hard. We simply place the style attribute into the tag. We then specify that we want to set the border property. We then use a : to tell the browser that we have specified the property and are now going to set the attributes. We then specify our size, style, and colour then we use a ; to tell the browser we have finished our attributes. For the size you can set it in pixels (px) or use thin, medium, or thick. You can specify the colour using a hex value if you wish (#FF00AA etc) although you do not have to specify a colour nor do you have to specify a size but it iss good practise to set the size.

Three other border styles available to you are dotted, inset, and outset. Internet Explorer builds 4 and 5 do not support the dotted and dashed borders while Netscape 4 doesn't recognise the border property at all. Internet Explorer 5.5 and later and Netscape 6 and later support all border styles.

Colour

Ok so how about hilighting some important text?

The above was achieved by placing the "important text" text in a span tag and setting the style. The HTML I used was this:

<span style="background-color: yellow;">important text</span>

For a more dramatic effect you can specify both a background colour and the text colour. For example:

THIS IS IMPORTANT!

The above effect uses the same CSS as is used to hilight the snippets of code in the tutorials. The CSS in question is:

<span style="background-color:blue;color:white;">THIS IS IMPORTANT!</span>
By know you should be understanding how to use the style attribute and as you can see the property names used in CSS are quite simple. In this case we specified that the background colour be blue (background-color: blue;) and that the text should be white (color: white;). You will note that, as already stated, you use a ; to mark the end of a properties attributes. You could also use an image for the background. In which case you would use:
background-image: url(path/to/image.jpg);

Styled Scrollbars

If you use Internet Explorer as your web browser then I'm sure that you will of noticed that some sites have coloured scrollbars. The styled scrollbar is a Microsoft innovation and at present is only support by Internet Explorer 5.5 and over and Opera 7.

Here's the CSS you I used to style this sites scrollbars in the past:

<style type="text/css">
<!--
scrollbar-3dlight-color: #5F9EA0;
scrollbar-arrow-color: #00686B;
scrollbar-base-color: #FF0000;
scrollbar-darkshadow-color: #33B7B7;
scrollbar-face-color: #33B7B7;
scrollbar-highlight-color: #00686B;
scrollbar-shadow-color: #00686B;
scrollbar-track-color: #33B7B7;
-->
</style>
You would place this bit of code into the HEAD section of your pages HTML. You can use color names such as red and blue if you wish. I wont try to explain what each part changes but with some trial and error you'll soon figure that out. The <-- and --> are just to hide the styling from older browser that do not support CSS. As I have already stated not all browsers support styled scrollbars, but those that do not will just ignore these properties so you don't have to worry about it affecting your site on other browsers.

Internet Explorer 5.5 and later Only

As the sub heading says this section is for tricks that only work on Internet Explorer 5.5 and later. As well as styled scrollbars Internet Explorer 5.5 introduced filters. Here are some examples of filters in action and the CSS used.

Glowing Text
style="width: 90; filter: glow(color=#FF0000,strength=3);"
Dropshadow
style="width: 82; height: 20; filter: dropshadow(Color=purple, offX=3, offY=2);"
Blur
style="width: 30; filter: blur;"
shadow
style="width: 30; filter: shadow(strength=2);"
wave
style="width: 30; filter: wave(strength=2);"

If you have Internet Explorer 5.5 or over you can see them in action HERE

As you can see each filter has different properties you can set. Some let you set a colour, others let you set the strength of the effect, dropshadow lets you specify the position of the shadow using offx (offset x, horizontal) and offy (offset y, vertical). You can even use two or more filters at the same time. For a more detailed explanation of filters goto www.webreference.com/js/column68/index.html.

Play with what I have shown you. You're not going to break a browser by messing up some CSS but you may discover some nifty tricks you can do.



Concerned about phishing or want to know more about it? Then read our fake logins page.