Page 100 - DCAP408_WEB_PROGRAMMING

Web Programming

Notes
Example:

UL {list-style: upper-roman inside}
UL UL {list-style: circle outside}
LI.square {list-style: square}
OL.alpha {list-style: lower-alpha}
UL {list-style: disc}
UL {list-style: url (http://png.com/ellipse.png) disc}
4.4.5 Generated Content Properties

The basic aim of CSS is to offer hints and aids for the direct translation of a document and its
elements to differing physical media. There are times when the information contained in a
document’s structure is not enough to display the intended content. In HTML, the various list
structures are a perfect example - the bullets and iterative/hierarchical numbers that are rendered
before the items in the list are not explicitly present in the source document. This content is
automatically generated by the browser when rendering an element from the source document.
CSS2 extends this concept of automatic content generation to allow content (strings, quotes, list
generators or objects) to be rendered before or after any element. Generated content includes
aural rendering as well; auditory icons can offer powerful usability enhancements for a listener.

GENERATED CONTENT
String
url
counter (name)
counter (name, list-style- type)
content
counters (name, string)
counters (name, string, list- style-type)
attr (X)
open-quote | close-quote | no-open-quote | no-close- quote
None
counter-increment
identifier number
None
counter-reset
identifier number
None
quotes
string string string string

Example:
BLOCKQUOTE P:before {content: open-quote}
BLOCKQUOTE P:after {content: no-close-quote}
BLOCKQUOTE P.last:after {content: close-quote}
[LANG|=fr] > * {quotes: “«” “»” “\2039” “\203A”}
[LANG|=en] > * {quotes: “\201C” “\201D” “\2018” “\2019”}
[LANG|=fr] > * {quotes: “«” “»” “‹” “›”}
[LANG|=en] > * {quotes: “”” “”” “‘“ “’”}
H1:before {

94 LOVELY PROFESSIONAL UNIVERSITY