CSS LISTS

Dr. Fareed Ahmed Jokhio

 LISTS
• 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.
 LISTS
• 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 a bullet point
(also known as a marker) in 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:
 The list-style-type Property
• None
– NA
• disc (default)
– A filled-in circle
• Circle
– An empty circle
• Square
– A filled-in square
 The list-style-type Property
• Here are the values, which can be used for an
ordered list:
• Decimal
– Number
• 1,2,3,4,5
• decimal-leading-zero
– 0 before the number
• 01, 02, 03, 04, 05
 The list-style-type Property
• lower-alpha
– Lowercase alphanumeric characters
• a, b, c, d, e
• upper-alpha
– Uppercase alphanumeric characters
• A, B, C, D, E
• lower-roman
– Lowercase Roman numerals
• i, ii, iii, iv, v
• upper-latin
– The marker is upper-latin
• A, B, C, D, E
 The list-style-type Property
• upper-roman
– Uppercase Roman numerals
• 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
 The list-style-type Property
• 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
 The list-style-type Property
• 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
 The list-style-type Property
• Here is an example:
• <ul style="list-style-type:circle;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The list-style-type Property
• <ul style="list-style-type:square;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The list-style-type Property
• <ol style="list-style-type:decimal;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 The list-style-type Property
• <ol style="list-style-type:lower-alpha;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 The list-style-type Property
• <ol style="list-style-type:lower-roman;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
The list-style-type Property
 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:
 The list-style-position Property
• 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).
 The list-style-position Property
• <ul style="list-style-type:circle; list-stlye-
position:outside;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The list-style-position Property
• <ul style="list-style-type:square;list-style-
position:inside;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The list-style-position Property
• <ol style="list-style-type:decimal;list-stlye-
position:outside;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 The list-style-position Property
• <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-position Property
 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.
 The list-style-image Property
• <ul>
• <li style="list-style-image:
url(/images/bullet.gif);">Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The list-style-image Property
• <ol>
• <li style="list-style-image:
url(/images/bullet.gif);">Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 The list-style-image Property
• It will produce the following result:
 Thelist-style Property
• The list-style allows you to specify all the list
properties into a single expression.
• These properties can appear in any order.
 Thelist-style Property
• <ul style="list-style: inside square;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 Thelist-style Property
• <ol style="list-style: outside upper-alpha;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 Thelist-style Property
• It will produce the following result:
 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:
 The marker-offset Property
• <ul style="list-style: inside square; marker-
offset:2em;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul>
 The marker-offset Property
• <ol style="list-style: outside upper-alpha;
marker-offset:2cm;">
• <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ol>
 The marker-offset Property
• It will produce the following result:
 PADDINGS
• The padding property allows you to specify how
much space should appear between the content
of an element and its border:
• The value of this attribute should be either a
length, a percentage, or the word inherit.
• If the value is inherit, it will have the same
padding as its parent element.
• If a percentage is used, the percentage is of the
containing box.
 PADDINGS
• The following CSS properties can be used to
control lists.
• You can also set different values for the
padding on each side of the box using the
following properties:
 PADDINGS

• The padding-bottom specifies the bottom padding of an

element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an
element.
• The padding serves as shorthand for the preceding
properties.
 The padding-bottom Property
• The padding-bottom property sets the bottom
padding (space) of an element.
• This can take a value in terms of length of %.
• Here is an example:
 The padding-bottom Property
• <p style="padding-bottom: 15px; border:1px solid
black;">
• This is a paragraph with a specified bottom padding
• </p>
• <p style="padding-bottom: 5%; border:1px solid
black;">
• This is another paragraph with a specified bottom
padding in percent
• </p>
 The padding-bottom Property
• It will produce the following result:
 The padding-top Property
• The padding-top property sets the top
padding (space) of an element.
• This can take a value in terms of length of %.
• Here is an example:
 The padding-top Property
• <p style="padding-top: 15px; border:1px solid
black;">
• This is a paragraph with a specified top padding
• </p>
• <p style="padding-top: 5%; border:1px solid
black;">
• This is another paragraph with a specified top
padding in percent
• </p>
 The padding-top Property
• It will produce the following result:
 The padding-left Property
• The padding-left property sets the left padding
(space) of an element.
• This can take a value in terms of length of %.
• Here is an example:
 The padding-left Property
