CSS List and Marker Style Properties

You may not have realized how much flexibility there is when it comes to the styling of lists via CSS. Several CSS styles apply to lists and the list-item markers, or bullets, within the lists.

`list-style`

Usage	A shorthand property that allows you to set all the list properties in one declaration.
Values	`list-style-type` , `list-style-position` , `list-style-image` .

`list-style-image`

Usage	Sets an image as the list-item marker (bullet) for the list.
Values	`none` , `url` .

`list-style-position`

Usage	Sets where the list-item marker (bullet) is placed in the list.
Values	`inside` , `outside` .

`list-style-type`

Usage	Sets the type of the list-item marker (bullet).
Values	`none` , `disc` , `circle` , `square` , `decimal` , `decimal-leading-zero` , `lower-roman` , `upper-roman` , `lower-alpha` , `upper-alpha` , `lower-greek` , `lower-latin` , `upper-latin` , `hebrew` , `armenian` , `georgian` , `cjk-ideographic` , `hiragana` , `katakana` , `hiragana-iroha` , `katakana-iroha` .

CSS Table Style Properties

There are a few advanced table properties that enable you to fine-tune the manner in which tables are rendered and displayed.

`border-collapse`

Usage	Sets the border model of a table.
Values	`collapse` , `separate` .

`border-spacing`

Usage	Sets the distance between the borders of adjacent cells .
Values	`length length` .

`caption-side`

Usage	Sets the position of the caption relative to the table.
Values	`top` , `bottom` , `left` , `right` .

`empty-cells`

Usage	Determines whether cells with no visible content should have borders.
Values	`show` , `hide` .

`table-layout`

Usage	Determines how the table is laid out.
Values	`auto` , `fixed` .
Notes	Speeds up browser rendering for fixed- size tables if you set it to `fixed` .

Appendix D. Migrating from HTML to XHTML

Although the relationship between HTML and XHTML has been covered in several places throughout the book, I felt it would be beneficial to have all the information in one place. This appendix serves as a reference for quickly obtaining the information regarding the differences between HTML 4 and XHTML 1.1, which are the primary two web standards involved in web page creation.

Differences Between XHTML 1 and HTML 4

XHTML 1.1 is an improved version of HTML 4 that plays by the more rigid rules of XML. Fortunately, most of the differences between XHTML and HTML don't dramatically impact the overall structure of HTML documents. Migrating an HTML document to XHTML is more a matter of cleaning and tightening up the code than converting it to a new language.

Following is a list of the primary differences between XHTML and HTML, with a focus on what XHTML requires that HTML doesn't:

Element and attribute names must be in lowercase ( <a href="index.html"> ).
End tags are required for non-empty elements ( <p>Howdy!</p> ).
Empty elements must consist of a start-tag/end-tag pair or an empty element ( <br /> ).
Attribute values must always be quoted ( href="index.html" ).
Attribute names cannot be used without a value ( ismap="ismap" ).
The XHTML namespace must be declared in the html element.
The head and body elements cannot be omitted.
The title element must be the first element in the head element.
Documents must use the id attribute to uniquely name elements on the page; the name attribute can no longer be used in XHTML for this purpose.

Based on your newfound knowledge of XML, none of these differences should come as too much of a surprise, especially because you've been following the rules of XHTML throughout the book. Fortunately, they are all pretty easy to find and fix in HTML documents, which makes the move from HTML to XHTML relatively straightforward.

Buy on amazon.com >>

Oliver D., Morrison M

<< Previous page

Table of contents

Next page >>