CSS LIST

 


There are two main types of lists

  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to set:
  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items
Different List Items:

list-style-type: property specifies the type of list item marker.

list-style-type: circle;
list-style-type: upper-alpha;
list-style-type: lower-alpha;
list-style-type: square;

list-style-image: property specifies an image as the list item marker

 list-style-image: url(./HTML_CSS_Projects/featured-small-circular.jpg);

list-style-position: property specifies the position of the list-item markers

list-style-position: inside;
list-style-position: outside;

list-style-type:none: property can also be used to remove the markers/bullets.

 list-style-type: none;

Note: The list also has a default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>.

list-style: This Property is a shorthand property. It is used to set all the list properties in one declaration

list-style: square inside url(./HTML_CSS_Projects/featured-small-circular.jpg);

Related Posts:

  • CSS Font CSS FontFont properties are used to add different styles to the fonts.Font properties are used to change the style, size, weight, etc. of the fo… Read More
  • CSS Outline CSS OutlineAn outline is a line drawn outside the element's border.CSS has the following outline properties:outline-styleoutline-coloroutline-wi… Read More
  • CSS Box Model  In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every H… Read More
  • Text PropertyCSS Text ColorThe color property is used to set the color of the text.The color is specified by:a color name - like "red"a HEX value - like "#ff0000"a… Read More
  • CSS Height, Width and Max-widthThe CSS height and width properties are used to set the height and width of an element.The CSS max-width property is used to set the maximum width of … Read More

0 Comments:

Post a Comment

Do leave your comments