Creating a Web Site Banner Using CSS

Most web site banners are created using images. However images can slow the loading of your web pages and search engines don’t read images particularly if they contain text. Many sites often use images for navigation. This prevents search engines from spidering them.

Using CSS you can replace the images and get the added benefits of fast loading, search engine friendly pages.

How to create a text banner.

Place this CSS between the head tags on your web page:

<style type="text/css">
.box1 {
padding: 5px;
border-width: thin;
border-style: dotted dashed;
border-color: #990000;
font-family: Verdana, Arial, Helvetica, sans-serif;

Here’s the XHTML:

<.div align="center".><.br />
<.p align="left" class="box1".><.strong.>FREE<./strong> One Year Home Warranty
<.br /.>
<.strong>FREE<./strong> Home Inspection – Up to $400
<.br />
<.a href="".><.strong>For All Maryland and Virginia home buyers<./a><./p>

(remove the periods in the code above for the correct XHTML)

Here are css banners with different style borders (the first banner displays the code above).

Here are table banners to show how you can also use html tables to create banners without images.


  1. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  2. Ahok Subedi says

    it works!!

  3. Very efficiently written information. It will likely be worthwhile to anyone who usess it, including myself. Keep up the great work – for positive i’ll check out more posts.

  4. Hmm it appears like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your
    blog. I too am an aspiring blog writer but I’m still new to everything. Do you have any points for rookie blog writers? I’d
    definitely appreciate it.


  1. programming says:


    […]Creating a Web Site Banner Using CSS[…]…

Speak Your Mind