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

Unordered List

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

Ordered List

<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);  
}