Lists in CSS

CSS Lists

There are two main types of lists in HTML -

Unordered lists (<ul>)

Ordered lists (<ol>)

CSS has a list of properties that are used to apply different changes to these lists.

Different list item marks

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

For example

<style>

ul {

list-style-type: circle;

}

</ style>

<ul>

<li> Tea </ li>

<li> coffee </ li>

</ ul>

Output: -

○ tea

○ Coffee

If list-style: give square then the output will be-

■ tea

■ Coffee

Similarly, see an example of the ordered list.

<style>

ol {

list-style-type: upper-roman;

}

</ style>

<ol>

<li> Mango </ li>

<li> Apple </ li>

</ ol>

 

Output: -

I. Mango

II. Apple

If list-style-type: lower-alpha then

The output will be -

a Mango

b. Apple

* list-style-image property displays an image as a list item marker.

For eg.

<style>

ul {

list-style-image: url ('star.gif');

}

</ style>

<ul>

<li> Tea </ li>

<li> Coffee </ li>

</ ul>

Output: -

Tea

Coffee

list-style-position: This property specifies the position of a list item marker.

If the value of list-style-position is given outside, then the bullet points will be out of the list item. This is the default property.

For example

<style>

ul {

list-style-position: outside;

}

</ style>

<ul>

<li> Tea </ li>

<li> Coffee </ li>

</ ul>

If the value of list-style-position is inside, then the bullet points will be inside the list item.

Removing Default Settings

To delete the default markers/bullets of a list, use value none of list-style-type. There are also some margin and padding in the list. <Ul> and <ol> to remove it margin: 0; And padding: 0; Give up.

For example, We have a list -

<ul>

<li> Mango </ li>

<li> Apple </ li>

</ ul>

Output: -

● Mango

● Apple

To delete its default list type and margin, padding, e.g. Look at

<style>

ul {

list-style-type: none;

padding: o;

margin: o;

}

<ul>

<li> Mango </ li>

<li> Apple </ li>

</ ul>

Output: -

Mango

Apple

List-style shorthand property

This property can specify all properties of the list style in a single declaration.

Eg.

<style>

ul {

list-style: square inside url ('star.png');

}

</ style>

<ul>

<li> Tea </ li>

<li> Coffee </ li>

</ ul>

Output: -

Tea

Coffee

When we use the 'list-style' shorthand property, the order of values ​​will be so -

list-style: type

If there are no values ​​in it, then replace it with the default value (if any).

We can also give colors to the lists.

For example

ol {

background: # ff0000;

}