40 CSS List Style Examples
A carefully curated collection of the top free HTML and CSS list style code examples. These list style examples each contain unique designs, animations, effects, and colors that make them suitable for numerous web development applications.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An attractive CSS list style that has a minimal yet interesting shift effect upon hover. It was created using pure HTML and CSS.
Title:
Transform Skew Property And Nice List Styles
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This list style has a beautiful layout created using only HTML and CSS. When you hover over an item it will show the read more button with a smooth fade-in and sliding effect.
Title:
Checklist Animation — Only CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This beautifully designed CSS list style checklist template is created with pure HTML and SCSS. When you click on any list item, it will strike through the item with a smooth animation effect.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Beautiful list style created with only HTML and CSS. Produces an animated slide-in effect with vibrant color upon hovering on the list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Forbes leaderboard CSS list style created using pure HTML and SCSS. When you hover on a list item, it will pop up a list item with a decent animation effect. It has also given a nice shadow to list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A leaderboard with a list style layout created using pure HTML and SCSS. It has a gradient background with the color orange and red. It looks amazing and decent. When you hover on the list item, it will show a pop-up effect
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple yet beautiful gradient ordered CSS list style layout created using HTML and SCSS. It looks decent with the shadow effects in each list item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This to-do list style is one of a kind as it features a beautifully animated Terrarium. It was created using HTML, SCSS, and Javascript that blooms eventually as you complete your tasks
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A pure HTML and CSS list style that has a beautiful transition when a list item is hovered. Each list item field changes color and has a zoom-out effect on hover.
Title:
RemindMe App Concept(CSS Animations & Mobile)
Author:
Created on:
Made with:
HTML, SCSS, Javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a unique reminder list style created using HTML, SCSS, and Javascript that displays an animated timer and completion percentage of each list item. It also has speech commands and voice recognition that are done using Babel.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Pretty and useful checklist-style design beautifully created using only HTML and CSS. Changes the color of the field upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An animated to-do list created with pure HTML and SCSS that changes color to light purple when you click on the to-do item and also changes its icon with a smooth animation effect when you click on it.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Highly functional minimalistic CSS list style. Provides in-list dropdown options created using HTML and CSS
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A lovely to-do list created using HTML, SCSS, and JavaScript, this vacation to-do list uses a fading-in effect to indicate that the box is marked when you click on the item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This notepad CSS style list created using SCSS and Jquery actually gives you the feel of using a notepad with it’s amazing animations and styling.
Title:
Animation Loading Modules
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A CSS list style created in the form of a loading module. Creates a continuous animation of the prespecified list items with fade-in and fade-out effect that stops at the last item.
Title:
CSS-only Todo List Checkbox Animation
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive to-do list that uses HTML, CSS(Less), and JavaScript. When you click on the checkbox of a list item, it will strike through the text with amazing animation.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Simple and very easy to customize list style. Created using pure HTML and CSS. Gives a highlighting effect upon hover.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple and delightful animated dropdown list style created with HTML, CSS, and jQuery. When you click the button, the button layout will change, and the list items will appear one by one, with a smooth dropdown effect.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A classic pricing table that contains a cool list style hover effect with a modern touch given using HTML and Bootstrap CSS. Upon hover, the list items smoothly change color and shift slightly.
Title:
UI Motion — Shipping Concept
Author:
Created on:
Made with:
HTML, SCSS, javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A super fun animated shipping CSS list style that uses some super cool animations upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant to-do list layout that incorporates HTML, CSS, and Vue.js for striking through text and animation effects when clicking on the list items. You can also delete them as well.
Title:
Interactive ToDo List Using HTML-CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive and modish to-do list that was created using HTML, SCSS, and Java Script. It has a decent look that can easily fit into a dark color scheme website. It lets you add and delete items
Title:
Advanced TimeLine: HTML/CSS/Javascript
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Modern and innovative timeline or milestone list style created using advanced javascript and CSS. Looks super sleek and provides collapse options.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A charismatic CSS list style created using HTML(Pug) and SCSS and jQuery. This list gives a beautiful and cicular scrolling effect to give a list 3D decent look. This type of list is suitable for displaying important updates on the website.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This app presents a beautiful CSS to-do list layout created using HTML, SCSS, and JavaScript. You can add items to the list, and it will also display the count of each item, along with a way to sort the items by completion.
Title:
Context menu with Feather icons
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a super minimal and useful CSS list-style. It is perfect for those who want to get things done quickly and efficiently. It has a descriptive toolbox type interface created using SCSS and Javascript.
Title:
Morphing Tab Button with List
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A compact CSS list style dropdoen menu from a morphing button created using HTML, SCSS, and jQuery. When you click on the button, a list of items appears with smooth sliding effects. When you hover over the list item it will highlight it with a fade-in white effect.
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
Unordered HTML List
- tag. Each list item starts with the
tag.
The list items will be marked with bullets (small black circles) by default:
Example
Ordered HTML List
- tag. Each list item starts with the
tag.
The list items will be marked with numbers by default:
Example
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The tag defines the description list, the tag defines the term (name), and the tag describes each term:
Example
HTML List Tags
| Tag | Description |
|---|---|
| Defines an unordered list | |
| Defines an ordered list | |
| Defines a list item | |
| Defines a description list | |
| Defines a term in a description list | |
| Describes the term in a description list |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Html ordered list template
The HTML element represents an ordered list of items — typically rendered as a numbered list.
Try it
Attributes
This element also accepts the global attributes.
This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.
An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter «d» or the Roman numeral «iv,» use start=»4″ .
- a for lowercase letters
- A for uppercase letters
- i for lowercase Roman numerals
- I for uppercase Roman numerals
- 1 for numbers (default)
The specified type is used for the entire list unless a different type attribute is used on an enclosed element.
Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.
Usage notes
Typically, ordered list items display with a preceding marker, such as a number or letter.
- Steps in a recipe
- Turn-by-turn directions
- The list of ingredients in decreasing proportion on nutrition information labels
- element — otherwise you can use .