Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

How to Style Bullet Lists with CSS

You may want to style your odd and even line items with different colors to make them easier to read. For that, you use the n-th type. But one of the most used cases for styling list items is to convert a vertical list into a horizontal list in a navbar. For that you use display:inline.

How To Remove the Dots From Bullet Lists

There may be times when you want to create a list but you do not want the dots to appear. One example of when you might use this is when you use a list to define items in a navigation menu. To remove the dots from your bullet list simply add this line of code in your CSS file.

HTML

html bullet list ordered and unordered

CSS

css styling lists

RESULTS

example css styling hyperlinks

NOTES

To remove the "dots" you need to add some CSS to your code. See the code in the CSS block. - Here is the CSS: #noDots{list-style-type: none;} I used a unique ID for the UL tag because I did not want to remove all dots on all the pages. I only wanted to remove the dots on my second bullet list.

How To Style the nth line in a Bullet List

There may be times when you want to create a list but you do not want the dots to appear. One example of when you might use this is when you use a list to define items in a navigation menu. To remove the dots from your bullet list simply add this line of code in your CSS file.

HTML

html styling lists with class id

CSS

css styling with class id

RESULTS

example styled lists using css

NOTES


In addition, to select first-child, last-child, and nth-child and putting a number in parenthesis, you can also use "odd" and "even".

How To Style Bullet List Horizontally

There may be times when you want to create a list that will display horizontally. This is often done when creating a navigation bar.

HTML

html style unordered list

CSS

css style unordered list

RESULTS

example styling hyperlinks

NOTES


By default, all lists are vertical. Since you might have several different lists on your page, you want to avoid styling all list items at once. That's why instead, we wrapped the bullet list that we want to be horizontal with a nav tag and then included nav in the CSS definition.

How To Style Bullet List with Images instead of Dots

You can really customize the look of your lists by adding custom images in place of the default dots. Here is the code to do that:

HTML

html style hyperlinks

CSS

css style hyperlinks

RESULTS

example styling image links

NOTES



Remember to make a list horizontally using display: inline! Did you know you can add images to a list? Yes! You can. You can then wrap a link around the image to make it clickable..


Make sure you are able to create an ordered and unordered bullet list before moving ahead. Also, try removing the bullet "dots". Then try creating a bullet list with navigational links displayed horizontally.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved