Learn About CSS List Style: Learn To Remove Bullets From Ul

🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

Home| CSS | CSS Element Styling| Lists Master Properties for the CSS List Style: Make Your HTML Lists Unique Reading time 4 min Published Sep 15, 2016 Updated Oct 2, 2019

TL;DR – CSS list-style lets you control the list marker position and style.

Contents

• 1. CSS List Style: Main Tips
• 2. Styling Lists With CSS
• 3. Item Markers
• 4. Image Marker
• 5. Marker Position
• 6. Colors
• 7. Borders
• 8. CSS List Style: Useful Tips

CSS List Style: Main Tips

• HTML has two types of lists: ordered and unordered.
• CSS list-style customizes lists to match web designs, or makes lists more noticeable.

Styling Lists With CSS

Ordered and unordered lists look like this:

Example of ordered lists:

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

Example of unordered lists:

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

• ordered lists (<ol>)
• unordered lists (<ul>)

Setting the list style with CSS is useful as you will be able to organize and style information.

• The information is easier to follow;
• The information is easier to remember;
• Readers prefer short sentences over blocks of text;
• It makes your text more dynamic.

Note: ordered lists have numbers or letters while unordered lists have bullet markings.

Properties for CSS list-style give you full control over:

• The appearance and position of the markers.
• The layout of lists.
• Background colors.
• Additionally, you can use images as your markers or remove them altogether.

Using list-style Shorthand

The list-style shorthand sets three individual CSS lists styling properties in one declaration:

Example Copy ul { list-style: square outside url("check.png"); } Try it Live Learn on Udacity

Property	Description
list-style	Shorthand property which allows us to determine all individual properties in one declaration
list-style-image	Defines the list item marker as an image
list-style-position	Defines the list-item markers position
list-style-type	Defines the style of your marker

Note: if you skip properties in the declaration, they will have their initial values.

Item Markers

The CSS list-style-type property determines the way markers on ordered and unordered lists look. Their values are indicated using keywords (disc, circle, square, decimal, etc.).

Note: the color of markers is the same as the element it is set.

1. Dog
2. Cat
3. Mouse
4. Rabbit

• Dog
• Cat
• Mouse
• Rabbit

1. Dog
2. Cat
3. Mouse
4. Rabbit

1. Dog
2. Cat
3. Mouse
4. Rabbit

This example sets the CSS list-style-type property with four values:

Example Copy ul.ba { list-style-type: square; } ul.aa { list-style-type: circle; } ol.da { list-style-type: lower-alpha; } ol.ca { list-style-type: upper-roman; } Try it Live Learn on Udacity

The list-style-type property accepts the following values as well:

• custom-ident — sets an identifier equal to the value of @counter-style.
• symbols() — sets an anonymous style of lists.
• string — the string will be used as the marker.
• none — there is no marker.

Tip: there are many other predefined markers that you can apply. For instance, there are markers for traditional Hebrew, Georgian, Chinese numbering, etc.

Making CSS Remove Bullets

It is possible to remove bullets from ul lists by setting the CSS list-style-type property to none. As a result, the bullets disappear from the list.

Example Copy ul.ba { list-style-type: none; } Try it Live Learn on Udacity

Note: to get rid of the automatic indentation, you can also set margin and padding to 0.

Image Marker

Custom markers with CSS for list styles include images. Usually, the list-style-image property has an URL address of an image as the value.

The following example has a unique image set as the marker of an unordered list:

Example Copy ul { list-style-image: url('check.png'); } Try it Live Learn on Udacity

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Marker Position

The list-style-position property sets the position of the marker. The property accepts two values:

• inside — the marker appears inside the items of lists.
• outside — the marker is outside the items of lists.

This example positions the markers of an unordered list outside:

Example Copy ul { list-style-position: outside; } Try it Live Learn on Udacity

Colors

You can make your CSS list style unique by using the background shorthand property with padding and/or margins.

• Dog
• Cat
• Mouse

1. Dog
2. Cat
3. Mouse

Specifications in the <ul> or <ol> elements affect the whole list. Therefore, you can separate backgrounds of the whole list and individual points.

This example assigns different styles of color and layout to two lists:

