CSS
CSS Lists
CSS lists are used to display data in an organized manner. Various CSS properties are used for displaying data in lists.
CSS List Types
In HTML and CSS, data can be categorized into the following:
- In an unordered list/ bullets
- or an ordered list in numbers or letters.
CSS Styling List Properties
CSS offers more options for list styling. The CSS list styling properties allow you to do the following:
- You can style the CSS list, whether an ordered or unordered, with different list item markers.
- An image can also be used as the list item marker.
- Add a background colour of your choice to the lists and their items.
CSS List Item Markers
CSS has different list item markers that are specified by its list-style-type property. Here are some examples of the available list item markets in CSS.
list-style-type: specifies the form of the CSS list item marker. For example, circle, square, numbers, etc.
list-style-image: This property allows you to use an image as a marker instead of the default item markers.
list-style-position: specifies the position of the CSS list item marker (inside or outside the items in the list)
list-style: It is a shorthand property used to set all the above-mentioned properties together.
Setting Image as the List Item Marker
A list item marker can be an image. To do so, you will need list-style-type property.
Background Color
To set the background of a link to a specific colour, this CSS background property can be used.
CSS List Item Markers Positioning
This CSS property determines the position of the list item markers.
- To place the item markers outside the list content, apply the property like this: “list-style-position: outside;“
- “list-style-position: inside; “sets the bullet points inside the list items.
Changing Default Settings
CSS lists have bullets, numbers, or markers by default. To remove this default setting, the list-style-type:none property is used, and to remove padding and margins, set them to zero.
List Shorthand Property
This list-style property sets all the CSS list properties together as one function.
The following property order should be followed while using the shorthand property.
- list-style-property
- list-style-position
- list-style-image
Note: If the value of any of the above-listed properties is not specified, the system will insert its default value.
Stylising CSS List with Colors
The CSS list can be styled with colours to make the webpage more visually appealing. To add a background colour, <ol>, <ul>, and <li> tags are used.
- Any changes in <ol> and <ul> tags will affect the entire CSS list.
- The <li> tag only changes an individual list item.
