CSS documenation improvements

Work around some problems with the formatting of the online docs, and split off the properties as a separate chapter.
author: Matthias Clasen <mclasen@redhat.com> 2016-01-08 23:31:48 -0500
committer: Matthias Clasen <mclasen@redhat.com> 2016-01-08 23:32:40 -0500
commit: 3a774abbfe05ab3a0d650c1d69fb7824d415a88a (patch)
tree: 011f309f2f1562cb2cb8e3fe74226c982ef5e004 /docs
parent: d8c1e6db216a55f78b42e7d4540b7134b51a483a (diff)
download: gtk+-3a774abbfe05ab3a0d650c1d69fb7824d415a88a.tar.gz
4 files changed, 1215 insertions, 1190 deletions
diff --git a/docs/reference/gtk/Makefile.am b/docs/reference/gtk/Makefile.am
index f02c98bca9..f4aa412ee9 100644
--- a/docs/reference/gtk/Makefile.am
+++ b/docs/reference/gtk/Makefile.am
@@ -285,7 +285,8 @@ content_files =					\
 	broadwayd.xml				\
 	building.sgml				\
 	compiling.sgml				\
-	css.xml					\
+	css-overview.xml			\
+	css-properties.xml			\
 	drawing-model.xml			\
 	getting_started.xml			\
 	glossary.xml				\