Example Copy ol { background: #5f56d5; padding: 15px 15px 15px 5px; } ul { background: #5f56d5; padding: 15px 15px 15px 5px; } ol li { background: #ea3a53; padding: 5px; margin-left: 30px; } ul li { background: #ea3a53; padding-left: 5px; margin: 5px 5px 5px 30px; } Try it Live Learn on Udacity

Borders

You can enhance the list style with the CSS border shorthand or a longhand of each side.

• Rose
• Tulip
• Daisy

Tip: borders help to separate points. Borders can be in a box shape and contain all four walls or on, two or three walls.

This example adds a purple border on the left side of the list:

Example Copy <!DOCTYPE html> <html> <head> <style> ul { border-left: 6px solid #5e37bc; background-color: #b495c9; color: white; list-style-type: circle; padding: 11px 21px; } </style> </head> <body> <ul> <li>Dad</li> <li>Mom</li> <li>Sister</li> </ul> </body> </html> Try it Live Learn on Udacity

This example separates each point of the list:

Example Copy <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; padding: 0; border: 2px solid #c141f4; } ul li { padding: 10px 18px; border-bottom: 2px solid #417ff4; } ul li:last-child { border-bottom: none; } </style> </head> <body> <p>Bordered list with full width:</p> <ul> <li>Mom</li> <li>Dad</li> <li>Sister</li> </ul> </body> </html> Try it Live Learn on Udacity

CSS List Style: Useful Tips

• CSS3 introduced many predefined markers, but the majority of browsers do not support them.
• By using the CSS list-style shorthand, you can produce shorter and more easy-to-read code.

Previous Topic Next Topic

CSS

Tutorial CSS3 Features Syntax Classes ID Selectors Attribute Selectors Stylesheets Inline Internal External Box Model Children Selectors Pseudo Classes Pseudo Elements Variables Counters

CSS Typography

Text Fonts Web Fonts

CSS Backgrounds & Colors

Backgrounds Background Images Colors Gradients

CSS Effects

Opacity / Transparency Shadow Effects Transitions Tooltip Transform Animations

CSS Layout

Layout — Display Layout — Position Layout — Float Layout — Clear Layout — Horizontal & Vertical Align Multiple Columns

CSS Responsive

Introduction Responsive Web Design — Viewport Responsive Web Design — Grid View Responsive Web Design — Media Queries Responsive Web Design — Flexbox Layout Responsive Web Design — Images Responsive Web Design — Videos

CSS Element Styling

Borders Margin Padding Width Height Outline Links Lists Tables Dropdown Menu Navigation Bar Images Image Gallery Border Images Forms Rounded Corners Buttons Box-Sizing

CSS References

Selector Reference Pagination Examples Code Examples CSS3 Browser Support Reference Functions Reference Speech Module Reference Units Web Safe Font Combinations Cheat Sheet

CSS Properties

:hover @font-face @keyframes @media align-content align-items align-self all animation backface-visibility background background-clip background-color background-image background-origin background-position background-size border border-image border-radius border-style box-shadow box-sizing color columns filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap font font-family font-size font-size-adjust font-stretch font-style font-weight hanging-punctuation justify-content line-height margin offset opacity order outline overflow padding perspective position resize tab-size text-align text-decoration text-emphasis text-transform text-shadow transform transition-property translate vertical-align word-break word-wrap z-index

Best-rated MOOCs to Learn Programming:

9.8 Read review 9.6 Read review 9.4 Read review

Related Posts

A Sorted List of CSS Code Examples: Master Styling HTML Elements

Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more. Discover many CSS examples in this comprehensive CSS code example list.

16 min read

Create a Vertical or Horizontal CSS Navigation Bar Easily

CSS menu: how to style with CSS navigation bar easily? Learn to create a pure CSS navigation bar, style the menu and more from our examples.

5 min read 16 examples

A Source of Beginner-Friendly CSS Pagination Examples

Learn about CSS pagination from a huge list of CSS pagination examples to choose from. Using real pagination examples for you to learn easily.

4 min read 10 examples

Related Code Examples

CSS

CSS Forms. Example #5

CSS

CSS Buttons. Example #2

CSS

CSS Forms. Example #7

CSS

Setting Horizontal Navbar

CSS

Dropdowns Aligning to Right

CSS

CSS Forms. Example #2

EXCLUSIVE OFFER: GET 25% OFF

Save Big With DataCamp Promo Code Days Hours Minutes Seconds GET 25% OFF