How to Make a CSS Banner
Banners are images that you create and insert on a Web page, but you have the option to use Cascading Style Sheets (CSS) instead. With CSS, your banner will be a smaller file size, leading to faster page-load times. A CSS banner also gives you the ability to quickly modify the design elements by editing the code. Use your computer's text editor to build a CSS banner.
Other People Are Reading
Instructions
-
-
1
Launch your text editor program and open the website file. Place the cursor in between the <head> tags.
-
2
Enter this CSS code before the closing </head> element:
<style type="text/css">
#banner { }
</style>
The "#banner { }" between the style tags begins a distinct rule that builds your banner.
-
-
3
Type the following attributes between the curly brackets: "width," "height," "font-size," "font-family," "padding," "background-color" and "border-style."
-
4
Enter number values in pixels (px) after the "width" and "height" to specify the desired banner dimensions. The code should look like:
#banner { width: 500px; height: 300px; }
-
5
Type a pixel value after "font-size" and enter a font-family to determine how your banner's text appears. Enter a padding value to establish the amount of space that appears between the text and banner border. For example:
#banner { font-size: 24px; font-family: Arial, Helvetica, sans-serif; padding: 10px; }
-
6
Enter a hexadecimal color value after "background-color" to determine the shade. Type a pixel size, line style and color value after "border-style" to specify how the outline around the banner displays. For instance:
#banner { background-color: #ffff00; border-style: 2px solid #cccccc; }
-
7
Position your cursor in the HTML code where you want your banner to appear and type the following to insert it on the page:
<div id="banner">
Enter CSS for banner here
</div>
-
8
Save your file.
-
1
Tips & Warnings
Separate each CSS attribute with a semicolon to ensure the styles work. For example:
#banner {
width: 500px;
height: 300px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
background-color: #ffff00;
border-style: 2px solid #cccccc;
}
References
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
