Simple Logo Creation with CSS

The logo at the top left of this page is a graphic image. This adds to the overall size of the page as is the case with all graphic images.

The alternative logo below is not a graphic image but is instead done entirely using stylesheet commands. This means that the below logo is much smaller in actual size than the one above and will download much faster. The only down side to this is that it relies on the browser understanding stylesheet commands in order for the logo to display properly which means that it will display slightly differently on each different browser and will display as plain text on older browsers that don't understand stylesheet commands.

Ask Felgall
Computer Help from Felgall Pty Ltd

The code that I used to create the above logo is as follows:

<div style="background-color:#ffffcc; border-style:outset; border-color:#9999cc; border-width:7px; width:200px; color:#000099; font-weight:700; font-family:georgia,serif; font-size:28px; text-align:center;">Ask Felgall<br /><span style="font-family:verdana,sans-serif; font-size:9px;">Computer Help from Felgall Pty Ltd<br />&nbsp;</span></div>

As you can see, most of the code is the stylesheet commands and the actual text to be displayed is only a small part of the overall content. You can of course change just about all of the values entered so I will now run through what each of the individual statements does.

Experiment with different values for the various parameters and check out the results on different browsers and you might soon find that you have a CSS based logo for use on your web pages.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow