How to Do a CSS Vertical Bar
CSS, or Cascading Style Sheets, is used to tell browsers how to display HTML elements. CSS can be stored externally from HTML and uses section names to determine which styles go with each section. This saves time because Web developers can change the look of a site completely by changing this one file. Incorporating a CSS vertical bar into your site can be done one of two ways.
Other People Are Reading
Instructions
-
Using a DIV Section
-
1
Open the Web page into which you wish to add the vertical bar.
-
2
Add a div section called "vbar" to the appropriate location using the following tag:
<div id="vbar" </div>
-
-
3
Save the file.
-
4
Open your CSS file. Add a section to the CSS file with attributes for the vertical bar section, as follows:
#vbar {
width:?px;
height:?px;
background-color:#??????;
}
Substitute the question marks for the appropriate values. For example, height and width should be listed in pixels using a format like 10px. Background color should be listed using a six-digit Web-safe hex value, such as #000000 for black or #FFFFFF for white. Visit the CSS Colors link in the "Resources" section for more hex colors.
-
5
Save the file.
Using a Section Border Attribute
-
6
Open your CSS file.
-
7
Add a border attribute to the section of your page that is adjacent to the location where you want your vertical bar. For example, if you have a "container" section that is to the left of where you want to add your vertical bar, add a border-right attribute to the section in order to create a right border.
#container {
border-right:X;
}
See the "Tips" section for different border attribute options.
-
8
Save the file.
-
1
Tips & Warnings
The "border" attribute can be used to determine the border width (#px, where # is replaced with a number) style (solid, dotted, dashed, double, ridge, groove, inset, outset) or color (#??????, where the question marks are replaced with numbers to indicate Web-safe colors).
For example:
#container {
border-right: #333333 3px solid;
}
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
