CSS LISTS AND TABLES

 


CSS LISTS


In CSS, there are a lot of options for styling HTML lists. We can change its bullets, colors, positions etc.

HTML there are two types of lists:

  • <ul>: an unordered list; list items are marked with bullets 
  • <ol>: an ordered list; list items are marked with numbers or letters. And then we have the <li> element which defines the list items for both unordered and ordered lists.

CSS List Bullet Styles

The list-style-type CSS property sets the bullet type or marker to use.

none: no bullet type disc: a filled circle: default value

circle: a hollow circle

square: a filled square

decimal: decimal numbers e.g. 1, 2, 3

decimal-leading-zero: decimal numbers with leading zeros e.g. 01, 02, 03

lower-roman: lowercase roman numerals e.g. i, ii, iii

upper-roman: uppercase roman. Numerals e.g. I, II, III

lower-alpha: lowercase letters e.g. a, b, c

upper-alpha: uppercase letters e.g. A, B, C

lower-greek: lowercase classicalg reek e.g. a, β, γ 

arabic-indic: traditional Arabic-Indicn umbering

georgian: traditional Georgian numbering

hebrew: traditional Hebrewn umbering

armenian: traditional Armenian numbering


Example of an unordered list bullet types.

Syntax:

list-style-type: none:


List-style-type: disc;


List-style-type: circle:


List-style-type: square:



Example of an ordered list bullet types.


Syntax 


List-style-type: none;


list-style-type: decimal;


List-style-type: Lower roman:


list-style-type: Lower-alpha;


CSS List Bullet Position


The list-style-position CSS property sets the position (whether it's outside or inside) of the bullets.

outside sets the bullets to sit outside the list items (default) inside: sets the bullets to sit inside the list items


Example


list-style-position: outside

List-style-position: inside:


CSS List Bullet Images


In CSS, it's possible to have images as list bullets.


The list-style-image CSS property sets an Image as bullets. Example:


list-style-image: url("heart.png");


However, this property is very limited in terms of controlling the position, size etc. of the bullets.