diff --git a/docs/reference/gtk/css-overview.xml b/docs/reference/gtk/css-overview.xml
new file mode 100644
index 0000000000..8d15f81288
--- /dev/null
+++ b/docs/reference/gtk/css-overview.xml
@@ -0,0 +1,984 @@
+<?xml version="1.0"?>
+<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
+               "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
+]>
+<refentry id="chap-css-overview">
+<refmeta>
+<refentrytitle>GTK+ CSS</refentrytitle>
+<manvolnum>3</manvolnum>
+<refmiscinfo>GTK Library</refmiscinfo>
+</refmeta>
+
+<refnamediv>
+<refname>GTK+ CSS</refname>
+<refpurpose>
+Overview of CSS in GTK+
+</refpurpose>
+</refnamediv>
+
+
+<!--
+Formatting conventions:
+We use
+
+‑ U+2011 Non-breaking Hyphen
+  U+00A0 No-break Space
+
+to control line breaks in the Name and Value columns.
+We use
+
+〈 U+2329 Left-pointing Angle Bracket
+〉 U+232A Right-pointing Angle Bracket
+
+for indicating non-terminals in syntax productions.
+
+We use <literallayout> for syntax productions, and each line is put in a <code>
+(the latter is a workaround for deficiences in the developer.gnome.org post-processing).
+-->
+
+<refsect1 id="css-overview">
+  <title>Overview of CSS in GTK+</title>
+
+  <para>
+    This chapter describes in detail how GTK+ uses CSS for styling
+    and layout.
+  </para>
+
+  <para>
+    We loosely follow the CSS
+    <ulink url="http://www.w3.org/TR/css-values/#value-defs">value definition</ulink>
+    specification in the formatting of syntax productions.
+    <simplelist>
+      <member>Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here are literals</member>
+      <member>Juxtaposition means all components must occur, in the given order</member>
+      <member>A double ampersand (&amp;&amp;) means all components must occur, in any order</member>
+      <member>A double bar (||) means one or more of the components must occur, in any order</member>
+      <member>A single bar (|) indicates an alternative; exactly one of the components must occur</member>
+      <member>Brackets ([]) are used for grouping</member>
+      <member>A question mark (?) means that the preceding component is optional</member>
+      <member>An asterisk (*) means zero or more copies of the preceding component</member>
+      <member>A plus (+) means one or more copies of the preceding component</member>
+      <member>A number in curly braces ({n}) means that the preceding component occurs exactly n times</member>
+      <member>Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times and at most n times</member>
+    </simplelist>
+  </para>
+
+  <refsect2>
+    <title>CSS nodes</title>
+
+    <para>
+      GTK+ applies the style information found in style sheets by matching
+      the selectors against a tree of nodes. Each node in the tree has a
+      name, a state and possibly style classes. The children of each node
+      are linearly ordered.
+    </para>
+
+    <para>
+      Every widget has one or more of these CSS nodes, and determines their
+      name, state, style classes and how they are layed out as children and
+      siblings in the overall node tree. The documentation for each widget
+      explains what CSS nodes it has.
+    </para>
+
+    <example>
+      <title>The CSS nodes of a GtkScale</title>
+      <programlisting><![CDATA[
+scale[.fine-tune]
+├── marks.top
+│   ├── mark
+┊   ┊
+│   ╰── mark
+├── trough
+│   ├── slider
+│   ├── [highlight]
+│   ╰── [fill]
+╰── marks.bottom
+    ├── mark
+    ┊
+    ╰── mark
+]]></programlisting>
+    </example>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Style sheets</title>
+
+    <para>
+      The basic structure of the style sheets understood by GTK+ is
+      a series of statements, which are either rule sets or “@-rules”,
+      separated by whitespace.
+    </para>
+
+    <para>
+      A rule set consists of a selector and a declaration block, which is
+      a series of declarations enclosed in curly braces. The declarations
+      are separated by semicolons. Multiple selectors can share the same
+      declaration block, by putting all the separators in front of the block,
+      separated by commas.
+    </para>
+
+    <example>
+      <title>A rule set with two selectors</title>
+      <programlisting><![CDATA[
+button, entry {
+  color: #ff00ea;
+  font: Comic Sans 12
+}
+]]></programlisting>
+    </example>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Importing style sheets</title>
+
+    <para>
+      GTK+ supports the CSS @import rule, in order to load another
+      style sheet in addition to the currently parsed one.
+    </para>
+
+    <para>
+      The syntax for @import rules is as follows:
+    </para>
+
+<literallayout><code>〈import rule〉 = @import [ 〈url〉 | 〈string〉] ;</code>
+<code>〈url〉 = url( 〈string〉)</code>
+</literallayout>
+
+    <example><title>An example for using the @import rule</title>
+      <programlisting><![CDATA[
+@import url("path/to/common.css");
+]]></programlisting>
+    </example>
+
+    <para>
+      To learn more about the @import rule, you can read the
+      <ulink url="http://www.w3.org/TR/css3-cascade/#at-import">Cascading</ulink>
+      module of the CSS specification.
+    </para>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Selectors</title>
+
+    <para>
+      Selectors work very similar to the way they do in CSS.
+    </para>
+
+    <para>
+      Typically widgets have one or more CSS nodes with element names (GTK+ falls
+      back to using the widget type if a widget has no element name) and style
+      classes. When style classes are used in selectors, they have to be prefixed
+      with a period. Widget names can be used in selectors like IDs. When used
+      in a selector, widget names must be prefixed with a &num; character.
+    </para>
+
+    <para>
+      In more complicated situations, selectors can be combined in various ways.
+      To require that a node satisfies several conditions, combine several selectors
+      into one by concatenating them. To only match a node when it occurs inside some
+      other node, write the two selectors after each other, separated by whitespace.
+      To restrict the match to direct children of the parent node, insert a &gt;
+      character between the two selectors.
+    </para>
+
+    <example>
+      <title>Theme labels that are descendants of a window</title>
+      <programlisting><![CDATA[
+window label {
+  background-color: #898989
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme notebooks, and anything within</title>
+      <programlisting><![CDATA[
+notebook {
+  background-color: #a939f0
+}
+]]></programlisting>
+    </example>
+ 
+    <example>
+      <title>Theme combo boxes, and entries that are direct children of a notebook</title>
+      <programlisting><![CDATA[
+combobox,
+notebook > entry {
+  color: @fg_color;
+  background-color: #1209a2
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme any widget within a GtkBin</title>
+      <programlisting><![CDATA[
+GtkBin * {
+  font: Sans 20
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme a label named title-label</title>
+      <programlisting><![CDATA[
+label#title-label {
+  font: Sans 15
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme any widget named main-entry</title>
+      <programlisting><![CDATA[
+#main-entry {
+  background-color: #f0a810
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme all widgets with the style class entry</title>
+      <programlisting><![CDATA[
+.entry {
+  color: #39f1f9;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme the entry of a GtkSpinButton</title>
+      <programlisting><![CDATA[
+spinbutton.entry {
+  color: 900185;
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      It is possible to select CSS nodes depending on their position amongst
+      their siblings by applying pseudo-classes to the selector, like :first-child,
+      :last-child or :nth-child(even). When used in selectors, pseudo-classes
+      must be prefixed with a : character.
+    </para>
+
+    <example>
+      <title>Theme labels in the first notebook tab</title>
+      <programlisting><![CDATA[
+notebook tab:first-child label {
+  color: #89d012;
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      Another use of pseudo-classes is to match widgets depending on their
+      state. The available pseudo-classes for widget states are :active, :hover
+      :disabled, :selected, :focus, :indeterminate, :checked and :backdrop.
+      In addition, the following pseudo-classes don't have a direct equivalent
+      as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and
+      :visited (for links) and :drop(active) (for highlighting drop targets).
+      Widget state pseudo-classes may only apply to the last element in a selector.
+    </para>
+
+    <example>
+      <title>Theme pressed buttons</title>
+      <programlisting><![CDATA[
+button:active {
+  background-color: #0274d9;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme buttons with the mouse pointer over it</title>
+      <programlisting><![CDATA[
+button:hover {
+  background-color: #3085a9;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme insensitive widgets</title>
+      <programlisting><![CDATA[
+*:disabled {
+  background-color: #320a91;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme checkbuttons that are checked</title>
+      <programlisting><![CDATA[
+checkbutton:checked {
+  background-color: #56f9a0;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme focused labels</title>
+        <programlisting><![CDATA[
+label:focus {
+  background-color: #b4940f;
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Theme inconsistent checkbuttons</title>
+      <programlisting><![CDATA[
+checkbutton:indeterminate {
+  background-color: #20395a;
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      To determine the effective style for a widget, all the matching rule
+      sets are merged. As in CSS, rules apply by specificity, so the rules
+      whose selectors more closely match a node will take precedence
+      over the others.
+    </para>
+
+    <para>
+      The full syntax for selectors understood by GTK+ can be found in the
+      table below. The main difference to CSS is that GTK+ does not currently
+      support attribute selectors.
+    </para>
+
+    <table>
+      <title>Selector syntax</title>
+      <tgroup cols="4">
+        <thead>
+          <row><entry>Pattern</entry><entry>Matches</entry><entry>Reference</entry><entry>Notes</entry></row>
+        </thead>
+        <tbody>
+          <row>
+            <entry>*</entry>
+            <entry>any node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#universal-selector">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E</entry>
+            <entry>any node with name E</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#type-selectors">CSS</ulink></entry>
+            <entry>GTK+ uses the type name of the widget if no CSS name has been set</entry>
+          </row>
+          <row>
+            <entry>E.class</entry>
+            <entry>any E node with the given style class</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#class-html">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E#id</entry>
+            <entry>any E node with the given ID</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#id-selectors">CSS</ulink></entry>
+            <entry>GTK+ uses the widget name as ID</entry>
+          </row>
+          <row>
+            <entry>E:nth‑child(〈nth‑child〉)</entry>
+            <entry>any E node which is the n-th child of its parent node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:nth‑last‑child(〈nth‑child〉)</entry>
+            <entry>any E node which is the n-th child of its parent node, counting from the end</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:first‑child</entry>
+            <entry>any E node which is the first child of its parent node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:last‑child</entry>
+            <entry>any E node which is the last child of its parent node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:only‑child</entry>
+            <entry>any E node which is the only child of its parent node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
+            <entry>Equivalent to E:first-child:last-child</entry>
+          </row>
+          <row>
+            <entry>E:link, E:visited</entry>
+            <entry>any E node which represents a hyperlink, not yet visited (:link) or already visited (:visited)</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#link">CSS</ulink></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED</entry>
+          </row>
+          <row>
+            <entry>E:active, E:hover, E:focus</entry>
+            <entry>any E node which is part of a widget with the corresponding state</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS</ulink></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and GTK_STATE_FLAGS_FOCUSED; GTK+ also allows E:prelight and E:focused</entry>
+          </row>
+          <row>
+            <entry>E:disabled</entry>
+            <entry>any E node which is part of a widget with is disabled</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates">CSS</ulink></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_INSENSITIVE; GTK+ also allows E:insensitive</entry>
+          </row>
+          <row>
+            <entry>E:checked</entry>
+            <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is checked</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates">CSS</ulink></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_CHECKED</entry>
+          </row>
+          <row>
+            <entry>E:indeterminate</entry>
+            <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an inconsistent state</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#indeterminate">CSS3</ulink>,
+                   <ulink url="https://drafts.csswg.org/selectors/#indeterminate">CSS4</ulink></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_INCONSISTENT; GTK+ also allows E:inconsistent</entry>
+          </row>
+          <row>
+            <entry>E:backdrop, E:selected</entry>
+            <entry>any E node which is part of a widget with the corresponding state</entry>
+            <entry></entry>
+            <entry>Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED</entry>
+          </row>
+          <row>
+            <entry>E:not(〈selector〉)</entry>
+            <entry>any E node which does not match the simple selector 〈selector〉</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#negation">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:dir(ltr), E:dir(rtl)</entry>
+            <entry>any E node that has the corresponding text direction</entry>
+            <entry><ulink url="https://drafts.csswg.org/selectors/#the-dir-pseudo">CSS4</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E:drop(active)</entry>
+            <entry>any E node that is an active drop target for a current DND operation</entry>
+            <entry><ulink url="https://drafts.csswg.org/selectors/#drag-pseudos">CSS4</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E F</entry>
+            <entry>any F node which is a descendent of an E node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#descendent-combinators">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E > F</entry>
+            <entry>any F node which is a child of an E node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#child-combinators">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E ~ F</entry>
+            <entry>any F node which is preceded by an E node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+          <row>
+            <entry>E + F</entry>
+            <entry>any F node which is immediately preceded by an E node</entry>
+            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators">CSS</ulink></entry>
+            <entry></entry>
+          </row>
+        </tbody>
+      </tgroup>
+    </table>
+
+<literallayout><code>〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉</code>
+</literallayout>
+
+    <para>
+      To learn more about selectors in CSS, read the
+      <ulink url="http://www.w3.org/TR/css3-selectors/">Selectors</ulink>
+      module of the CSS specification.
+    </para>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Colors</title>
+
+    <para>
+      CSS allows to specify colors in various ways, using numeric
+      values or names from a predefined list of colors.
+    </para>
+
+<literallayout><code>〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉</code>
+<code>〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )</code>
+<code>〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 )</code>
+<code>〈hex color〉 = #〈hex digits〉</code>
+<code>〈alpha value〉 = 〈number〉</code>, clamped to values between 0 and 1
+</literallayout>
+
+    <para>
+      The keyword currentColor resolves to the current value of the
+      color property when used in another property, and to the inherited value
+      of the color property when used in the color property itself.
+    </para>
+
+    <para>
+      The keyword transparent can be considered a shorthand for rgba(0,0,0,0).
+    </para>
+
+    <para>
+      For a list of valid color names and for more background on colors in
+      CSS, see the <ulink url="http://www.w3.org/TR/css3-color/#svg-color">Color</ulink>
+      module of the CSS specification.
+    </para>
+
+    <example>
+      <title>Specifying colors in various ways</title>
+      <programlisting><![CDATA[
+  color: transparent;
+  background-color: red;
+  border-top-color: rgb(128,57,0);
+  border-left-color: rgba(10%,20%,30%,0.5);
+  border-right-color: #ff00cc;
+  border-bottom-color: #ffff0000cccc;
+]]></programlisting>
+    </example>
+
+    <para>
+      GTK+ adds several additional ways to specify colors.
+    </para>
+
+<literallayout><code>〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉</code>
+</literallayout>
+
+    <para>
+      The first is a reference to a color defined via a @define-color rule.
+      The syntax for @define-color rules is as follows:
+    </para>
+
+<literallayout><code>〈define color rule〉 = @define-color 〈name〉 〈color〉</code>
+</literallayout>
+
+    <para>
+      To refer to the color defined by a @define-color rule,
+      use the name from the rule, prefixed with @.
+    </para>
+
+<literallayout><code>〈symbolic color〉 = @〈name〉</code>
+</literallayout>
+
+    <example><title>An example for defining colors</title>
+      <programlisting><![CDATA[
+@define-color bg_color #f9a039;
+
+* {
+background-color: @bg_color;
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      GTK+ also allows to form color expressions, which can be nested and
+      provide a rich language to define colors which are derived from a
+      set of base colors.
+    </para>
+
+<literallayout><code>〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) | mix(〈number〉,〈color〉,〈color〉)</code>
+</literallayout>
+
+    <para>
+      On Windows, GTK+ allows to refer to system colors, as follows:
+    </para>
+
+<literallayout><code>〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉)</code>
+</literallayout>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Images</title>
+
+    <para>
+      CSS allows to specify images in various ways, for backgrounds
+      and borders.
+    </para>
+
+<literallayout><code>〈image〉 = 〈url〉 | 〈crossfade〉 | 〈gradient〉 | 〈gtk image〉</code>
+<code>〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉)</code>
+<code>〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉</code>
+<code>〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] (</code>
+<code>                      [ [ 〈angle〉 | to 〈side or corner〉 ] , ]?</code>
+<code>                      〈color stops〉 )</code>
+<code>〈radial gradient〉 = [ radial‑gradient | repeating‑radial‑gradient ] (</code>
+<code>                      [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]?</code>
+<code>                      〈color stops〉 )</code>
+<code>〈side or corner〉 = [ left | right ] || [ top | bottom ]</code>
+<code>〈color stops〉 =  〈color stop〉 [ , 〈color stop〉]+</code>
+<code>〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]?</code>
+<code>〈shape〉 = circle | ellipse</code>
+<code>〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2}</code>
+<code>〈extent keyword〉 = closest-size | farthest-side | closest-corner | farthest-corner</code>
+</literallayout>
+
+    <para>
+      The simplest way to specify an image in CSS is to load an image
+      file from a URL. CSS does not specify anything about supported file
+      formats; within GTK+, you can expect at least PNG, JPEG and SVG to
+      work. The full list of supported image formats is determined by the
+      available gdk-pixbuf image loaders and may vary between systems.
+    </para>
+
+    <example>
+      <title>Loading an image file</title>
+      <programlisting><![CDATA[
+button {
+  background-image: url("water-lily.png");
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      A crossfade lets you specify an image as an intermediate between two
+      images. Crossfades are specified in the draft of the level 4
+      <ulink url="http://www.w3.org/TR/css4-images">Image</ulink>
+      module of the CSS specification.
+    </para>
+
+    <para>
+    </para>
+
+    <example>
+      <title>Crossfading two images</title>
+      <programlisting><![CDATA[
+button {
+  background-image: cross-fade(50%, url("water-lily.png"), url("buffalo.jpg"));
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      Gradients are images that smoothly fades from one color to another. CSS
+      provides ways to specify repeating and non-repeating linear and radial
+      gradients. Radial gradients can be circular, or axis-aligned ellipses.
+      In addition to CSS gradients, GTK+ has its own -gtk-gradient extensions.
+    </para>
+
+    <para>
+      A linear gradient is created by specifying a gradient line and then several
+      colors placed along that line. The gradient line may be specified using
+      an angle, or by using direction keywords.
+    </para>
+
+    <example>
+      <title>Linear gradients</title>
+      <programlisting><![CDATA[
+button {
+  background-image: linear-gradient(45deg, yellow, blue);
+}
+label {
+  background-image: linear-gradient(to top right, blue 20%, #f0f 80%);
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      A radial gradient is created by specifying a center point and one or two
+      radii. The radii may be given explicitly as lengths or percentages or
+      indirectly, by keywords that specify how the end circle or ellipsis
+      should be positioned relative to the area it is derawn in.
+    </para>
+
+    <example>
+      <title>Radial gradients</title>
+      <programlisting><![CDATA[
+button {
+  background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
+}
+label {
+  background-image: radial-gradient(circle farthest-side at left bottom, red, yellow 50px, green);
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      To learn more about gradients in CSS, including details of how color stops
+      are placed on the gradient line and keywords for specifying radial sizes,
+      you can read the
+      <ulink url="http://www.w3.org/TR/css3-images/#gradients">Image</ulink>
+      module of the CSS specification.
+    </para>
+
+    <para>
+      GTK+ extends the CSS syntax for images and also uses it for specifying icons.
+    </para>
+
+<literallayout><code>〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈win32 theme part〉</code>
+</literallayout>
+
+    <para>
+      GTK+ supports an alternative syntax for linear and radial gradients (which
+      was implemented before CSS gradients were supported).
+    </para>
+
+<literallayout><code>〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉</code>
+<code>〈gtk linear gradient〉 = -gtk-gradient(linear,</code>
+<code>                          [ 〈x position〉 〈y position〉 , ]{2}</code>
+<code>                          〈gtk color stops〉 )</code>
+<code>〈gtk radial gradient〉 = -gtk-gradient(radial,</code>
+<code>                          [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2}</code>
+<code>                          〈gtk color stops〉 )</code>
+<code>〈x position〉 = left | right | center | 〈number〉</code>
+<code>〈y position〉 = top | bottom | center | 〈number〉</code>
+<code>〈radius 〉 = 〈number〉</code>
+<code>〈gtk color stops〉 = 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+</code>
+<code>〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 )</code>
+</literallayout>
+
+    <para>
+      The numbers used to specify x and y positions, radii, as well as the
+      positions of color stops, must be between 0 and 1. The keywords for for
+      x and y positions (left, right, top, bottom, center), map to numeric
+      values of 0, 1 and 0.5 in the obvious way. Color stops using the from() and
+      to() syntax are abbreviations for color-stop with numeric positions of
+      0 and 1, respectively.
+    </para>
+
+    <example>
+      <title>Linear gradients</title>
+      <programlisting><![CDATA[
+button {
+  background-image: -gtk-gradient (linear,
+                                   left top, right bottom,
+                                   from(@yellow), to(@blue));
+}
+label {
+  background-image: -gtk-gradient (linear,
+                                   0 0, 0 1,
+                                   color-stop(0, @yellow),
+                                   color-stop(0.2, @blue),
+                                   color-stop(1, #0f0));
+}
+]]></programlisting>
+    </example>
+
+    <example>
+      <title>Radial gradients</title>
+      <programlisting><![CDATA[
+button {
+  background-image: -gtk-gradient (radial,
+                                   center center, 0,
+                                   center center, 1,
+                                   from(@yellow), to(@green));
+}
+label {
+  background-image: -gtk-gradient (radial,
+                                   0.4 0.4, 0.1,
+                                   0.6 0.6, 0.7,
+                                   color-stop(0, #f00),
+                                   color-stop(0.1, $a0f),
+                                   color-stop(0.2, @yellow),
+                                   color-stop(1, @green));
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      GTK+ has extensive support for loading icons from icon themes. It is
+      accessible from CSS with the -gtk-icontheme syntax.
+    </para>
+
+<literallayout><code>〈themed icon〉 = -gtk-icontheme( 〈icon name〉 )</code>
+</literallayout>
+
+    <para>
+      The specified icon name is used to look up a themed icon, while taking
+      the values of the -gtk-icon-style and -gtk-icon-theme properties. This
+      kind of image is mainly used as value of the -gtk-icon-source property.
+    </para>
+
+    <example>
+      <title>Using themed icons in CSS</title>
+      <programlisting><![CDATA[
+spinner {
+  -gtk-icon-source: -gtk-icontheme('process-working');
+  -gtk-icon-style: symbolic;
+}
+arrow.fancy {
+  -gtk-icon-source: -gtk-icontheme('pan-down');
+  -gtk-icon-theme: 'Oxygen';
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      GTK+ supports scaled rendering on hi-resolution displays. This works
+      best if images can be specify normal and hi-resolution variants. From
+      CSS, this can be done with the -gtk-scaled syntax.
+    </para>
+
+<literallayout><code>〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* )</code>
+</literallayout>
+
+    <para>
+      While -gtk-scaled accepts multiple higher-resolution variants, in
+      practice, it will mostly be used to specify a regular image and one
+      variant for scale 2.
+    </para>
+
+    <example>
+      <title>Scaled images in CSS</title>
+      <programlisting><![CDATA[
+arrow {
+  -gtk-icon-source: -gtk-scaled(url('my-arrow.png'),
+                                url('my-arrow@2.png'));
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      On Windows, GTK+ allows to refer to system theme parts as images, as follows:
+    </para>
+
+<literallayout><code>〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉</code>
+<code>                                              [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* )</code>
+</literallayout>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Transitions</title>
+
+    <para>
+      CSS defines a mechanism by which changes in CSS property values can
+      be made to take effect gradually, instead of all at once. GTK+ supports
+      these transitions as well.
+    </para>
+
+    <para>
+      To enable a transition for a property when a rule set takes effect, it
+      needs to be listed in the transition-property property in that rule set.
+      Only animatable properties can be listed in the transition-property.
+    </para>
+
+    <para>
+      The details of a transition can modified with the transition-duration,
+      transition-timing-function and transition-delay properties.
+    </para>
+
+    <para>
+      To learn more about transitions, you can read the
+      <ulink url="www.w3.org/TR/css3-transitions/">Transitions</ulink>
+      module of the CSS specification.
+    </para>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Animations</title>
+
+    <para>
+      In addition to transitions, which are triggered by changes of the underlying
+      node tree, CSS also supports defined animations. While transitions specify how
+      property values change from one value to a new value, animations explicitly
+      define intermediate property values in keyframes.
+    </para>
+
+    <para>
+      Keyframes are defined with an @-rule which contains one or more of rule sets
+      with special selectors. Property declarations for nonanimatable properties
+      are ignored in these rule sets (with the exception of animation properties).
+    </para>
+
+<literallayout><code>〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 }</code>
+<code>〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* }</code>
+<code>〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector  ]*</code>
+<code>〈single animation selector〉 = from | to | 〈percentage〉</code>
+</literallayout>
+
+    <para>
+      To enable an animation, the name of the keyframes must be set as the value
+      of the animation-name property. The details of the animation can modified
+      with the animation-time, animation-timing-function, animation-iteration-count
+      and other animation properties.
+    </para>
+
+    <example>
+      <title>A CSS animation</title>
+      <programlisting><![CDATA[
+@keyrframes spin {
+  to { -gtk-icon-transform: rotate(1turn); }
+}
+
+spinner {
+  animation-name: spin;
+  animation-time: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+]]></programlisting>
+    </example>
+
+    <para>
+      To learn more about animations, you can read the
+      <ulink url="www.w3.org/TR/css3-animations/">Animations</ulink>
+      module of the CSS specification.
+    </para>
+
+  </refsect2>
+
+  <refsect2>
+    <title>Key bindings</title>
+
+    <para>
+      In order to extend key bindings affecting different widgets,
+      GTK+ supports the @binding-set rule to parse a set of bind/unbind
+      directives. Note that in order to take effect, the binding sets
+      defined in this way must be associated with rule sets by setting
+      the -gtk-key-bindings property.
+    </para>
+
+    <para>
+      The syntax for @binding-set rules is as follows:
+    </para>
+
+<literallayout><code>〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* }</code>
+<code>〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }</code>
+<code>〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? }</code>
+<code>〈unbinding〉 = unbind "〈accelerator〉" ;</code>
+</literallayout>
+
+    <para>
+      where 〈accelerator〉 is a string that can be parsed by gtk_accelerator_parse(),
+      〈signal name〉 is the name of a keybinding signal of the widget in question,
+      and the 〈argument〉 list must be according to the signals declaration.
+    </para>
+
+    <example>
+      <title>An example for using the @binding-set rule</title>
+      <programlisting><![CDATA[
+@binding-set binding-set1 {
+  bind "<alt>Left" { "move-cursor" (visual-positions, -3, 0) };
+  unbind "End";
+};
+
+@binding-set binding-set2 {
+  bind "<alt>Right" { "move-cursor" (visual-positions, 3, 0) };
+  bind "<alt>KP_space" { "delete-from-cursor" (whitespace, 1)
+                         "insert-at-cursor" (" ") };
+};
+
+entry {
+  -gtk-key-bindings: binding-set1, binding-set2;
+}
+]]></programlisting>
+    </example>
+
+  </refsect2>
+
+</refsect1>
+</refentry>
diff --git a/docs/reference/gtk/css.xml b/docs/reference/gtk/css-properties.xml
index 3ea9f6d8ed..053cd14150 100644
--- a/docs/reference/gtk/css.xml
+++ b/docs/reference/gtk/css-properties.xml
@@ -2,7 +2,7 @@
 <!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
                "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
 ]>
-<refentry id="chap-css">
+<refentry id="chap-css-overview">
 <refmeta>
 <refentrytitle>GTK+ CSS</refentrytitle>
 <manvolnum>3</manvolnum>
@@ -12,7 +12,7 @@
 <refnamediv>
 <refname>GTK+ CSS</refname>
 <refpurpose>
-Overview of CSS in GTK+
+GTK+ CSS Properties
 </refpurpose>
 </refnamediv>
 
@@ -31,966 +31,13 @@ We use
 〉 U+232A Right-pointing Angle Bracket
 
 for indicating non-terminals in syntax productions.
--->
-
-<refsect1 id="css-overview">
-  <title>Overview of CSS in GTK+</title>
-
-  <para>
-    This chapter describes in detail how GTK+ uses CSS for styling
-    and layout.
-  </para>
-
-  <para>
-    We loosely follow the CSS
-    <ulink url="http://www.w3.org/TR/css-values/#value-defs">value definition</ulink>
-    specification in the formatting of syntax productions.
-    <simplelist>
-      <member>Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here are literals</member>
-      <member>Juxtaposition means all components must occur, in the given order</member>
-      <member>A double ampersand (&amp;&amp;) means all components must occur, in any order</member>
-      <member>A double bar (||) means one or more of the components must occur, in any order</member>
-      <member>A single bar (|) indicates an alternative; exactly one of the components must occur</member>
-      <member>Brackets ([]) are used for grouping</member>
-      <member>A question mark (?) means that the preceding component is optional</member>
-      <member>An asterisk (*) means zero or more copies of the preceding component</member>
-      <member>A plus (+) means one or more copies of the preceding component</member>
-      <member>A number in curly braces ({n}) means that the preceding component occurs exactly n times</member>
-      <member>Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times and at most n times</member>
-    </simplelist>
-  </para>
-
-  <refsect2>
-    <title>CSS nodes</title>
-
-    <para>
-      GTK+ applies the style information found in style sheets by matching
-      the selectors against a tree of nodes. Each node in the tree has a
-      name, a state and possibly style classes. The children of each node
-      are linearly ordered.
-    </para>
-
-    <para>
-      Every widget has one or more of these CSS nodes, and determines their
-      name, state, style classes and how they are layed out as children and
-      siblings in the overall node tree. The documentation for each widget
-      explains what CSS nodes it has.
-    </para>
-
-    <example>
-      <title>The CSS nodes of a GtkScale</title>
-      <programlisting><![CDATA[
-scale[.fine-tune]
-├── marks.top
-│   ├── mark
-┊   ┊
-│   ╰── mark
-├── trough
-│   ├── slider
-│   ├── [highlight]
-│   ╰── [fill]
-╰── marks.bottom
-    ├── mark
-    ┊
-    ╰── mark
-]]></programlisting>
-    </example>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Style sheets</title>
-
-    <para>
-      The basic structure of the style sheets understood by GTK+ is
-      a series of statements, which are either rule sets or “@-rules”,
-      separated by whitespace.
-    </para>
-
-    <para>
-      A rule set consists of a selector and a declaration block, which is
-      a series of declarations enclosed in curly braces. The declarations
-      are separated by semicolons. Multiple selectors can share the same
-      declaration block, by putting all the separators in front of the block,
-      separated by commas.
-    </para>
-
-    <example>
-      <title>A rule set with two selectors</title>
-      <programlisting><![CDATA[
-button, entry {
-  color: #ff00ea;
-  font: Comic Sans 12
-}
-]]></programlisting>
-    </example>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Importing style sheets</title>
-
-    <para>
-      GTK+ supports the CSS @import rule, in order to load another
-      style sheet in addition to the currently parsed one.
-    </para>
-
-    <para>
-      The syntax for @import rules is as follows:
-    </para>
-
-    <literallayout>
-〈import rule〉 = @import [ 〈url〉 | 〈string〉] ;
-〈url〉 = url( 〈string〉)
-    </literallayout>
-
-    <example><title>An example for using the @import rule</title>
-      <programlisting><![CDATA[
-@import url("path/to/common.css");
-]]></programlisting>
-    </example>
-
-    <para>
-      To learn more about the @import rule, you can read the
-      <ulink url="http://www.w3.org/TR/css3-cascade/#at-import">Cascading</ulink>
-      module of the CSS specification.
-    </para>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Selectors</title>
-
-    <para>
-      Selectors work very similar to the way they do in CSS.
-    </para>
-
-    <para>
-      Typically widgets have one or more CSS nodes with element names (GTK+ falls
-      back to using the widget type if a widget has no element name) and style
-      classes. When style classes are used in selectors, they have to be prefixed
-      with a period. Widget names can be used in selectors like IDs. When used
-      in a selector, widget names must be prefixed with a &num; character.
-    </para>
-
-    <para>
-      In more complicated situations, selectors can be combined in various ways.
-      To require that a node satisfies several conditions, combine several selectors
-      into one by concatenating them. To only match a node when it occurs inside some
-      other node, write the two selectors after each other, separated by whitespace.
-      To restrict the match to direct children of the parent node, insert a &gt;
-      character between the two selectors.
-    </para>
-
-    <example>
-      <title>Theme labels that are descendants of a window</title>
-      <programlisting><![CDATA[
-window label {
-  background-color: #898989
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme notebooks, and anything within</title>
-      <programlisting><![CDATA[
-notebook {
-  background-color: #a939f0
-}
-]]></programlisting>
-    </example>
- 
-    <example>
-      <title>Theme combo boxes, and entries that are direct children of a notebook</title>
-      <programlisting><![CDATA[
-combobox,
-notebook > entry {
-  color: @fg_color;
-  background-color: #1209a2
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme any widget within a GtkBin</title>
-      <programlisting><![CDATA[
-GtkBin * {
-  font: Sans 20
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme a label named title-label</title>
-      <programlisting><![CDATA[
-label#title-label {
-  font: Sans 15
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme any widget named main-entry</title>
-      <programlisting><![CDATA[
-#main-entry {
-  background-color: #f0a810
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme all widgets with the style class entry</title>
-      <programlisting><![CDATA[
-.entry {
-  color: #39f1f9;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme the entry of a GtkSpinButton</title>
-      <programlisting><![CDATA[
-spinbutton.entry {
-  color: 900185;
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      It is possible to select CSS nodes depending on their position amongst
-      their siblings by applying pseudo-classes to the selector, like :first-child,
-      :last-child or :nth-child(even). When used in selectors, pseudo-classes
-      must be prefixed with a : character.
-    </para>
-
-    <example>
-      <title>Theme labels in the first notebook tab</title>
-      <programlisting><![CDATA[
-notebook tab:first-child label {
-  color: #89d012;
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      Another use of pseudo-classes is to match widgets depending on their
-      state. The available pseudo-classes for widget states are :active, :hover
-      :disabled, :selected, :focus, :indeterminate, :checked and :backdrop.
-      In addition, the following pseudo-classes don't have a direct equivalent
-      as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and
-      :visited (for links) and :drop(active) (for highlighting drop targets).
-      Widget state pseudo-classes may only apply to the last element in a selector.
-    </para>
-
-    <example>
-      <title>Theme pressed buttons</title>
-      <programlisting><![CDATA[
-button:active {
-  background-color: #0274d9;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme buttons with the mouse pointer over it</title>
-      <programlisting><![CDATA[
-button:hover {
-  background-color: #3085a9;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme insensitive widgets</title>
-      <programlisting><![CDATA[
-*:disabled {
-  background-color: #320a91;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme checkbuttons that are checked</title>
-      <programlisting><![CDATA[
-checkbutton:checked {
-  background-color: #56f9a0;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme focused labels</title>
-        <programlisting><![CDATA[
-label:focus {
-  background-color: #b4940f;
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Theme inconsistent checkbuttons</title>
-      <programlisting><![CDATA[
-checkbutton:indeterminate {
-  background-color: #20395a;
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      To determine the effective style for a widget, all the matching rule
-      sets are merged. As in CSS, rules apply by specificity, so the rules
-      whose selectors more closely match a node will take precedence
-      over the others.
-    </para>
-
-    <para>
-      The full syntax for selectors understood by GTK+ can be found in the
-      table below. The main difference to CSS is that GTK+ does not currently
-      support attribute selectors.
-    </para>
-
-    <table>
-      <title>Selector syntax</title>
-      <tgroup cols="4">
-        <thead>
-          <row><entry>Pattern</entry><entry>Matches</entry><entry>Reference</entry><entry>Notes</entry></row>
-        </thead>
-        <tbody>
-          <row>
-            <entry>*</entry>
-            <entry>any node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#universal-selector">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E</entry>
-            <entry>any node with name E</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#type-selectors">CSS</ulink></entry>
-            <entry>GTK+ uses the type name of the widget if no CSS name has been set</entry>
-          </row>
-          <row>
-            <entry>E.class</entry>
-            <entry>any E node with the given style class</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#class-html">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E#id</entry>
-            <entry>any E node with the given ID</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#id-selectors">CSS</ulink></entry>
-            <entry>GTK+ uses the widget name as ID</entry>
-          </row>
-          <row>
-            <entry>E:nth‑child(〈nth‑child〉)</entry>
-            <entry>any E node which is the n-th child of its parent node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:nth‑last‑child(〈nth‑child〉)</entry>
-            <entry>any E node which is the n-th child of its parent node, counting from the end</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:first‑child</entry>
-            <entry>any E node which is the first child of its parent node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:last‑child</entry>
-            <entry>any E node which is the last child of its parent node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:only‑child</entry>
-            <entry>any E node which is the only child of its parent node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS</ulink></entry>
-            <entry>Equivalent to E:first-child:last-child</entry>
-          </row>
-          <row>
-            <entry>E:link, E:visited</entry>
-            <entry>any E node which represents a hyperlink, not yet visited (:link) or already visited (:visited)</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#link">CSS</ulink></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED</entry>
-          </row>
-          <row>
-            <entry>E:active, E:hover, E:focus</entry>
-            <entry>any E node which is part of a widget with the corresponding state</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS</ulink></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and GTK_STATE_FLAGS_FOCUSED; GTK+ also allows E:prelight and E:focused</entry>
-          </row>
-          <row>
-            <entry>E:disabled</entry>
-            <entry>any E node which is part of a widget with is disabled</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates">CSS</ulink></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_INSENSITIVE; GTK+ also allows E:insensitive</entry>
-          </row>
-          <row>
-            <entry>E:checked</entry>
-            <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is checked</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates">CSS</ulink></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_CHECKED</entry>
-          </row>
-          <row>
-            <entry>E:indeterminate</entry>
-            <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an inconsistent state</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#indeterminate">CSS3</ulink>,
-                   <ulink url="https://drafts.csswg.org/selectors/#indeterminate">CSS4</ulink></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_INCONSISTENT; GTK+ also allows E:inconsistent</entry>
-          </row>
-          <row>
-            <entry>E:backdrop, E:selected</entry>
-            <entry>any E node which is part of a widget with the corresponding state</entry>
-            <entry></entry>
-            <entry>Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED</entry>
-          </row>
-          <row>
-            <entry>E:not(〈selector〉)</entry>
-            <entry>any E node which does not match the simple selector 〈selector〉</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#negation">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:dir(ltr), E:dir(rtl)</entry>
-            <entry>any E node that has the corresponding text direction</entry>
-            <entry><ulink url="https://drafts.csswg.org/selectors/#the-dir-pseudo">CSS4</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E:drop(active)</entry>
-            <entry>any E node that is an active drop target for a current DND operation</entry>
-            <entry><ulink url="https://drafts.csswg.org/selectors/#drag-pseudos">CSS4</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E F</entry>
-            <entry>any F node which is a descendent of an E node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#descendent-combinators">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E > F</entry>
-            <entry>any F node which is a child of an E node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#child-combinators">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E ~ F</entry>
-            <entry>any F node which is preceded by an E node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-          <row>
-            <entry>E + F</entry>
-            <entry>any F node which is immediately preceded by an E node</entry>
-            <entry><ulink url="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators">CSS</ulink></entry>
-            <entry></entry>
-          </row>
-        </tbody>
-      </tgroup>
-    </table>
-
-    <literallayout>
-〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉
-    </literallayout>
-
-    <para>
-      To learn more about selectors in CSS, read the
-      <ulink url="http://www.w3.org/TR/css3-selectors/">Selectors</ulink>
-      module of the CSS specification.
-    </para>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Colors</title>
-
-    <para>
-      CSS allows to specify colors in various ways, using numeric
-      values or names from a predefined list of colors.
-    </para>
-
-    <literallayout>
-〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉
-〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )
-〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 )
-〈hex color〉 = #〈hex digits〉
-〈alpha value〉 = 〈number〉, clamped to values between 0 and 1.
-    </literallayout>
-
-    <para>
-      The keyword currentColor resolves to the current value of the
-      color property when used in another property, and to the inherited value
-      of the color property when used in the color property itself.
-    </para>
-
-    <para>
-      The keyword transparent can be considered a shorthand for rgba(0,0,0,0).
-    </para>
-
-    <para>
-      For a list of valid color names and for more background on colors in
-      CSS, see the <ulink url="http://www.w3.org/TR/css3-color/#svg-color">Color</ulink>
-      module of the CSS specification.
-    </para>
-
-    <example>
-      <title>Specifying colors in various ways</title>
-      <programlisting><![CDATA[
-  color: transparent;
-  background-color: red;
-  border-top-color: rgb(128,57,0);
-  border-left-color: rgba(10%,20%,30%,0.5);
-  border-right-color: #ff00cc;
-  border-bottom-color: #ffff0000cccc;
-]]></programlisting>
-    </example>
-
-    <para>
-      GTK+ adds several additional ways to specify colors.
-    </para>
-
-    <literallayout>
-〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉
-    </literallayout>
-
-    <para>
-      The first is a reference to a color defined via a @define-color rule.
-      The syntax for @define-color rules is as follows:
-    </para>
-
-    <literallayout>
-〈define color rule〉 = @define-color 〈name〉 〈color〉
-    </literallayout>
-
-    <para>
-      To refer to the color defined by a @define-color rule,
-      use the name from the rule, prefixed with @.
-    </para>
-
-    <literallayout>
-〈symbolic color〉 = @〈name〉
-    </literallayout>
-
-    <example><title>An example for defining colors</title>
-      <programlisting><![CDATA[
-@define-color bg_color #f9a039;
-
-* {
-background-color: @bg_color;
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      GTK+ also allows to form color expressions, which can be nested and
-      provide a rich language to define colors which are derived from a
-      set of base colors.
-    </para>
-
-    <literallayout>
-〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) | mix(〈number〉,〈color〉,〈color〉)
-    </literallayout>
-
-    <para>
-      On Windows, GTK+ allows to refer to system colors, as follows:
-    </para>
-
-    <literallayout>
-〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉)
-    </literallayout>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Images</title>
-
-    <para>
-      CSS allows to specify images in various ways, for backgrounds
-      and borders.
-    </para>
-
-    <literallayout>
-〈image〉 = 〈url〉 | 〈crossfade〉 | 〈gradient〉 | 〈gtk image〉
-〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉)
-〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉
-〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] (
-                      [ [ 〈angle〉 | to 〈side or corner〉 ] , ]?
-                      〈color stops〉 )
-〈radial gradient〉 = [ radial‑gradient | repeating‑radial‑gradient ] (
-                      [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]?
-                      〈color stops〉 )
-〈side or corner〉 = [ left | right ] || [ top | bottom ]
-〈color stops〉 =  〈color stop〉 [ , 〈color stop〉]+
-〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]?
-〈shape〉 = circle | ellipse
-〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2}
-〈extent keyword〉 = closest-size | farthest-side | closest-corner | farthest-corner
-    </literallayout>
-
-    <para>
-      The simplest way to specify an image in CSS is to load an image
-      file from a URL. CSS does not specify anything about supported file
-      formats; within GTK+, you can expect at least PNG, JPEG and SVG to
-      work. The full list of supported image formats is determined by the
-      available gdk-pixbuf image loaders and may vary between systems.
-    </para>
-
-    <example>
-      <title>Loading an image file</title>
-      <programlisting><![CDATA[
-button {
-  background-image: url("water-lily.png");
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      A crossfade lets you specify an image as an intermediate between two
-      images. Crossfades are specified in the draft of the level 4
-      <ulink url="http://www.w3.org/TR/css4-images">Image</ulink>
-      module of the CSS specification.
-    </para>
-
-    <para>
-    </para>
-
-    <example>
-      <title>Crossfading two images</title>
-      <programlisting><![CDATA[
-button {
-  background-image: cross-fade(50%, url("water-lily.png"), url("buffalo.jpg"));
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      Gradients are images that smoothly fades from one color to another. CSS
-      provides ways to specify repeating and non-repeating linear and radial
-      gradients. Radial gradients can be circular, or axis-aligned ellipses.
-      In addition to CSS gradients, GTK+ has its own -gtk-gradient extensions.
-    </para>
-
-    <para>
-      A linear gradient is created by specifying a gradient line and then several
-      colors placed along that line. The gradient line may be specified using
-      an angle, or by using direction keywords.
-    </para>
-
-    <example>
-      <title>Linear gradients</title>
-      <programlisting><![CDATA[
-button {
-  background-image: linear-gradient(45deg, yellow, blue);
-}
-label {
-  background-image: linear-gradient(to top right, blue 20%, #f0f 80%);
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      A radial gradient is created by specifying a center point and one or two
-      radii. The radii may be given explicitly as lengths or percentages or
-      indirectly, by keywords that specify how the end circle or ellipsis
-      should be positioned relative to the area it is derawn in.
-    </para>
-
-    <example>
-      <title>Radial gradients</title>
-      <programlisting><![CDATA[
-button {
-  background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
-}
-label {
-  background-image: radial-gradient(circle farthest-side at left bottom, red, yellow 50px, green);
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      To learn more about gradients in CSS, including details of how color stops
-      are placed on the gradient line and keywords for specifying radial sizes,
-      you can read the
-      <ulink url="http://www.w3.org/TR/css3-images/#gradients">Image</ulink>
-      module of the CSS specification.
-    </para>
-
-    <para>
-      GTK+ extends the CSS syntax for images and also uses it for specifying icons.
-    </para>
-
-    <literallayout>
-〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈win32 theme part〉
-    </literallayout>
-
-    <para>
-      GTK+ supports an alternative syntax for linear and radial gradients (which
-      was implemented before CSS gradients were supported).
-    </para>
-
-    <literallayout>
-〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉
-〈gtk linear gradient〉 = -gtk-gradient(linear,
-                          [ 〈x position〉 〈y position〉 , ]{2}
-                          〈gtk color stops〉 )
-〈gtk radial gradient〉 = -gtk-gradient(radial,
-                          [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2}
-                          〈gtk color stops〉 )
-〈x position〉 = left | right | center | 〈number〉
-〈y position〉 = top | bottom | center | 〈number〉
-〈radius 〉 = 〈number〉
-〈gtk color stops〉 = 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+
-〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 )
-    </literallayout>
 
-    <para>
-      The numbers used to specify x and y positions, radii, as well as the
-      positions of color stops, must be between 0 and 1. The keywords for for
-      x and y positions (left, right, top, bottom, center), map to numeric
-      values of 0, 1 and 0.5 in the obvious way. Color stops using the from() and
-      to() syntax are abbreviations for color-stop with numeric positions of
-      0 and 1, respectively.
-    </para>
-
-    <example>
-      <title>Linear gradients</title>
-      <programlisting><![CDATA[
-button {
-  background-image: -gtk-gradient (linear,
-                                   left top, right bottom,
-                                   from(@yellow), to(@blue));
-}
-label {
-  background-image: -gtk-gradient (linear,
-                                   0 0, 0 1,
-                                   color-stop(0, @yellow),
-                                   color-stop(0.2, @blue),
-                                   color-stop(1, #0f0));
-}
-]]></programlisting>
-    </example>
-
-    <example>
-      <title>Radial gradients</title>
-      <programlisting><![CDATA[
-button {
-  background-image: -gtk-gradient (radial,
-                                   center center, 0,
-                                   center center, 1,
-                                   from(@yellow), to(@green));
-}
-label {
-  background-image: -gtk-gradient (radial,
-                                   0.4 0.4, 0.1,
-                                   0.6 0.6, 0.7,
-                                   color-stop(0, #f00),
-                                   color-stop(0.1, $a0f),
-                                   color-stop(0.2, @yellow),
-                                   color-stop(1, @green));
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      GTK+ has extensive support for loading icons from icon themes. It is
-      accessible from CSS with the -gtk-icontheme syntax.
-    </para>
-
-    <literallayout>
-〈themed icon〉 = -gtk-icontheme( 〈icon name〉 )
-    </literallayout>
-
-    <para>
-      The specified icon name is used to look up a themed icon, while taking
-      the values of the -gtk-icon-style and -gtk-icon-theme properties. This
-      kind of image is mainly used as value of the -gtk-icon-source property.
-    </para>
-
-    <example>
-      <title>Using themed icons in CSS</title>
-      <programlisting><![CDATA[
-spinner {
-  -gtk-icon-source: -gtk-icontheme('process-working');
-  -gtk-icon-style: symbolic;
-}
-arrow.fancy {
-  -gtk-icon-source: -gtk-icontheme('pan-down');
-  -gtk-icon-theme: 'Oxygen';
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      GTK+ supports scaled rendering on hi-resolution displays. This works
-      best if images can be specify normal and hi-resolution variants. From
-      CSS, this can be done with the -gtk-scaled syntax.
-    </para>
-
-    <literallayout>
-〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* )
-    </literallayout>
-
-    <para>
-      While -gtk-scaled accepts multiple higher-resolution variants, in
-      practice, it will mostly be used to specify a regular image and one
-      variant for scale 2.
-    </para>
-
-    <example>
-      <title>Scaled images in CSS</title>
-      <programlisting><![CDATA[
-arrow {
-  -gtk-icon-source: -gtk-scaled(url('my-arrow.png'),
-                                url('my-arrow@2.png'));
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      On Windows, GTK+ allows to refer to system theme parts as images, as follows:
-    </para>
-
-    <literallayout>
-〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉
-                                                 [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* )
-    </literallayout>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Transitions</title>
-
-    <para>
-      CSS defines a mechanism by which changes in CSS property values can
-      be made to take effect gradually, instead of all at once. GTK+ supports
-      these transitions as well.
-    </para>
-
-    <para>
-      To enable a transition for a property when a rule set takes effect, it
-      needs to be listed in the transition-property property in that rule set.
-      Only animatable properties can be listed in the transition-property.
-    </para>
-
-    <para>
-      The details of a transition can modified with the transition-duration,
-      transition-timing-function and transition-delay properties.
-    </para>
-
-    <para>
-      To learn more about transitions, you can read the
-      <ulink url="www.w3.org/TR/css3-transitions/">Transitions</ulink>
-      module of the CSS specification.
-    </para>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Animations</title>
-
-    <para>
-      In addition to transitions, which are triggered by changes of the underlying
-      node tree, CSS also supports defined animations. While transitions specify how
-      property values change from one value to a new value, animations explicitly
-      define intermediate property values in keyframes.
-    </para>
-
-    <para>
-      Keyframes are defined with an @-rule which contains one or more of rule sets
-      with special selectors. Property declarations for nonanimatable properties
-      are ignored in these rule sets (with the exception of animation properties).
-    </para>
-
-    <literallayout>
-〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 }
-〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* }
-〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector  ]*
-〈single animation selector〉 = from | to | 〈percentage〉
-    </literallayout>
-
-    <para>
-      To enable an animation, the name of the keyframes must be set as the value
-      of the animation-name property. The details of the animation can modified
-      with the animation-time, animation-timing-function, animation-iteration-count
-      and other animation properties.
-    </para>
-
-    <example>
-      <title>A CSS animation</title>
-      <programlisting><![CDATA[
-@keyrframes spin {
-  to { -gtk-icon-transform: rotate(1turn); }
-}
-
-spinner {
-  animation-name: spin;
-  animation-time: 1s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-]]></programlisting>
-    </example>
-
-    <para>
-      To learn more about animations, you can read the
-      <ulink url="www.w3.org/TR/css3-animations/">Animations</ulink>
-      module of the CSS specification.
-    </para>
-
-  </refsect2>
-
-  <refsect2>
-    <title>Key bindings</title>
-
-    <para>
-      In order to extend key bindings affecting different widgets,
-      GTK+ supports the @binding-set rule to parse a set of bind/unbind
-      directives. Note that in order to take effect, the binding sets
-      defined in this way must be associated with rule sets by setting
-      the -gtk-key-bindings property.
-    </para>
-
-    <para>
-      The syntax for @binding-set rules is as follows:
-      <literallayout>
-〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* }
-〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }
-〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? }
-〈unbinding〉 = unbind "〈accelerator〉" ;
-      </literallayout>
-      where 〈accelerator〉 is a string that can be parsed by gtk_accelerator_parse(),
-      〈signal name〉 is the name of a keybinding signal of the widget in question,
-      and the 〈argument〉 list must be according to the signals declaration.
-    </para>
-
-    <example>
-      <title>An example for using the @binding-set rule</title>
-      <programlisting><![CDATA[
-@binding-set binding-set1 {
-  bind "<alt>Left" { "move-cursor" (visual-positions, -3, 0) };
-  unbind "End";
-};
-
-@binding-set binding-set2 {
-  bind "<alt>Right" { "move-cursor" (visual-positions, 3, 0) };
-  bind "<alt>KP_space" { "delete-from-cursor" (whitespace, 1)
-                         "insert-at-cursor" (" ") };
-};
-
-entry {
-  -gtk-key-bindings: binding-set1, binding-set2;
-}
-]]></programlisting>
-    </example>
-
-  </refsect2>
+We use <literallayout> for syntax productions, and each line is put in a <code>
+(the latter is a workaround for deficiences in the developer.gnome.org post-processing).
+-->
 
-  <refsect2>
-    <title>Supported Properties</title>
+<refsect1 id="css-properties">
+  <title>Supported CSS Properties</title>
 
     <para>
       GTK+ supports CSS properties and shorthands as far as they can be applied
@@ -1006,12 +53,11 @@ entry {
       The following basic datatypes are used throughout:
     </para>
 
-    <literallayout>
-〈length〉 = 〈number〉 [ px | pt | em | ex | pc | in | cm | mm ]
-〈percentage〉 = 〈number〉 %
-〈angle〉 = 〈number〉 [ deg | grad | turn ]
-〈time〉 = 〈number〉 [ s | ms ]
-    </literallayout>
+<literallayout><code>〈length〉 = 〈number〉 [ px | pt | em | ex | pc | in | cm | mm ]</code>
+<code>〈percentage〉 = 〈number〉 %</code>
+<code>〈angle〉 = 〈number〉 [ deg | grad | turn ]</code>
+<code>〈time〉 = 〈number〉 [ s | ms ]</code>
+</literallayout>
 
     <para>
       Length values with the em or ex units are resolved using the font
@@ -1051,8 +97,8 @@ entry {
           <tbody>
             <row>
               <entry>color</entry>
-              <entry>〈color〉</entry>
-              <entry>rgba(1,1,1,1)</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>rgba(1,1,1,1)</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color">CSS2</ulink>,
@@ -1061,8 +107,8 @@ entry {
             </row>
             <row>
               <entry>opacity</entry>
-              <entry>〈alpha value〉</entry>
-              <entry>1</entry>
+              <entry><code>〈alpha value〉</code></entry>
+              <entry><code>1</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-color/#opacity">CSS3</ulink></entry>
@@ -1089,7 +135,7 @@ entry {
           <tbody>
             <row>
               <entry>font‑family</entry>
-              <entry>〈family name〉 [ , 〈family name〉 ]*</entry>
+              <entry><code>〈family name〉 [ , 〈family name〉 ]*</code></entry>
               <entry>gtk-font-name setting</entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1099,7 +145,7 @@ entry {
             </row>
             <row>
               <entry>font‑size</entry>
-              <entry>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</entry>
+              <entry><code>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</code></entry>
               <entry>gtk-font-name setting</entry>
               <entry>✓</entry>
               <entry>✓</entry>
@@ -1109,8 +155,8 @@ entry {
             </row>
             <row>
               <entry>font‑style</entry>
-              <entry>normal | oblique | italic</entry>
-              <entry>normal</entry>
+              <entry><code>normal | oblique | italic</code></entry>
+              <entry><code>normal</code></entry>
               <entry>✓</entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">CSS2</ulink>,
@@ -1119,8 +165,8 @@ entry {
             </row>
             <row>
               <entry>font‑variant</entry>
-              <entry>normal | small-caps</entry>
-              <entry>normal</entry>
+              <entry><code>normal | small-caps</code></entry>
+              <entry><code>normal</code></entry>
               <entry>✓</entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">CSS2</ulink>,
@@ -1129,8 +175,8 @@ entry {
             </row>
             <row>
               <entry>font‑weight</entry>
-              <entry>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</entry>
-              <entry>normal</entry>
+              <entry><code>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></entry>
+              <entry><code>normal</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">CSS2</ulink>,
@@ -1139,8 +185,8 @@ entry {
             </row>
             <row>
               <entry>font‑stretch</entry>
-              <entry>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</entry>
-              <entry>normal</entry>
+              <entry><code>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</code></entry>
+              <entry><code>normal</code></entry>
               <entry>✓</entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS3</ulink></entry>
@@ -1148,7 +194,7 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑dpi</entry>
-              <entry>〈number〉</entry>
+              <entry><code>〈number〉</code></entry>
               <entry>screen resolution</entry>
               <entry>✓</entry>
               <entry>✓</entry>
@@ -1164,7 +210,7 @@ entry {
           <tbody>
             <row>
               <entry>font</entry>
-              <entry>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</entry>
+              <entry><code>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand">CSS2</ulink>,
 <ulink url="http://www.w3.org/TR/css3-fonts/#font-prop">CSS3</ulink></entry>
@@ -1174,10 +220,9 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large
-〈relative size〉 = larger | smaller
-      </literallayout>
+<literallayout><code>〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large</code>
+<code>〈relative size〉 = larger | smaller</code>
+</literallayout>
 
       <para>
         The font properties determine the font to use for rendering text. Relative
@@ -1196,8 +241,8 @@ entry {
           <tbody>
             <row>
               <entry>caret-color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-ui/#caret-color">CSS3</ulink></entry>
@@ -1205,8 +250,8 @@ entry {
             </row>
             <row>
               <entry>-gtk-secondary-caret-color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1232,8 +277,8 @@ entry {
           <tbody>
             <row>
               <entry>letter‑spacing</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-text/#letter-spacing">CSS3</ulink></entry>
@@ -1241,8 +286,8 @@ entry {
             </row>
             <row>
               <entry>text‑decoration‑line</entry>
-              <entry>none | underline | line-through</entry>
-              <entry>none</entry>
+              <entry><code>none | underline | line-through</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration">CSS2</ulink>,
@@ -1251,8 +296,8 @@ entry {
             </row>
             <row>
               <entry>text‑decoration‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS3</ulink></entry>
@@ -1260,8 +305,8 @@ entry {
             </row>
             <row>
               <entry>text‑decoration‑style</entry>
-              <entry>solid | double | wavy</entry>
-              <entry>solid</entry>
+              <entry><code>solid | double | wavy</code></entry>
+              <entry><code>solid</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS3</ulink></entry>
@@ -1269,8 +314,8 @@ entry {
             </row>
             <row>
               <entry>text‑shadow</entry>
-              <entry>none | 〈shadow〉</entry>
-              <entry>none</entry>
+              <entry><code>none | 〈shadow〉</code></entry>
+              <entry><code>none</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS3</ulink></entry>
@@ -1285,7 +330,7 @@ entry {
           <tbody>
             <row>
               <entry>text‑decoration</entry>
-              <entry>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</entry>
+              <entry><code>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS3</ulink></entry>
               <entry></entry>
@@ -1294,9 +339,8 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈shadow〉 = 〈length〉 〈length〉 〈color〉?
-      </literallayout>
+<literallayout><code>〈shadow〉 = 〈length〉 〈length〉 〈color〉?</code>
+</literallayout>
 
       <para>
         The text decoration properties determine whether to apply extra decorations
@@ -1314,8 +358,8 @@ entry {
           <tbody>
             <row>
               <entry>‑gtk‑icon‑source</entry>
-              <entry>builtin | 〈image〉 | none</entry>
-              <entry>builtin</entry>
+              <entry><code>builtin | 〈image〉 | none</code></entry>
+              <entry><code>builtin</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1323,8 +367,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑transform</entry>
-              <entry>none | 〈transform〉+</entry>
-              <entry>none</entry>
+              <entry><code>none | 〈transform〉+</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1332,8 +376,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑style</entry>
-              <entry>requested | regular | symbolic</entry>
-              <entry>requested</entry>
+              <entry><code>requested | regular | symbolic</code></entry>
+              <entry><code>requested</code></entry>
               <entry>✓</entry>
               <entry></entry>
               <entry></entry>
@@ -1341,7 +385,7 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑theme</entry>
-              <entry>〈name〉</entry>
+              <entry><code>〈name〉</code></entry>
               <entry>current icon theme</entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1350,8 +394,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑palette</entry>
-              <entry>default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</entry>
-              <entry>default</entry>
+              <entry><code>default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code></entry>
+              <entry><code>default</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1359,8 +403,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑shadow</entry>
-              <entry>none | 〈shadow〉</entry>
-              <entry>none</entry>
+              <entry><code>none | 〈shadow〉</code></entry>
+              <entry><code>none</code></entry>
               <entry>✓</entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1368,8 +412,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑icon‑effect</entry>
-              <entry>none | highlight | dim</entry>
-              <entry>none</entry>
+              <entry><code>none | highlight | dim</code></entry>
+              <entry><code>none</code></entry>
               <entry>✓</entry>
               <entry></entry>
               <entry></entry>
@@ -1379,11 +423,10 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |
-                scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |
-                skewX( 〈angle〉 ) |  skewY( 〈angle〉 )
-      </literallayout>
+<literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |</code>
+<code>                scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code>
+<code>                skewX( 〈angle〉 ) |  skewY( 〈angle〉 )</code>
+</literallayout>
 
       <para>
         The icon properties are used by widgets that are rendering 'icons', such
@@ -1405,8 +448,8 @@ entry {
           <tbody>
             <row>
               <entry>min‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width">CSS2</ulink>,
@@ -1415,8 +458,8 @@ entry {
             </row>
             <row>
               <entry>min‑height</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height">CSS2</ulink>,
@@ -1425,8 +468,8 @@ entry {
             </row>
             <row>
               <entry>margin‑top</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top">CSS2</ulink>,
@@ -1435,8 +478,8 @@ entry {
             </row>
             <row>
               <entry>margin‑right</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right">CSS2</ulink>,
@@ -1445,8 +488,8 @@ entry {
             </row>
             <row>
               <entry>margin‑bottom</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom">CSS2</ulink>,
@@ -1455,8 +498,8 @@ entry {
             </row>
             <row>
               <entry>margin‑left</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left">CSS2</ulink>,
@@ -1465,8 +508,8 @@ entry {
             </row>
             <row>
               <entry>padding‑top</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top">CSS2</ulink>,
@@ -1475,8 +518,8 @@ entry {
             </row>
             <row>
               <entry>padding‑right</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right">CSS2</ulink>,
@@ -1485,8 +528,8 @@ entry {
             </row>
             <row>
               <entry>padding‑bottom</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom">CSS2</ulink>,
@@ -1495,8 +538,8 @@ entry {
             </row>
             <row>
               <entry>padding‑left</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left">CSS2</ulink>,
@@ -1512,7 +555,7 @@ entry {
           <tbody>
             <row>
               <entry>margin</entry>
-              <entry>〈length〉{1,4}</entry>
+              <entry><code>〈length〉{1,4}</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-box/#margin">CSS3</ulink></entry>
@@ -1520,7 +563,7 @@ entry {
             </row>
             <row>
               <entry>padding</entry>
-              <entry>〈length〉{1,4}</entry>
+              <entry><code>〈length〉{1,4}</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-box/#padding">CSS3</ulink></entry>
@@ -1541,8 +584,8 @@ entry {
           <tbody>
             <row>
               <entry>border‑top‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width">CSS2</ulink>,
@@ -1551,8 +594,8 @@ entry {
             </row>
             <row>
               <entry>border‑right‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
@@ -1561,8 +604,8 @@ entry {
             </row>
             <row>
               <entry>border‑bottom‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width">CSS2</ulink>,
@@ -1571,8 +614,8 @@ entry {
             </row>
             <row>
               <entry>border‑right‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
@@ -1581,8 +624,8 @@ entry {
             </row>
             <row>
               <entry>border‑top‑style</entry>
-              <entry>〈border style〉</entry>
-              <entry>none</entry>
+              <entry><code>〈border style〉</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style">CSS2</ulink>,
@@ -1591,8 +634,8 @@ entry {
             </row>
             <row>
               <entry>border‑right‑style</entry>
-              <entry>〈border style〉</entry>
-              <entry>none</entry>
+              <entry><code>〈border style〉</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style">CSS2</ulink>,
@@ -1601,8 +644,8 @@ entry {
             </row>
             <row>
               <entry>border‑bottom‑style</entry>
-              <entry>〈border style〉</entry>
-              <entry>none</entry>
+              <entry><code>〈border style〉</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style">CSS2</ulink>,
@@ -1611,8 +654,8 @@ entry {
             </row>
             <row>
               <entry>border‑left‑style</entry>
-              <entry>〈border style〉</entry>
-              <entry>none</entry>
+              <entry><code>〈border style〉</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style">CSS2</ulink>,
@@ -1621,8 +664,8 @@ entry {
             </row>
             <row>
               <entry>border‑top‑right‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius">CSS2</ulink>,
@@ -1631,8 +674,8 @@ entry {
             </row>
             <row>
               <entry>border‑bottom‑right‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius">CSS2</ulink>,
@@ -1641,8 +684,8 @@ entry {
             </row>
             <row>
               <entry>border‑bottom‑left‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius">CSS2</ulink>,
@@ -1651,8 +694,8 @@ entry {
             </row>
             <row>
               <entry>border‑top‑left‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius">CSS2</ulink>,
@@ -1661,8 +704,8 @@ entry {
             </row>
             <row>
               <entry>border‑top‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color">CSS2</ulink>,
@@ -1671,8 +714,8 @@ entry {
             </row>
             <row>
               <entry>border‑right‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color">CSS2</ulink>,
@@ -1681,8 +724,8 @@ entry {
             </row>
             <row>
               <entry>border‑bottom‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color">CSS2</ulink>,
@@ -1691,8 +734,8 @@ entry {
             </row>
             <row>
               <entry>border‑left‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color">CSS2</ulink>,
@@ -1701,8 +744,8 @@ entry {
             </row>
             <row>
               <entry>border‑image‑source</entry>
-              <entry>〈image〉 | none</entry>
-              <entry>none</entry>
+              <entry><code>〈image〉 | none</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#the-border-image-source">CSS3</ulink></entry>
@@ -1710,8 +753,8 @@ entry {
             </row>
             <row>
               <entry>border‑image‑repeat</entry>
-              <entry>〈border repeat〉{1,2}</entry>
-              <entry>stretch</entry>
+              <entry><code>〈border repeat〉{1,2}</code></entry>
+              <entry><code>stretch</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR//css3-background/#the-border-image-repeat">CSS3</ulink></entry>
@@ -1719,8 +762,8 @@ entry {
             </row>
             <row>
               <entry>border‑image‑slice</entry>
-              <entry>[ 〈number〉 | 〈percentage〉 ]{1,4} &amp;&amp; fill?</entry>
-              <entry>100%</entry>
+              <entry><code>[ 〈number〉 | 〈percentage〉 ]{1,4} &amp;&amp; fill?</code></entry>
+              <entry><code>100%</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR//css3-background/#the-border-image-slice">CSS3</ulink></entry>
@@ -1728,8 +771,8 @@ entry {
             </row>
             <row>
               <entry>border‑image‑width</entry>
-              <entry>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</entry>
-              <entry>1</entry>
+              <entry><code>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</code></entry>
+              <entry><code>1</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR//css3-background/#the-border-image-width">CSS3</ulink></entry>
@@ -1745,7 +788,7 @@ entry {
           <tbody>
             <row>
               <entry>border‑width</entry>
-              <entry>〈length〉{1,4}</entry>
+              <entry><code>〈length〉{1,4}</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
@@ -1753,7 +796,7 @@ entry {
             </row>
             <row>
               <entry>border‑style</entry>
-              <entry>〈border style〉{1,4}</entry>
+              <entry><code>〈border style〉{1,4}</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
@@ -1761,14 +804,14 @@ entry {
             </row>
             <row>
               <entry>border‑color</entry>
-              <entry>〈color〉{1,4}</entry>
+              <entry><code>〈color〉{1,4}</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#border-color">CSS3</ulink></entry>
               <entry>a 'four sides' shorthand</entry>
             </row>
             <row>
               <entry>border‑top</entry>
-              <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#border-top">CSS3</ulink></entry>
@@ -1776,7 +819,7 @@ entry {
             </row>
             <row>
               <entry>border‑left</entry>
-              <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#border-left">CSS3</ulink></entry>
@@ -1784,7 +827,7 @@ entry {
             </row>
             <row>
               <entry>border‑bottom</entry>
-              <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#border-bottom">CSS3</ulink></entry>
@@ -1792,7 +835,7 @@ entry {
             </row>
             <row>
               <entry>border‑right</entry>
-              <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#border-right">CSS3</ulink></entry>
@@ -1800,7 +843,7 @@ entry {
             </row>
             <row>
               <entry>border</entry>
-              <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#border">CSS3</ulink></entry>
@@ -1808,14 +851,14 @@ entry {
             </row>
             <row>
               <entry>border‑radius</entry>
-              <entry>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]?</entry>
+              <entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]?</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#border-radius">CSS3</ulink></entry>
               <entry></entry>
             </row>
             <row>
               <entry>border‑image</entry>
-              <entry>〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</entry>
+              <entry><code>〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#border-image">CSS3</ulink></entry>
               <entry></entry>
@@ -1824,10 +867,9 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge
-〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}
-      </literallayout>
+<literallayout><code>〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code>
+<code>〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}</code>
+</literallayout>
 
       <table pgwide="1">
         <title>Outline properties</title>
@@ -1840,8 +882,8 @@ entry {
           <tbody>
             <row>
               <entry>outline‑style</entry>
-              <entry>none | solid | inset | outset | hidden | dotted | dashed | double  | groove | ridge</entry>
-              <entry>none</entry>
+              <entry><code>none | solid | inset | outset | hidden | dotted | dashed | double  | groove | ridge</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style">CSS2</ulink>,
@@ -1850,8 +892,8 @@ entry {
             </row>
             <row>
               <entry>outline‑width</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width">CSS2</ulink>,
@@ -1860,8 +902,8 @@ entry {
             </row>
             <row>
               <entry>outline‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>currentColor</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>currentColor</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color">CSS2</ulink>,
@@ -1870,8 +912,8 @@ entry {
             </row>
             <row>
               <entry>outline‑offset</entry>
-              <entry>〈length〉</entry>
-              <entry>0px</entry>
+              <entry><code>〈length〉</code></entry>
+              <entry><code>0px</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
@@ -1879,8 +921,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑outline‑top‑left‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1888,8 +930,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑outline‑top‑right‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1897,8 +939,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑outline‑bottom‑right‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1906,8 +948,8 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑outline‑bottom‑left‑radius</entry>
-              <entry>〈corner radius〉</entry>
-              <entry>0</entry>
+              <entry><code>〈corner radius〉</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry></entry>
@@ -1922,7 +964,7 @@ entry {
           <tbody>
             <row>
               <entry>outline</entry>
-              <entry>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</entry>
+              <entry><code>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
@@ -1930,7 +972,7 @@ entry {
             </row>
             <row>
               <entry>‑gtk‑outline‑radius</entry>
-              <entry>[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]?</entry>
+              <entry><code>[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]?</code></entry>
               <entry>see individual properties</entry>
               <entry></entry>
               <entry></entry>
@@ -1950,8 +992,8 @@ entry {
           <tbody>
             <row>
               <entry>background‑color</entry>
-              <entry>〈color〉</entry>
-              <entry>rgba(0,0,0,0)</entry>
+              <entry><code>〈color〉</code></entry>
+              <entry><code>rgba(0,0,0,0)</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color">CSS2</ulink>,
@@ -1960,8 +1002,8 @@ entry {
             </row>
             <row>
               <entry>background‑clip</entry>
-              <entry>〈box〉 [ , 〈box〉 ]*</entry>
-              <entry>border-box</entry>
+              <entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
+              <entry><code>border-box</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#background-clip">CSS3</ulink></entry>
@@ -1969,8 +1011,8 @@ entry {
             </row>
             <row>
               <entry>background‑origin</entry>
-              <entry>〈box〉 [ , 〈box〉 ]*</entry>
-              <entry>padding-box</entry>
+              <entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
+              <entry><code>padding-box</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#background-origin">CSS3</ulink></entry>
@@ -1978,8 +1020,8 @@ entry {
             </row>
             <row>
               <entry>background‑size</entry>
-              <entry>〈bg-size〉 [ , 〈bg-size〉 ]*</entry>
-              <entry>auto</entry>
+              <entry><code>〈bg-size〉 [ , 〈bg-size〉 ]*</code></entry>
+              <entry><code>auto</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#background-size">CSS3</ulink></entry>
@@ -1987,8 +1029,8 @@ entry {
             </row>
             <row>
               <entry>background‑position</entry>
-              <entry>〈position〉 [ , 〈position〉 ]*</entry>
-              <entry>0</entry>
+              <entry><code>〈position〉 [ , 〈position〉 ]*</code></entry>
+              <entry><code>0</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position">CSS2</ulink>,
@@ -1997,8 +1039,8 @@ entry {
             </row>
             <row>
               <entry>background‑repeat</entry>
-              <entry>〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</entry>
-              <entry>repeat</entry>
+              <entry><code>〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</code></entry>
+              <entry><code>repeat</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat">CSS2</ulink>,
@@ -2007,8 +1049,8 @@ entry {
             </row>
             <row>
               <entry>background‑image</entry>
-              <entry>〈bg-image〉[ , 〈bg-image〉 ]*</entry>
-              <entry>none</entry>
+              <entry><code>〈bg-image〉[ , 〈bg-image〉 ]*</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image">CSS2</ulink>,
@@ -2017,8 +1059,8 @@ entry {
             </row>
             <row>
               <entry>box‑shadow</entry>
-              <entry>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</entry>
-              <entry>none</entry>
+              <entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry>✓</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-background/#box-shadow">CSS3</ulink></entry>
@@ -2033,7 +1075,7 @@ entry {
           <tbody>
             <row>
               <entry><para>background</para></entry>
-              <entry>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</entry>
+              <entry><code>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background">CSS2</ulink>,
                      <ulink url="http://www.w3.org/TR/css3-background/#background">CSS3</ulink></entry>
@@ -2043,16 +1085,15 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈box〉 = border-box | padding-box | content-box
-〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain
-〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}
-〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}
-〈bg-image〉 = 〈image〉 | none
-〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉
-〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉
-〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?
-      </literallayout>
+<literallayout><code>〈box〉 = border-box | padding-box | content-box</code>
+<code>〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain</code>
+<code>〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}</code>
+<code>〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code>
+<code>〈bg-image〉 = 〈image〉 | none</code>
+<code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
+<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉</code>
+<code>〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?</code>
+</literallayout>
 
 
       <table pgwide="1">
@@ -2066,8 +1107,8 @@ entry {
           <tbody>
             <row>
               <entry>transition‑property</entry>
-              <entry>none | all | 〈property name〉 [ , 〈property name〉 ]*</entry>
-              <entry>all</entry>
+              <entry><code>none | all | 〈property name〉 [ , 〈property name〉 ]*</code></entry>
+              <entry><code>all</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition-property">CSS3</ulink></entry>
@@ -2075,8 +1116,8 @@ entry {
             </row>
             <row>
               <entry>transition‑duration</entry>
-              <entry>〈time〉 [ , 〈time〉 ]*</entry>
-              <entry>0s</entry>
+              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
+              <entry><code>0s</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition-duration">CSS3</ulink></entry>
@@ -2084,8 +1125,8 @@ entry {
             </row>
             <row>
               <entry>transition‑timing‑function</entry>
-              <entry>〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]*</entry>
-              <entry>ease</entry>
+              <entry><code>〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]*</code></entry>
+              <entry><code>ease</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS3</ulink></entry>
@@ -2093,8 +1134,8 @@ entry {
             </row>
             <row>
               <entry>transition‑delay</entry>
-              <entry>〈time〉 [ , 〈time〉 ]*</entry>
-              <entry>0s</entry>
+              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
+              <entry><code>0s</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition-delay">CSS3</ulink></entry>
@@ -2109,7 +1150,7 @@ entry {
           <tbody>
             <row>
               <entry>transition</entry>
-              <entry>〈single-transition〉 [ , 〈single-transition〉 ]*</entry>
+              <entry><code>〈single-transition〉 [ , 〈single-transition〉 ]*</code></entry>
               <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition">CSS3</ulink></entry>
               <entry></entry>
@@ -2118,11 +1159,11 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |
-                                       step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) | cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )
-〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉
-      </literallayout>
+<literallayout><code>〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code>
+<code>                             step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code>
+<code>                             cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code>
+<code>〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code>
+</literallayout>
 
       <table pgwide="1">
         <title>Animation properties</title>
@@ -2135,8 +1176,8 @@ entry {
           <tbody>
             <row>
               <entry>animation‑name</entry>
-              <entry>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</entry>
-              <entry>none</entry>
+              <entry><code>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-name">CSS3</ulink></entry>
@@ -2144,8 +1185,8 @@ entry {
             </row>
             <row>
               <entry>animation‑duration</entry>
-              <entry>〈time〉 [ , 〈time〉 ]*</entry>
-              <entry>0s</entry>
+              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
+              <entry><code>0s</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-duration">CSS3</ulink></entry>
@@ -2153,8 +1194,8 @@ entry {
             </row>
             <row>
               <entry>animation‑timing‑function</entry>
-              <entry>〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]*</entry>
-              <entry>ease</entry>
+              <entry><code>〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]*</code></entry>
+              <entry><code>ease</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-timing-function">CSS3</ulink></entry>
@@ -2162,8 +1203,8 @@ entry {
             </row>
             <row>
               <entry>animation‑iteration-count</entry>
-              <entry>〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]*</entry>
-              <entry>1</entry>
+              <entry><code>〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]*</code></entry>
+              <entry><code>1</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS3</ulink></entry>
@@ -2171,8 +1212,8 @@ entry {
             </row>
             <row>
               <entry>animation‑direction</entry>
-              <entry>〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]*</entry>
-              <entry>normal</entry>
+              <entry><code>〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]*</code></entry>
+              <entry><code>normal</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-direction">CSS3</ulink></entry>
@@ -2180,8 +1221,8 @@ entry {
             </row>
             <row>
               <entry>animation‑play‑state</entry>
-              <entry>〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]*</entry>
-              <entry>running</entry>
+              <entry><code>〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]*</code></entry>
+              <entry><code>running</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-play-state">CSS3</ulink></entry>
@@ -2189,8 +1230,8 @@ entry {
             </row>
             <row>
               <entry>animation‑delay</entry>
-              <entry>〈time〉 [ , 〈time〉 ]*</entry>
-              <entry>0s</entry>
+              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
+              <entry><code>0s</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-delay">CSS3</ulink></entry>
@@ -2198,8 +1239,8 @@ entry {
             </row>
             <row>
               <entry>animation‑fill‑mode</entry>
-              <entry>〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]*</entry>
-              <entry>none</entry>
+              <entry><code>〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]*</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS3</ulink></entry>
@@ -2214,7 +1255,8 @@ entry {
           <tbody>
             <row>
               <entry>animation</entry>
-              <entry>〈single‑animation〉 [ , 〈single‑animation〉]*</entry>
+              <entry><code>〈single‑animation〉 [ , 〈single‑animation〉]*</code></entry>
+              <entry>see individual properties</entry>
               <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation">CSS3</ulink></entry>
               <entry></entry>
             </row>
@@ -2222,15 +1264,14 @@ entry {
         </tgroup>
       </table>
 
-      <literallayout>
-〈single-animation-name〉 = none | 〈property name〉
-〈single-animation-iteration-count〉 = infinite | 〈number〉
-〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse
-〈single-animation-play-state〉 = running | paused
-〈single-animation-fill-mode〉 = none | forwards | backwards |  both
-〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||
-                       〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉
-      </literallayout>
+<literallayout><code>〈single-animation-name〉 = none | 〈property name〉</code>
+<code>〈single-animation-iteration-count〉 = infinite | 〈number〉</code>
+<code>〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse</code>
+<code>〈single-animation-play-state〉 = running | paused</code>
+<code>〈single-animation-fill-mode〉 = none | forwards | backwards | both</code>
+<code>〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code>
+<code>                       〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code>
+</literallayout>
 
       <table pgwide="1">
         <title>Key binding properties</title>
@@ -2243,8 +1284,8 @@ entry {
           <tbody>
             <row>
               <entry>‑gtk‑key‑bindings</entry>
-              <entry>none | 〈binding name〉 [ , 〈binding name〉 ]*</entry>
-              <entry>none</entry>
+              <entry><code>none | 〈binding name〉 [ , 〈binding name〉 ]*</code></entry>
+              <entry><code>none</code></entry>
               <entry></entry>
               <entry></entry>
               <entry></entry>
@@ -2255,10 +1296,8 @@ entry {
       </table>
 
     <para>
-      〈binding name〉 must have been assigned to a binding set with a
-      @binding-set rule.
+      〈binding name〉 must have been assigned to a binding set with a @binding-set rule.
     </para>
-  </refsect2>
 
 </refsect1>
 </refentry>
diff --git a/docs/reference/gtk/gtk-docs.sgml b/docs/reference/gtk/gtk-docs.sgml
index 7cae512204..f29097308f 100644
--- a/docs/reference/gtk/gtk-docs.sgml
+++ b/docs/reference/gtk/gtk-docs.sgml
@@ -375,7 +375,8 @@
 
   <part id="theming">
     <title>Theming in GTK+</title>
-    <xi:include href="css.xml" />
+    <xi:include href="css-overview.xml" />
+    <xi:include href="css-properties.xml" />
     <xi:include href="xml/gtkstylecontext.xml" />
     <xi:include href="xml/gtkcssprovider.xml" />
     <xi:include href="xml/gtkstyleprovider.xml" />
author	Matthias Clasen <mclasen@redhat.com>	2016-01-08 23:31:48 -0500
committer	Matthias Clasen <mclasen@redhat.com>	2016-01-08 23:32:40 -0500
commit	3a774abbfe05ab3a0d650c1d69fb7824d415a88a (patch)
tree	011f309f2f1562cb2cb8e3fe74226c982ef5e004 /docs
parent	d8c1e6db216a55f78b42e7d4540b7134b51a483a (diff)
download	gtk+-3a774abbfe05ab3a0d650c1d69fb7824d415a88a.tar.gz