We will also discuss how to add background colors to lists and list items.<\/p>\n\n\n\n
First, let\u2019s look at an example of a list in HTML. Suppose a local bakery asks us to create a web page that includes a list of recipes for customers\u2019 home use.
<ul>\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nOur list appears as follows:Our list contains five items. We enclose each list item within <li><\/code> tags. (“li” stands for “list item.”) We enclose these <li><\/code> tags within a <ul><\/code> tag. The <ul><\/code> tag identifies an unordered list. Since this is an unordered list, our web browser places a bullet point before each of the items in the list. (If it were an ordered list, our web browser would place an orderable value\u2014usually a number or a letter\u2014before each item in the list.)
Now, let\u2019s explore how we can style a list using the list-style property.<\/p>\n\n\n\n
List Item Markers<\/h2>\n\n\n\n The list-style-type property is used to specify the type of marker used for items in a list.<\/p>\n\n\n\n
Unordered List Item Markers<\/h3>\n\n\n\n Suppose the bakery asks us to show what their list would look like with a circle bullet point versus a square bullet point preceding each list item. We can use the following code to create these designs for the bakery:<\/p>\n\n\n\n
styles.css\nli.circlebulletPoint {\n\tlist-style-type: circle;\n}\nli.squarebulletPoint {\n\tlist-style-type: square;\n}\nindex.html\n<ul>\n\t<li class=\"circlebulletPoint\">Butterfly Cakes<\/li>\n\t<li class=\"squarebulletPoint\">Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nOur code returns:As you can see, our first list item uses the circle bullet point marker style. We accomplished this by assigning the class value “circlebulletPoint”\u2014and therefore that value\u2019s corresponding style\u2014to our first list item. We assigned the class value “squarebulletPoint” to our second list item, so the web browser displays a square bullet point before that item.
There are other list-style-types which can be applied to a list, which are:
\ndisc<\/li>\n\n\n\n circle<\/li>\n\n\n\n decimal<\/li>\n\n\n\n decimal-leading-zero<\/li>\n\n\n\n lower-roman<\/li>\n\n\n\n upper-roman<\/li>\n\n\n\n lower-greek<\/li>\n\n\n\n lower-latin<\/li>\n\n\n\n upper-latin<\/li>\n\n\n\n armenian<\/li>\n\n\n\n georgian<\/li>\n\n\n\n lower-alpha<\/li>\n\n\n\n none<\/li>\n<\/ul>\n\n\n\nWe discuss a few of these that apply to ordered lists in the next section.<\/p>\n\n\n\n
Ordered List Item Markers<\/h3>\n\n\n\n Ordered lists have their own item marker styles.
Suppose we want the bakery\u2019s recipes to be displayed in an ordered list. We want to see what our list would look like with its order marked by a lowercase alphabetical letter preceding each item in the list, and what it would look like with an uppercase Roman numeral preceding each item in the list. We could use the following code to accomplish this task:<\/p>\n\n\n\n
styles.css\nli.alpha {\n\tlist-style-type: lower-alpha;\n}\nli.roman {\n\tlist-style-type: upper-roman;\n}\nindex.html\n<ol>\n\t<li class=\"alpha\">Butterfly Cakes<\/li>\n\t<li class=\"roman\">Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ol><\/pre><\/div>\n\n\n\nOur code returns:In this example, we used an ordered list (<ol>) instead of an unordered list. This allows us to order our list with numbers (or letters, etc.). Then, we marked the first item in our list with a lowercase alphabetical letter and the second item in our list with an uppercase Roman numeral.<\/p>\n\n\n\n
Remove Default List Item Marker Styling<\/h2>\n\n\n\n There are three CSS properties we can use in our code to remove aspects of default styling from a list: list-style-type, margin, and padding.<\/p>\n\n\n\n
Setting list-style-type to None<\/h3>\n\n\n\n If we don\u2019t want any sort of bullet point or ordinal indicator (like a number or letter) before list items, we can set the list-style-type property to none. Here\u2019s an example of using this property to remove any bullet point or ordinal indicators in a list:<\/p>\n\n\n\n
styles.css\nul {\n\tlist-style-type: none;\n}\nindex.html\n<ul>\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nOur code returns:Our list is still structured as a list, but when displayed on the web page, the list\u2019s items lack markers.<\/p>\n\n\n\n
Marker Position<\/h2>\n\n\n\n The list-style-position property is used to specify the position of the list item markers in a list.
There are two positions in which the item markers for a list can appear: inside and outside. If the list markers appear inside the list, the text will appear directly next to the item markers; if the list markers appear outside the list, there will be a gap between the list markers and the text items in the list.
Here are two example CSS rules which demonstrate how the list-style-position can be applied in both of these states:<\/p>\n\n\n\n
ul.a {\n\tlist-style-position: outside;\n}\nul.b {\n\tlist-style-position: inside;\n}<\/pre><\/div>\n\n\n\nIn our first list, we used the list-style-position: outside style. This is the default style applied to lists. As such, had we not specified this or any other list-style-position in our block of code, the browser would have defaulted to this positioning for list item markers. The following is the code for our bakery list that uses this style:<\/p>\n\n\n\n
<ul class=\"a\">\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nThe code returns:In this style, list item markers (in this case, bullet points) appear outside of our list items.
In our second list, we have specified the position of our list item markers as “inside.” The following is the code for our bakery list that uses this style:<\/p>\n\n\n\n
<ul class=\"b\">\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nThe code returns:It’s hard to tell but the position of our list item markers is now outside the list item.<\/p>\n\n\n\n
Image Marker<\/h2>\n\n\n\n Lists often use custom markers with images. If you want to set the marker for a list item to an image, you can use the list-style-image CSS property.
Suppose the bakery asks us to change the list item markers in their list to images of a cake (instead of a bullet point, number, etc.). We can use the following code to accomplish this task:<\/p>\n\n\n\n
styles.css\nul {\n\tlist-style-image: url(\"https:\/\/img.icons8.com\/small\/16\/000000\/cake.png\");\n}\nindex.html\n<ul>\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nOur code returns:As you can see, instead of using a default list item marker, we used our own. In this case, our list item marker is an image of a cake.<\/p>\n\n\n\n
List Style Shorthand Property<\/h2>\n\n\n\n We have been discussing the sub properties of the list-style property. These have allowed us to apply individual styles to our list.
However, there is a more efficient way of styling lists. Instead of using each individual subproperty to style a list, we can use the list-style shorthand property. Here is the syntax for the list-style shorthand property:<\/p>\n\n\n\n
ul {\n\tlist-style: [list-style-type] [list-style-position] [list-style-image];<\/pre><\/div>\n\n\n\nThe order of values specified above is the order you need to use with the list-style shorthand property. If you do not specify a value for one of the three sub properties that make up the shorthand syntax, the web browser will use that subproperty\u2019s default value.
Suppose we want to style our list of baked goods recipes with a cake image and also move each list item marker to the outside of our list. We can do so using this code:<\/p>\n\n\n\n
styles.css\nul {\n\tlist-style: outside url('https:\/\/img.icons8.com\/small\/16\/000000\/cake.png');\n}\nindex.html\n<ul>\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nOur code returns:Our list now uses the cake image for each list item marker. In addition, each list item marker is styled outside our list. <\/p>\n\n\n\n
CSS List Colors<\/h2>\n\n\n\n When you\u2019re designing a list, you may decide that you want the list to display background colors.
Suppose the bakery asks us to set the background color of the entire list to light blue and to use a pink background color for each item in the list. We can use the CSS background property to accomplish this task, like so:<\/p>\n\n\n\n
ul {\n\tbackground: lightblue;\n\tpadding: 10px;\n}\nul li {\n\tbackground: pink;\n\tmargin: 10px;\n}<\/pre><\/div>\n\n\n\nOur code returns:<\/p>\n\n\n\n
<ul>\n\t<li>Butterfly Cakes<\/li>\n\t<li>Chocolate Traybake<\/li>\n\t<li>Lemon Pound Cake<\/li>\n\t<li>Peanut Butter Flapjacks<\/li>\n\t<li>Chocolate Muffins<\/li>\n<\/ul><\/pre><\/div>\n\n\n\nIn our code, we applied a light blue background color using the background property to the <ul><\/code> element, which creates an unordered list. We also gave the <ul><\/code> element a 10px padding using the padding property.We also applied a pink background to and created a 10px margin around each list item.
We accomplished this by including our styles in a “ul li” selector, as you can see above. This selector states that the pink background and 10px margin should be applied to all <li><\/code> tags enclosed within a <ul><\/code> tag.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n When you\u2019re working with HTML lists, you can use CSS to apply custom styles to those lists to make them more aesthetically pleasing. The list-style property is used to apply styles to (or remove styles from) a list in CSS.
This tutorial discussed, with examples, how to use the CSS list-style property and its three sub properties. We also discussed how to set background colors for a list and the items within it.
Now you have the knowledge you need to start styling lists in CSS like a pro!<\/p>\n","protected":false},"excerpt":{"rendered":"Lists are an important way to display data in HTML. When you have a number of items with a common theme, such as shoe sizes or navigation tools, the most effective way to present the data may be to use a list. By default, lists in HTML are quite plain. That\u2019s where the CSS list-style…","protected":false},"author":240,"featured_media":14711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14710","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\n
CSS List Style: The Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-list-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS List Style\" \/>\n<meta property=\"og:description\" content=\"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-list-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-15T19:22:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:37:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS List Style\",\"datePublished\":\"2020-04-15T19:22:55+00:00\",\"dateModified\":\"2023-12-01T10:37:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/\"},\"wordCount\":1667,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-code-coding-computer-270632.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/\",\"name\":\"CSS List Style: The Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-code-coding-computer-270632.jpg\",\"datePublished\":\"2020-04-15T19:22:55+00:00\",\"dateModified\":\"2023-12-01T10:37:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-code-coding-computer-270632.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-code-coding-computer-270632.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-list-style\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS List Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS List Style: The Complete Guide | Career Karma","description":"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-list-style\/","og_locale":"en_US","og_type":"article","og_title":"CSS List Style","og_description":"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-list-style\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-15T19:22:55+00:00","article_modified_time":"2023-12-01T10:37:40+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS List Style","datePublished":"2020-04-15T19:22:55+00:00","dateModified":"2023-12-01T10:37:40+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/"},"wordCount":1667,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-list-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/","url":"https:\/\/careerkarma.com\/blog\/css-list-style\/","name":"CSS List Style: The Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg","datePublished":"2020-04-15T19:22:55+00:00","dateModified":"2023-12-01T10:37:40+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Styling lists is an important part of web design. On Career Karma, learn how to style lists using the list-style property in CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-list-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-code-coding-computer-270632.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-list-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS List Style"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14710"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14710\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14711"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/DRmxyLf6X-UzHiYBeNYycZ8X_-B4ofynIygWfDnrwmQ0EQeGuKgpOK7XtTSwFvYIhWsnuHQw4REY9uIwTeJRDP0Brg575zHTAtZ1aWC1ROv7Qm_zmsbYcQi8_dZBZg\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/dKz-UivEElDA7xrSkIA_It2Od_JjnTbH7NR2PKRKVzYBgYgQ1SFo6d-hJjXVNSDWaApg-ZE5p7_p5ezUz2-NcZ7m3-luwxIyvmTMGoBObbJpH8tQ2xWTUl5snIuUsQ\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/_tMinXncgSzT8o1t1o4DzLNT6cTOO1T_3AeS_n9ZEX3k5U_N52yMirGi8-njDC71iFkc2DY0cNcLoo_x1zmK1iS4tEiiFwlkuRHlVK-WDU0QKXCWzP83BWA0lfEspQ\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/z-Nzez4J6cZVxNsfRKPBxSisAUnfAVm7AWO-yQSwzSRpfe5qcClRV1KDXWuQh-4tZeojmnKyT7TE3eWLiLQVMMSL-BX5DigPplwZlvpQBZdoeApnobvHGnEwkedBKA\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/X4387RfCv8lfqVBCCLGFmSkFou7KzpSdHDgTMJKwjlksODRF7IcQt1dL87WeEku4iYvXC5FX5XaL8dPn6wYctU93r-aDyw0hFQ2x_BI2lEHy_8txhcwX2bAmwnc5IA\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/HbmP66LaxX8yyu8qIbc0IBKTbQ84XkSqP-_kADbuxV9UropXwALSk3l5jn4rZX484QQXnhK7FUTTukS3P4sPV-YcQ4DUyvSOPjQgQw2kiJff14wrylqcl384nZ8vbA\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/pgsGzWcpkFCf73iHuF0gbJ-NcErQ5LWqP1AGy91weR5WgmcdRCCIkLGmhSdwf3MEYqhQKIGc6qkQlBHYrVf8BNiQHz990Q4o1gp_tiQKzdjiv0aPyja3RPmmvi2Fqw\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/oZhSIvQOEa-LeV4h5S0mAsuWXxv__PMgh1EvEstShMV_1_g7yVI3Tc5x5Uo7MWCsqeGNzqwEoYhs2FZFh8KP25oYsJ6JSnDiUgjM_dZm6NNyM0HRyoe-xL9gLx0oIg\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/brmpUxirsPxqwx_A3rQ2qRQTCNGUH3rmn7RZSnohZ7kcLh2KRbH3JGJWzW1NeHTnApl4h0keJIMWYBP-j8xN2EDS8ojo5ra9t58r2mOy9b1DDFVIuRYLg460R5Q54A\")
<\/figure>\n\n\n\n