CSS Styling Lists

8/12/2019 CSS Styling Lists

1/2


2/2


w3schools.com/css/css_list.asp 2/2

REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US

Previous Next Chapter

For ul:

Set the list-style-type to none to remove the list item marker

Set both padding and margin to 0px (for cross-browser compatibility)

For all li in ul:

Set the URL of the image, and show it only once (no-repeat)

Position the image where you wa nt it (left 0px and down 5px)

Position the text in the list with padding-left

List - Shorthand property

It is also possible to specify all the list properties in one, single property. This is called a shorthand p roperty.

The shorthand property used for lists, is the list-style property:

Example

ul

{

list-style: square url("sqpurple.gif");

}

Try it yourself

When us ing the shorthand property, the order of the values are:

list-style-type

list-style-position (for a des cription, see the CSS properties ta ble below)

list-style-image

It does not matter if one of the values above a re missing, as long as the rest are in the specified order.

More Examples

All the different list-item markers for lists

This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property Description

lis t-s tyle Se ts a ll the p rope rtie s fo r a lis t in one decla ra tion

list-style-image Specifies an image as the list-item marker

list-style-position Specifies if the list-item markers should appear inside or outside the content flow

list-style-type Specifies the type of list-item marker

Top 10 Tutorials

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

CSS3 Tutorial

JavaScript Tutorial

jQuery Tutorial

SQL Tutorial

PHP Tutorial

ASP.NET Tutorial

XML Tutorial

Top 10 References

HTML/HTML5 Reference

CSS 1,2,3 Reference

CSS 3 Browser Support

JavaScript

HTML DOM

XML DOM

PHP Reference

jQuery Reference

ASP.NET Reference

HTML Colors

Examples

HTML Examples

CSS Examples

XML Examples

JavaScript Examples

HTML DOM Examples

XML DOM Examples

AJAX Examples

ASP.NET Examples

Razor Examples

ASP Examples

SVG Examples

Quizzes

HTML Quiz

HTML5 Quiz

XHTML Quiz

CSS Quiz

JavaScript Quiz

jQuery Quiz

XML Quiz

ASP Quiz

PHP Quiz

SQL Quiz

Color Picker

Statistics

Browser Statistics

Browser OS

Browser Display

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://www.googleadservices.com/pagead/aclk?sa=L&ai=CkKjzVVj9UfSZNqLaigfR0YCIB6XaxssD_fXM3mbhsNm1NBABIOfo-gFQ6rjK_fr_____AWDlwuSDpA6gAbuqqNsDyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKgBT9CwiMUP-k6tGwYtl4m121MRoG9z2Rm8pdmumsyj8byLG55N86Z7W6Rta3a9mRQKNgMkiS-f9Bzxxz7SO4wlbgJt33vL8VOhTlxH7SSLFvu7pJFjdbQ46BZNx1Q9qbPKL0qvJF82HyFzHKDhfZoQptU_ErLU0qePlqsQxwcw7u96S-DD_DVr2gEYMX2vUfUEGsEp00w_BJZGtM1kK9gBp4x1Qda_ktqg4AQBiAYBoAYCgAet1dck&num=1&cid=5GgmR2SgqadODFje0q1Rf-Ul&sig=AOD64_2JWc4DlEP5wIBlnDzL4JEs-Ci2tw&client=ca-pub-3440800076797949&adurl=http://www.ssangyongrexton.in/indulge/index.aspx%3Fsiteid%3DGoogleContenthttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/cssref/pr_list-style-type.asphttp://w3schools.com/cssref/pr_list-style-position.asphttp://w3schools.com/cssref/pr_list-style-image.asphttp://w3schools.com/cssref/pr_list-style.asphttp://w3schools.com/css/tryit.asp?filename=trycss_list-style-type_allhttp://w3schools.com/css/tryit.asp?filename=trycss_list-stylehttp://w3schools.com/css/css_table.asphttp://w3schools.com/css/css_link.asphttp://w3schools.com/about/about_advert.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/css/css_list.asp?output=printhttp://w3schools.com/css/css_list.asp#tophttp://w3schools.com/default.asphttp://w3schools.com/css/css_list.asphttp://www.w3schools.com/

CSS Styling Lists

Documents

Transcript of CSS Styling Lists