Monday, 11 March 2019

CSS - Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists −
  • The list-style-type allows you to control the shape or appearance of the marker.
  • 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.
  • The list-style-image specifies an image for the marker rather than a bullet point or number.
  • The list-style serves as shorthand for the preceding properties.
  • The marker-offset specifies the distance between a marker and the text in the list.
Now, we will see how to use these properties with examples.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.
Here are the values which can be used for an unordered list −
Sr.No.Value & Description
1
none
NA
2
disc (default)
A filled-in circle
3
circle
An empty circle
4
square
A filled-in square
Here are the values, which can be used for an ordered list −
ValueDescriptionExample
decimalNumber1,2,3,4,5
decimal-leading-zero0 before the number01, 02, 03, 04, 05
lower-alphaLowercase alphanumeric charactersa, b, c, d, e
upper-alphaUppercase alphanumeric charactersA, B, C, D, E
lower-romanLowercase Roman numeralsi, ii, iii, iv, v
upper-romanUppercase Roman numeralsI, II, III, IV, V
lower-greekThe marker is lower-greekalpha, beta, gamma
lower-latinThe marker is lower-latina, b, c, d, e
upper-latinThe marker is upper-latinA, B, C, D, E
hebrewThe marker is traditional Hebrew numbering
armenianThe marker is traditional Armenian numbering
georgianThe marker is traditional Georgian numbering
cjk-ideographicThe marker is plain ideographic numbers
hiraganaThe marker is hiraganaa, i, u, e, o, ka, ki
katakanaThe marker is katakanaA, I, U, E, O, KA, KI
hiragana-irohaThe marker is hiragana-irohai, ro, ha, ni, ho, he, to
katakana-irohaThe marker is katakana-irohaI, RO, HA, NI, HO, HE, TO
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

The list-style-position Property

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values −
Sr.No.Value & Description
1
none
NA
2
inside
If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
3
outside
If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

The list-style Property

The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

The marker-offset Property

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example −
Unfortunately, this property is not supported in IE 6 or Netscape 7.
Here is an example −
<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

No comments:

Post a Comment

Unity Top Download

Latest post

An Introduction to Hybris from basics

An Introduction to Hybris from basics:  -- ecommerce site and PCM(Product content Management) solutions. eg. croma website.  -- having sear...

Popular posts