Difference between revisions of "CSS GUIDE LIST STYLE TYPE"

From CDOT Wiki
Jump to: navigation, search
(fixed indirect links)
 
(4 intermediate revisions by the same user not shown)
Line 21: Line 21:
 
ul
 
ul
 
{
 
{
−
list-style-type: disc
+
list-style-type: [marker-type]
 
}
 
}
 
</pre>
 
</pre>
  
 
== Legal Values ==
 
== Legal Values ==
−
Possible values:
+
Possible values for marker-style: check [http://www.w3schools.com/css/pr_list-style-type.asp this link] for complete list.
−
 
 
−
<table border="2">
 
−
<tr>
 
−
<th>Method</th><th>Range</th><th>Example</th>
 
−
</tr>
 
−
<tr>
 
−
<td>Hexadecimal (preferred)</td><td>#000000 - #ffffff</td><td>#00ff00 is green</td>
 
−
</tr>
 
−
<tr>
 
−
<td>Color name</td><td>[http://www.w3schools.com/html/html_colornames.asp W3Schools Natural Langauge Color Names]</td><td>green</td>
 
−
</tr>
 
−
<tr>
 
−
<td>RGB value</td><td>0-255</td><td>rgb(102,204,102) is green</td>
 
−
</tr>
 
−
</table>
 
  
 
See [[#Usage Examples | usage examples]] section for more details.
 
See [[#Usage Examples | usage examples]] section for more details.
Line 48: Line 33:
  
 
== Usage Examples ==
 
== Usage Examples ==
−
<pre>p{color: #ff0000} /*Set paragraph text to appear red.*/</pre>
+
<pre>list-style-type: disc /*Set marker to disc.*/</pre>
−
<pre>h1{color: #0000FF} /*Set h1 (level 1 heading) text to blue.*/</pre>
+
<pre>list-style-type: decimal /*Set marker to number.*/</pre>
−
<pre>span{color: #0000FF} /*Sets text enclosed within span tag to appear yellow*/</pre>
+
<pre>list-style-type: lower-alpha /*Set marker to lower alphabet.*/</pre>
  
 
== Notes ==
 
== Notes ==
−
Please remember to use the appropriate U.S. English spelling i.e. color and not the U.K or Canadian english spellings to ensure your CSS works.
 
−
 
−
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].
 
  
 
== Specification Conformance  ==
 
== Specification Conformance  ==

Latest revision as of 21:00, 13 December 2006

This document is a work in progress and is subject to change.

Summary

The list-style-type sets the type of the list-item marker. This value decides what sort of marker the list items will use to differentiate each other.

Applicability:The list-style-type property can be used for all CSS elements, although some values may not work in some browsers.
Media Group: Visual
Inherited:Yes

Syntax

ul
{
list-style-type: [marker-type]
}

Legal Values

Possible values for marker-style: check this link for complete list.

See usage examples section for more details.

Mozilla Recommended Values

Usage Examples

list-style-type: disc  /*Set marker to disc.*/
list-style-type: decimal  /*Set marker to number.*/
list-style-type: lower-alpha  /*Set marker to lower alphabet.*/

Notes

Specification Conformance

Browser Compatibility

See Also

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=CSS_GUIDE_LIST_STYLE_TYPE&oldid=8747"