CSS Lists

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Lists

CSS Lists are an essential part of any web page. They are used to create navigation menus, bullet points, and other types of lists. CSS Lists allow web designers to create a variety of different types of lists that are both aesthetically pleasing and functional.

CSS Lists are created using the list-style-type property. This property defines the type of list that will be used. There are several types of lists available, including unordered lists, ordered lists, and description lists. Each type of list has a different set of rules and properties associated with it.

Unordered List

Unordered lists are the most common type of list used on web pages. Unordered lists are created using the
tag. Each list item is represented by a tag. Unordered lists can be styled using the list-style-type property, which allows for a variety of different styles, such as bullets, squares, circles, and more.

<ul>
   <li>One</li>
   <li>Two</li>
</ul>

Ordered List

Ordered lists are similar to unordered lists, but the list items are numbered or lettered. Ordered lists are created using the
tag. Each list item is represented by a tag. Ordered lists can also be styled using the list-style-type property.

<ol>
   <li>One</li>
   <li>Two</li>
</ol>

• List Style : The list-style CSS shorthand property allows you to set all the list-style properties at once.(list-style: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|none;)

ul{
   list-style: disc;   
}

• List Item Markers: This property specifies the type of list item marker.

Example:    list-style-type, list-style-image, list-style-position

• Image as The List Item Marker: The list-style-image specifies an image for the marker rather than a bullet point or number.

ul {
   list-style-image: url(imges/img.jpg);  
}

• Position The List Item Markers: The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.

ul {
   list-style-position: inside | outside;
   padding: 0;
   border-left: solid 2px red;
}

• Remove Default Settings: That this property can also be used to remove the markers/bullets. Note that the list also has default margin and padding.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

• List – Shorthand: This is shorthand sets three individual CSS lists styling properties in one.

ul {
   list-style: square outside url(images/img.jpg);  
}