Web designers use bullet lists for more than just adding bullets and text. The HTML tag used to create bullet lists is handy for creating menus or organizing images for a JavaScript to load into a slideshow. Learning to use cascading style sheet code in conjunction with bullet lists -- called "unordered lists" in HTML slang -- will open up several exciting Web-design possibilities.
Step 1
Open your HTML file containing the bulleted list and look between the
and tags toward the top of the code. Add tags if they are not already present. If your code includes a tag somewhere after the tag, and that contains a reference to a CSS file, then open up that file instead. Your CSS code goes between the tags or on a new line of your CSS file.Video of the Day
Step 2
Align the text within all bullets by setting "text-align" for your
- tag. The
- and tags to define them as part of a single list. When you align text for the
- tag wraps around the
- tag, the alignment affects text in every bullet but does not align the list itself to the left or right of the page. Here is an example of CSS code to set "text-align":
ul {text-align: right;}
Note that the bullets do not move with the the text. The bullets stay to the left in this case.
Step 3
Align the entire list to the left or to right of the page by setting "float" for your
- tag. When "float" is set to left or right on a
- tag, it moves the entire bulleted list to the left or right of the page. Set float like this:
ul {float: right;}
You can set "float" to the left or the right, but not to the center.
Step 4
Wrap your
- tags in
- List Item
- List Item
The