• <p style="padding-left: 15px; border:1px solid
black;">
• This is a paragraph with a specified left padding
• </p>
• <p style="padding-left: 15%; border:1px solid
black;">
• This is another paragraph with a specified left
padding in percent
• </p>
 The padding-left Property
• It will produce the following result:
 The padding-right Property
• The padding-right property sets the right
padding (space) of an element.
• This can take a value in terms of length of %.
• Here is an example:
 The padding-right Property
• <p style="padding-right: 15px; border:1px solid
black;">
• This is a paragraph with a specified right padding
• </p>
• <p style="padding-right: 5%; border:1px solid
black;">
• This is another paragraph with a specified right
padding in percent
• </p>
 The padding-right Property
• It will produce the following result:
 The Padding Property
• The padding property sets the left, right, top
and bottom padding (space) of an element.
• This can take a value in terms of length of %.
• Here is an example:
 The Padding Property
• <p style="padding: 15px; border:1px solid black;">
• all four padding will be 15px
• </p>
• <p style="padding:10px 2%; border:1px solid
black;">
• top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the
document.
• </p>
 The Padding Property
• <p style="padding: 10px 2% 10px; border:1px
solid black;">
• top padding will be 10px, left and right
padding will be 2% of the total width of the
document, bottom padding will be 10px
• </p>
 The Padding Property
• <p style="padding: 10px 2% 10px 10px;
border:1px solid black;">
• top padding will be 10px, right padding will be
2% of the total width of the document,
bottom padding and top padding will be 10px
• </p>
 The Padding Property
• It will produce the following result:
 CURSORS
• The cursor property of CSS allows you to
specify the type of cursor that should be
displayed to the user.
 CURSORS
• One good usage of this property is in using
images for submit buttons on forms.
• By default, when a cursor hovers over a link, the
cursor changes from a pointer to a hand.
• However, it does not change form for a submit
button on a form.
• Therefore, whenever someone hovers over an
image that is a submit button, it provides a visual
clue that the image is clickable.
 CURSORS
• the possible values for the cursor property:
• auto
– Shape of the cursor depends on the context area it
is over.
– For example, an ‘I’ over text, a ‘hand’ over a link,
and so on.
• crosshair
– A crosshair or plus sign.
 CURSORS
• default
– An arrow.
• pointer
– A pointing hand (in IE 4 this value is hand).
• move
– The ‘I’ bar.
• e-resize
– The cursor indicates that an edge of a box is to be
moved right (east).
 CURSORS
• ne-resize
– The cursor indicates that an edge of a box is to be
moved up and right (north/east).
• nw-resize
– The cursor indicates that an edge of a box is to be
moved up and left (north/west).
• n-resize
– The cursor indicates that an edge of a box is to be
moved up (north).
 CURSORS
• se-resize
• The cursor indicates that an edge of a box is to be
moved down and right (south/east).
• sw-resize
• The cursor indicates that an edge of a box is to be
moved down and left (south/west).
• s-resize
• The cursor indicates that an edge of a box is to be
moved down (south).
 CURSORS
• w-resize
– The cursor indicates that an edge of a box is to be moved left
(west).
• text
– The I bar.
• wait
– An hour glass.
• help
– A question mark or balloon, ideal for use over help buttons.
• <url>
– The source of a cursor image file.
 CURSORS
• NOTE: You should try to use only these values
to add helpful information for users, and in
places, they would expect to see that cursor.
• For example, using the crosshair when
someone hovers over a link can confuse the
visitors.
• Here is an example:
 CURSORS
• <p>Move the mouse over the words to see the cursor
change:</p>
• <div style="cursor:auto">Auto</div>
• <div style="cursor:crosshair">Crosshair</div>
• <div style="cursor:default">Default</div>
• <div style="cursor:pointer">Pointer</div>
• <div style="cursor:move">Move</div>
• <div style="cursor:e-resize">e-resize</div>
• <div style="cursor:ne-resize">ne-resize</div>
• <div style="cursor:nw-resize">nw-resize</div>
 CURSORS
• <div style="cursor:n-resize">n-resize</div>
• <div style="cursor:se-resize">se-resize</div>
• <div style="cursor:sw-resize">sw-resize</div>
• <div style="cursor:s-resize">s-resize</div>
• <div style="cursor:w-resize">w-resize</div>
• <div style="cursor:text">text</div>
• <div style="cursor:wait">wait</div>
• <div style="cursor:help">help</div>
 CURSORS
• It will produce the following result: