CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS - Lists
CSS - Lists
Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control pst type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control psts −
The pst-style-type allows you to control the shape or appearance of the marker.
The pst-style-position specifies whether a long point that wraps to a second pne should apgn with the first pne or start underneath the start of the marker.
The pst-style-image specifies an image for the marker rather than a bullet point or number.
The pst-style serves as shorthand for the preceding properties.
The marker-offset specifies the distance between a marker and the text in the pst.
Now, we will see how to use these properties with examples.
The pst-style-type Property
The pst-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered psts and the style of numbering characters in ordered psts.
Here are the values which can be used for an unordered pst −
| 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 pst −
| Value | Description | Example |
|---|---|---|
| decimal | Number | 1,2,3,4,5 |
| decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05 |
| 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-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 |
| upper-latin | The marker is upper-latin | A, B, C, D, E |
| 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 −
<html>
<head>
</head>
<body>
<ul style = "pst-style-type:circle;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ul style = "pst-style-type:square;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ol style = "pst-style-type:decimal;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
<ol style = "pst-style-type:lower-alpha;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
<ol style = "pst-style-type:lower-roman;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
</body>
</html>
It will produce the following result −
The pst-style-position Property
The pst-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 pne, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the pst had a value of outside. |
| 3 | outside If the text goes onto a second pne, the text will be apgned with the start of the first pne (to the right of the bullet). |
Here is an example −
<html>
<head>
</head>
<body>
<ul style = "pst-style-type:circle; pst-stlye-position:outside;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ul style = "pst-style-type:square;pst-style-position:inside;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ol style = "pst-style-type:decimal;pst-stlye-position:outside;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
<ol style = "pst-style-type:lower-alpha;pst-style-position:inside;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
</body>
</html>
It will produce the following result −
The pst-style-image Property
The pst-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>
<p style = "pst-style-image: url(/images/bullet.gif);">Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ol>
<p style = "pst-style-image: url(/images/bullet.gif);">Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
</body>
</html>
It will produce the following result −
The pst-style Property
The pst-style allows you to specify all the pst properties into a single expression. These properties can appear in any order.
Here is an example −
<html>
<head>
</head>
<body>
<ul style = "pst-style: inside square;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ol style = "pst-style: outside upper-alpha;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
</body>
</html>
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 −
<html>
<head>
</head>
<body>
<ul style = "pst-style: inside square; marker-offset:2em;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ul>
<ol style = "pst-style: outside upper-alpha; marker-offset:2cm;">
<p>Maths</p>
<p>Social Science</p>
<p>Physics</p>
</ol>
</body>
</html>
It will produce the following result −
Advertisements