CSS3 Examples

CSS QUOTES

Written by jon on 1:23 AM This property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.
Values of the ‘content’ property are used to specify where the open/close quotation marks should or should not occur - the “open-quote”, “close-quote”, “no-open-quote”, and “no-close-quote” values. “Open-quote” refers to the left (first) of a given pair of specified quotes, while “close-quote” refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the “no-close-quote” and “no-open-quote” value. In the event that the quote character nesting depth is not covered in the ‘quotes’ property specification, the last valid quotation pair set should be used.

Example

blockquote[lang-=fr] { quotes: “\201C” “\201D” } blockquote[lang-=en] { quotes: “\00AB” “\00BB” } blockquote:before { content: open-quote } blockquote:after { content: close-quote }

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none The ‘open-quote' and ‘close-quote' values of the ‘content' property produce no quotations marks. ([string] [string]) Values for the ‘open-quote' and ‘close-quote' values of the ‘content' property are taken from this list of quote mark pairs. The first or possibly only) pair on the left represents the outermost level of quotation embedding, the pair to the right (if any) is the first level of quote embedding, etc.

CSS INCLUDE-SOURCE

Written by jon on 1:22 AM This property inserts another document into the current document, replacing the current element’s content. Any elements or CSS properties applied to or inherited by the current element are applied to the inserted content as well.

Example

div { position: absolute; top: 100px; left: 300px; width: 200px; height: 200px; border: thin solid black; include-source: url(http://www.example.com/testpage.htm); }

Possible Values

Value Description [URL] An absolute or relative URL pointing to a document. If rendering of the document is not possible by the browser, it should be ignored and the regular element content be displayed instead.

CSS COUNTER-INCREMENT

Written by jon on 1:20 AM The ‘counter-increment’ property acts like an incremented variable in a programming language - it specifies the amount to increment the specified counter by when the current CSS selector is encountered. The property lists one or more counter labels, each followed by an optional increment integer value (default increment is 1.) Negative integers and zero are also valid.
If a counter is incremented AND rendered using a single CSS selector (with the ‘content’ property and ‘before:’/'after:’ pseudo-elements), it should be incremented first, then rendered. If a single CSS selector both increments and resets a counter, it is reset, then incremented.

Example

h1:before {counter-increment: main-heading; counter-reset: sub-heading; content: “Section ” counter(main-heading) “:” }

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none Suppresses incrementing counters for the current selector. [identifier integer] Specifies one or more counters and the amount to increment the counter by.

CSS COUNTER-RESET

Written by jon on 1:19 AM The ‘counter-reset’ property acts like a variable assignment in a programming language - it sets a new value for the specified counter whenever the current CSS selector is encountered. The property lists one or more counter labels, each followed by an optional integer reset value (default reset value is 0.)
If a counter is reset AND rendered using a single CSS selector (with the ‘content’ property and ‘before:’/'after:’ pseudo-elements), it should be reset first, then rendered. If a single CSS selector both increments and resets a counter, it is reset, then incremented.

Example

h1:before {counter-increment: main-heading; counter-reset: sub-heading; content: “Section ” counter(main-heading) “:” }

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none Suppresses reseting of counters for the current selector. [identifier integer] Specifies one or more counters to reset and the values to reset each one to.

CSS CONTENT

Written by jon on 7:25 AM This property automatically generates content to attach before/after a CSS selector (using the :before and :after pseudo-elements.) One or more keywords may be specified for this property, but the content does not actually exist in the document tree; it is generated “on-the-fly.” The ‘display’ property is used with this property to specify the type of rendering box for the generated content.

Example

em:before { content: url(”ding.wav”) }

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. [string] The content of the value will be used as the generated text. [URL] An absolute or relative URL pointing to an embeddable object. If rendering of the file is not possible by the browser, it should be ignored. [counter() counters()] counter(name) counter(name, list-style-type) Generated text is produced using “name” (the name of the counter at the current point in the document tree), and “list-style-type” accepts one of the named values used for the ‘list-style-type' property (default “list-style-type” for the counter() function is ‘decimal'.) counters(name, string) counters(name, string, list-style-type) All counters with the indicated “name” label at the current point in the document tree will become the generated text, separated by the specified string value. The counters are rendered using the “list-style-type” (one of the named values used for the ‘list-style-type' property, default “list-style-type” for the counters() function being ‘decimal'.) open-quote close-quote A quote of the indicated type is inserted as appropriate, taking its value from the ‘quotes' property. no-open-quote no-close-quote A quote is not inserted for the open/close quote, but the quote nesting level is still incremented/decremented accordingly. [attr(X)] This syntax returns a string which is the unparsed value of the indicated element attribute (X) for the current CSS selector. If the specified attribute does not exist, an empty string should be returned. Case sensitivity of the attribute name should depend on the language in use (eg: XML is case sensitive while HTML is not.) If the system supports it, you can also supply a namespace prefix to narrow down the attribute selection as well, eg: “attr(fooalign)” where “foo” is the namespace prefix, and “align” is the attribute being selected in that namespace ONLY.