CSS Tutorial (Chapter Four): Work with Lists

Lists in CSS

Lists are elements that are very diverse. Including the site navigation section for creating 
tab controls . Navigation usually contains a list of links, which has visual features and is not 
fixed or dry, we stylize this chapter and introduce the features that are used to work with Lists in CSS.
.

List-style-type property

Using this property, you can define bullets for arranged and unordered lists. And accepts one of the 14 values below.


disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower
 -greek, lower-latin, upper-latin, armenian, georgian, none

Default value for unordered lists (ul): disk 
value Default value for ordered list (ol): decimal value 
Note: During the definition of the above properties, bullet we may consider sorted lists for unordered lists 
, and vice versa . It is strongly recommended that this is not done and for each type of 
list it should be considered a bullet for the same list according to its meaning. 
Bullets of the unordered list (ul) are circle, square, and disc, and none, and the rest of the bullets are related to the 
ordered lithium (ol). 
Example:

  CSS Tutorial (Ninth Session) – Spaces around the element

HTML code:

<h2> Web Design Tutorials </ h2>
 <ul>
 <li> HTML
 <ol class = "html">
 <li> HTML 1 </ li>
 <li> HTML 2 </ li>
 <li> HTML 3 </ li>
 <li> HTML 4 </ li>
 <li> HTML 5 </ li>
 <li> XHTML </ li>
 </ ol>
 </ li>
 <li> CSS
 <ol class = "css">
 <li> CSS 1 </ li>
 <li> CSS 2 </ li>
 <li> CSS 3 </ li>
 </ ol>
 </ li>
 <li> JavaScript </ li>
 <li> j Query </ li>
 <li> PHP </ li>
 <li> ASP </ li>
 </ ul>

And CSS code:

ul li {list-style-type: square; }
 ul ol html li {list-style-type: lower-alpha; }
 ul ol css li {list-style-type: upper-roman; }

Leave a Reply

Your email address will not be published. Required fields are marked *

Top