Most people, when they wish to use a banner as their page's heading or title, have to use an image. These images are large in both dimensions and file size, so they slow down the page's loading considerably.
Using a style sheet banner, you can have a beautiful different banner in every page, using the same graphics, so they won't have to be reloaded, or even without any graphics.
Before going any farther, I must note that there is an alternative way without style sheets: with a table, which is compatible with older browsers. I personally prefer the style sheet one.
Banners with Tables
In this way, you simply enclose your page's heading in a table. You can control the font size or style, the text and background colors, or even add a background image. All this is done with HTML.
Two examples (open a new page, then come back):
You can copy the source text. Just bear in mind that the path for the background image is valid only for my site. If you want to use a background image, you must copy it to your computer and edit the path accordingly.
Also, enclose each table in the -h1- or 2 etc. tags, so that it will be recognised as a heading.
Disadvantages:
- The HTML used is version 3.2 (which is the reason this page's HTML will not validate), while the current standards require 4.01. As a result some of the tags used are deprecated, which means that they might not be supported by newer browser versions.
- This way is not as versatile as the style sheet one; you cannot change the border style (and even more things in future versions of style sheets).
Still, it is easy, does not load page sizes unnecessarily and is compatible with older browsers.
Banners with style sheets
In this way, you use an embedded or linked style sheet (have a look at my border style page ). It is preferable to use a linked style sheet, because then all your pages will have a consistent look; also you need only edit the style sheet once to change the look of all your pages
Some examples: banner 1, banner 2, banner 3.
You can save the example files (right click for a pc or click and hold for a mac, then choose from the menu -save link or target as..- ) and play around with the settings to your heart's content. You can also make your own web pages from them. Just change the title, the -h1- and the body text. Edit them with a
plain text editor
(like the windows notepad; view source from Interent Explorer in Windows opens Notepad).
Also, if you want to use an
image
as a background, you must edit the path of the -background url- to reflect an image that is in your hard disk or your web site.
For an explanation of the various values for borders see my ruler style page.
For an explanation of the various values for colors see my hex color page.
To make a separate linked style sheet, open any example file with a text editor and delete anything outside the <style> </style> tags; also remove the tags themselves, and save the resulting file as something.css. If it becomes .css.txt, rename it to change it to -.css. Then link it to your web page as you will see in my border style page.