Thursday, March 8, 2018

Css List (Css tutorial)

Hello guys! morning and welcome to this new section of my tutorial on CSS, we have really gone a little bit far on CSS and i believe by now you all can do some few stuffs using CSS.

In my last tutorial post i talked about CSS margin and it various properties, now in this tutorial post i want to talk about CSS list.
NOTE: that CSS list is not too different from HTML List. The only difference is that CSS list has CSS style rules applied to it.

List are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style, etc., using CSS.

We have the following CSS properties, which can be used to control lists:
  • The list-style-type allows you to control the shape and 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 a shorthand for the proceding properties.
  • The marker-offset specifies the distance between the marker and the text in the list.
Now lets take a look at how to use these properties with few examples.
The list-style-type Property
The list-style-type property allows you to control the shape or style of a bullet point (also known as a marker) in case of unordered lists and the style of numbering characters in ordered lists.
Below are the values, which can be used for an unordered list:


                   
                    Value
            
                 Description
 
None

NA

disc (default)

A filled-in circle

Circle

An empty circle

Square

A filled-in circle
 











 Below are values, which can be used for an ordered list


                Value

              Description

       Example

Decimal

Number

1,2,3,4,5,6,7

decimal-leading-zero

0 before the number

01, 02, 03, 04, 05

lower-alpha

Lowercase alphanumeric
characters

a, b, c, d, e, f

Upper-alpha

Uppercase alphanumeric
character

A, B, C, D, E, F

lower-roman

Lowercase Roman numerals

i, ii, iii, iv, v

upper-alpha

Uppercase alphanumeric
 Characters


I, II, III, IV, V

lower-greek

The marker is lower-greek

alpha, beta, gamma

lower-latin

The marker is lower-latin

a, b, c, d, e, f

upper-latin

The marker is upper-latin

A, B, C, D, E, F

hebrew

The marker is traditional Hebrew numbering


armenian

The marker is traditional Armenian numbering


georgian

The marker is traditional Georgian numbering


cjk-ideographic

The marker is plain ideographic numbers


hiragana

The marker is hiragana

a, i, u, e, o, ka, ki

katakana

The marker is katakana

A, I, U, E, O, KA, KI

hiragana-iroha

The marker is hiragana-iroha

i, ro, ha, ni, ho, he, to

katakana-iroha

The marker is katakana-iroha

I, RO, HA, NI, HO, HE, TO
 
 Here is an example below:

<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>

You can also read: Html Tags
 
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 of the two values:


  Value

                   Description

none

NA

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.

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 below:
  
<ul style="list-style-type:circle;  list-style-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-style-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>

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 below:

<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>
You can also read: Html Document structure
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 below:
<ul  style="list-style:  inside  square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ul>
<ol  style="list-style:  outside  upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol> 
You can also read: Css Introduction (Css tutorial)
The marker-offset Property 
The marker-offset property allows you to specify the distance between the marker and the text relating to the 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 below:
<ul  style="list-style:  inside  square;  marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ul>
<ol  style="list-style:  outside  upper-alpha;   marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol>
Alright guys! we have come to the end of this tutorial on CSS list, feel free to ask your questions in areas you don't understand very well, they will be attended to as soon as possible.
Like our facebook page and also subscribe with us to get our tutorial posts delivered directly to your emails.
You can follow us on twitter 
You can also follow us on google+ 
Share:

0 comments:

Post a Comment