How to Create Bars With CSS
Cascading Style Sheets (CSS) are an ideal way to create elements, such as bars, for your Web pages because you do not need to have images to create these components and CSS gives you more control over how these features look on your page. Using CSS in alliance with your HyperText Markup Language (HTML) code, you can create bars on your website for use as decorative dividers, chart elements or any other type of page feature that can use them.
Other People Are Reading
Instructions
-
-
1
Launch your text editor and open a web page.
-
2
Find the "<head></head>" section in your HTML code and type the CSS entry between these elements as follows:
<style type="text/css">
<!--
{ }
-->
</style> -
-
3
Enter a "hr" before the curly brackets to create a placeholder for the horizontal rule in your page (for example, "hr { }"). The "hr" element automatically creates a line in your code and using CSS, you style this tag into the bar that you need.
-
4
Type in "background-color," "height" and "width" values to determine how the bar looks. To make a vertical bar, enter a greater number after the "height" attribute in percentage (%), points (pt) or pixels (px); otherwise, type in a larger number after the "width" entry. For example, to create a horizontal bar that is 20 pixels high and 200 pixels wide, enter the following:
hr { background-color: blue; height: 20px; width: 200px; }
-
5
Enter a "float" descriptor and type in a "left" or "right" value to determine where your CSS bar appears on the page. For instance:
hr { float: left; background-color: blue; height: 20px; width: 200px; }
-
6
Use your Web browser to preview your file and then save your page when done.
-
1
