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.
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 /> </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.
- background-color:#ffffcc; sets the background colour of the box that will form the main part of the logo
- border-style:outset; sets the border to give the appearance that the box projects forward from the page. With Internet Explorer the outer edge appears flat while the inner part of the border projects forward. With Opera, Mozilla, and Netscape the entire border will project forward
- border-color:#9999cc;border-width:7px; sets the width of the border to seven pixels and defines the base colour for the border. Since the border is outset the actual colours used will be slightly lighter and darker variants of the colour specified
- width:200px; sets the width of the box. You will want to adjust this value based on the actual content of your logo but allow some space on either side for when the logo is viewed on systems that default to a wider font
- color:#000099; font-weight:700; font-family:georgia,serif; font-size:28px; defines what colour, wight, family, and size that the text content will use. In this case I am using a relatively dark blue text (#000099), in bold (700) which will display in Georgia (or if that font is not present then in the system default serif font) with a size of 28 pixels
- text-align:center; aligns the text horizontally in the centre of the box (ie. equal spacing on both left and right)
- <span style="font-family:verdana,sans-serif; font-size:9px;"> sets the font family and size for the second line to be different from the top line
- <br /> inserts an extra blank line at the bottom of the logo so that the text does not collide with the bottom border
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.
