## GtkCssProvider GtkCssProvider — CSS-like styling for widgets |

## Synopsis

    #include <gtk/gtk.h>

    struct              GtkCssProvider;
    GtkCssProvider *    gtk_css_provider_get_default        (void);
    GtkCssProvider *    gtk_css_provider_get_named          (const gchar *name,
                                                             const gchar *variant);
    gboolean            gtk_css_provider_load_from_data     (GtkCssProvider *css_provider,
                                                             const gchar *data,
                                                             gssize length,
                                                             GError **error);
    gboolean            gtk_css_provider_load_from_file     (GtkCssProvider *css_provider,
                                                             GFile *file,
                                                             GError **error);
    gboolean            gtk_css_provider_load_from_path     (GtkCssProvider *css_provider,
                                                             const gchar *path,
                                                             GError **error);
    GtkCssProvider *    gtk_css_provider_new                (void);
    char *              gtk_css_provider_to_string          (GtkCssProvider *provider);
    #define             GTK_CSS_PROVIDER_ERROR
    enum                GtkCssProviderError;

                        GtkCssSection;
    enum                GtkCssSectionType;
    guint               gtk_css_section_get_end_line        (const GtkCssSection *section);
    guint               gtk_css_section_get_end_position    (const GtkCssSection *section);
    GFile *             gtk_css_section_get_file            (const GtkCssSection *section);
    GtkCssSection *     gtk_css_section_get_parent          (const GtkCssSection *section);
    GtkCssSectionType   gtk_css_section_get_section_type    (const GtkCssSection *section);
    guint               gtk_css_section_get_start_line      (const GtkCssSection *section);
    guint               gtk_css_section_get_start_position  (const GtkCssSection *section);
    GType               gtk_css_section_get_type            (void);
    GtkCssSection *     gtk_css_section_ref                 (GtkCssSection *section);
    void                gtk_css_section_unref               (GtkCssSection *section);

## Object Hierarchy

      GObject
       +----GtkCssProvider

      GBoxed
       +----GtkCssSection

## Implemented Interfaces

GtkCssProvider implements GtkStyleProvider and GtkStyleProviderPrivate.

## Signals

      "parsing-error"                                  : Run Last

## Description

GtkCssProvider is an object implementing the GtkStyleProvider interface. It is able to parse CSS-like input in order to style widgets.

### Default files

An application can cause GTK+ to parse a specific CSS style sheet by calling `gtk_css_provider_load_from_file()` and adding the provider with `gtk_style_context_add_provider()` or `gtk_style_context_add_provider_for_screen()`. In addition, certain files will be read when GTK+ is initialized. First, the file ``$XDG_CONFIG_HOME`/gtk-3.0/gtk.css` is loaded if it exists. Then, GTK+ tries to load ``$HOME`/.themes/`theme-name`/gtk-3.0/gtk.css`, falling back to ``datadir`/share/themes/`theme-name`/gtk-3.0/gtk.css`, where `theme-name` is the name of the current theme (see the "gtk-theme-name" setting) and `datadir` is the prefix configured when GTK+ was compiled, unless overridden by the `GTK_DATA_PREFIX` environment variable.

### Style sheets

The basic structure of the style sheets understood by this provider is a series of statements, which are either rule sets or '@-rules', separated by whitespace.

A rule set consists of a selector and a declaration block, which is a series of declarations enclosed in curly braces ({ and }). 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.

Example 23. A rule set with two selectors

    1
    2
    3
    4
    GtkButton, GtkEntry {
        color: #ff00ea;
        font: Comic Sans 12
    }

### Selectors

Selectors work very similar to the way they do in CSS, with widget class names taking the role of element names, and widget names taking the role of IDs. When used in a selector, widget names must be prefixed with a '#' character. The '*' character represents the so-called universal selector, which matches any widget.

To express more complicated situations, selectors can be combined in various ways:

- To require that a widget satisfies several conditions, combine several selectors into one by concatenating them. E.g. `GtkButton#button1` matches a GtkButton widget with the name button1.

- To only match a widget when it occurs inside some other widget, write the two selectors after each other, separated by whitespace. E.g. `GtkToolBar GtkButton` matches GtkButton widgets that occur inside a GtkToolBar.

- In the previous example, the GtkButton is matched even if it occurs deeply nested inside the toolbar. To restrict the match to direct children of the parent widget, insert a '>' character between the two selectors. E.g. `GtkNotebook > GtkLabel` matches GtkLabel widgets that are direct children of a GtkNotebook.

Example 24. Widget classes and names in selectors

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /* Theme labels that are descendants of a window */
    GtkWindow GtkLabel {
        background-color: #898989
    }

    /* Theme notebooks, and anything that's within these */
    GtkNotebook {
        background-color: #a939f0
    }

    /* Theme combo boxes, and entries that
     are direct children of a notebook */
    GtkComboBox,
    GtkNotebook > GtkEntry {
        color: @fg_color;
        background-color: #1209a2
    }

    /* Theme any widget within a GtkBin */
    GtkBin * {
        font: Sans 20
    }

    /* Theme a label named title-label */
    GtkLabel#title-label {
        font: Sans 15
    }

    /* Theme any widget named main-entry */
    #main-entry {
        background-color: #f0a810
    }

Widgets may also define style classes, which can be used for matching. When used in a selector, style classes must be prefixed with a '.' character.

Refer to the documentation of individual widgets to learn which style classes they define and see the section called “Style classes and regions” for a list of all style classes used by GTK+ widgets.

Note that there is some ambiguity in the selector syntax when it comes to differentiation widget class names from regions. GTK+ currently treats a string as a widget class name if it contains any uppercase characters (which should work for more widgets with names like GtkLabel).

Example 25. Style classes in selectors

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* Theme all widgets defining the class entry */
    .entry {
        color: #39f1f9;
    }

    /* Theme spinbuttons' entry */
    GtkSpinButton.entry {
        color: #900185
    }

In complicated widgets like e.g. a GtkNotebook, it may be desirable to style different parts of the widget differently. To make this possible, container widgets may define regions, whose names may be used for matching in selectors.

Some containers allow to further differentiate between regions by applying so-called pseudo-classes to the region. For example, the tab region in GtkNotebook allows to single out the first or last tab by using the :first-child or :last-child pseudo-class. When used in selectors, pseudo-classes must be prefixed with a ':' character.

Refer to the documentation of individual widgets to learn which regions and pseudo-classes they define and see the section called “Style classes and regions” for a list of all regions used by GTK+ widgets.

Example 26. Regions in selectors

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* Theme any label within a notebook */
    GtkNotebook GtkLabel {
        color: #f90192;
    }

    /* Theme labels within notebook tabs */
    GtkNotebook tab GtkLabel {
        color: #703910;
    }

    /* Theme labels in the any first notebook
     tab, both selectors are equivalent */
    GtkNotebook tab:nth-child(first) GtkLabel,
    GtkNotebook tab:first-child GtkLabel {
        color: #89d012;
    }

Another use of pseudo-classes is to match widgets depending on their state. This is conceptually similar to the :hover, :active or :focus pseudo-classes in CSS. The available pseudo-classes for widget states are :active, :prelight (or :hover), :insensitive, :selected, :focused and :inconsistent.

Example 27. Styling specific widget states

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /* Theme active (pressed) buttons */
    GtkButton:active {
        background-color: #0274d9;
    }

    /* Theme buttons with the mouse pointer on it,
       both are equivalent */
    GtkButton:hover,
    GtkButton:prelight {
        background-color: #3085a9;
    }

    /* Theme insensitive widgets, both are equivalent */
    :insensitive,
    *:insensitive {
        background-color: #320a91;
    }

    /* Theme selection colors in entries */
    GtkEntry:selected {
        background-color: #56f9a0;
    }

    /* Theme focused labels */
    GtkLabel:focused {
        background-color: #b4940f;
    }

    /* Theme inconsistent checkbuttons */
    GtkCheckButton:inconsistent {
        background-color: #20395a;
    }

Widget state pseudoclasses may only apply to the last element in a selector.

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 widget path will take precedence over the others.

### @ Rules

GTK+'s CSS supports the @import rule, in order to load another CSS style sheet in addition to the currently parsed one.

Example 28. Using the @import rule

    1
    @import url ("path/to/common.css");

In order to extend key bindings affecting different widgets, GTK+ supports the @binding-set rule to parse a set of bind/unbind directives, see GtkBindingSet for the supported syntax. Note that the binding sets defined in this way must be associated with rule sets by setting the gtk-key-bindings style property.

Customized key bindings are typically defined in a separate `gtk-keys.css` CSS file and GTK+ loads this file according to the current key theme, which is defined by the "gtk-key-theme-name" setting.

Example 29. Using the @binding rule

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @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" (" ") };
    };

    GtkEntry {
      gtk-key-bindings: binding-set1, binding-set2;
    }

GTK+ also supports an additional @define-color rule, in order to define a color name which may be used instead of color numeric representations. Also see the "gtk-color-scheme" setting for a way to override the values of these named colors.

Example 30. Defining colors

    1
    2
    3
    4
    5
    @define-color bg_color #f9a039;

    * {
        background-color: @bg_color;
    }

### Symbolic colors

Besides being able to define color names, the CSS parser is also able to read different color expressions, which can also be nested, providing a rich language to define colors which are derived from a set of base colors.

Example 31. Using symbolic colors

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @define-color entry-color shade (@bg_color, 0.7);

    GtkEntry {
        background-color: @entry-color;
    }

    GtkEntry:focused {
        background-color: mix (@entry-color,
                               shade (#fff, 0.5),
                               0.8);
    }

The various ways to express colors in GTK+ CSS are:

Syntax | Explanation | Examples
--- | --- | ---
rgb(`r`, `g`, `b`) | An opaque color; `r`, `g`, `b` can be either integers between 0 and 255 or percentages | rgb(128, 10, 54) rgb(20%, 30%, 0%)
rgba(`r`, `g`, `b`, `a`) | A translucent color; `r`, `g`, `b` are as in the previous row, `a` is a floating point number between 0 and 1 | rgba(255, 255, 0, 0.5)
#`xxyyzz` | An opaque color; `xx`, `yy`, `zz` are hexadecimal numbers specifying `r`, `g`, `b` variants with between 1 and 4 hexadecimal digits per component are allowed | #ff12ab #f0c
@name | Reference to a color that has been defined with @define-color | @bg_color
mix(`color1`, `color2`, `f`) | A linear combination of `color1` and `color2`. `f` is a floating point number between 0 and 1. | mix(#ff1e0a, @bg_color, 0.8)
shade(`color`, `f`) | A lighter or darker variant of `color`. `f` is a floating point number. | shade(@fg_color, 0.5)
lighter(`color`) | A lighter variant of `color` |
darker(`color`) | A darker variant of `color` |
alpha(`color`, `f`) | Modifies passed color's alpha by a factor `f`. `f` is a floating point number. `f` < 1.0 results in a more transparent color while `f` > 1.0 results in a more opaque color. | alhpa(blue, 0.5)

### Gradients

Linear or radial Gradients can be used as background images.

A linear gradient along the line from (`start_x`, `start_y`) to (`end_x`, `end_y`) is specified using the syntax

-gtk-gradient (linear,
`start_x` `start_y`, `end_x` `end_y`,
color-stop (`position`, `color`),
...)

where `start_x` and `end_x` can be either a floating point number between 0 and 1 or one of the special values 'left', 'right' or 'center', `start_y` and `end_y` can be either a floating point number between 0 and 1 or one of the special values 'top', 'bottom' or 'center', `position` is a floating point number between 0 and 1 and `color` is a color expression (see above). The color-stop can be repeated multiple times to add more than one color stop. 'from (`color`)' and 'to (`color`)' can be used as abbreviations for color stops with position 0 and 1, respectively.

Example 32. A linear gradient

This gradient was specified with

-gtk-gradient (linear,
left top, right bottom,
from(@yellow), to(@blue))

Example 33. Another linear gradient

This gradient was specified with

-gtk-gradient (linear,
0 0, 0 1,
color-stop(0, @yellow),
color-stop(0.2, @blue),
color-stop(1, #0f0))

A radial gradient along the two circles defined by (`start_x`, `start_y`, `start_radius`) and (`end_x`, `end_y`, `end_radius`) is specified using the syntax

-gtk-gradient (radial,
`start_x` `start_y`, `start_radius`,
`end_x` `end_y`, `end_radius`,
color-stop (`position`, `color`),
...)

where `start_radius` and `end_radius` are floating point numbers and the other parameters are as before.

Example 34. A radial gradient

This gradient was specified with

-gtk-gradient (radial,
center center, 0,
center center, 1,
from(@yellow), to(@green))

Example 35. Another radial gradient

This gradient was specified with

-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))

### Text shadow

A shadow list can be applied to text or symbolic icons, using the CSS3 text-shadow syntax, as defined in the CSS3 specification.

A text shadow is specified using the syntax

text-shadow: `horizontal_offset` `vertical_offset` [ `blur_radius` ] `color`

The offset of the shadow is specified with the `horizontal_offset` and `vertical_offset` parameters. The optional blur radius is parsed, but it is currently not rendered by the GTK+ theming engine.

To set multiple shadows on an element, you can specify a comma-separated list of shadow elements in the text-shadow property. Shadows are always rendered front-back, i.e. the first shadow specified is on top of the others. Shadows can thus overlay each other, but they can never overlay the text itself, which is always rendered on top of the shadow layer.

### Box shadow

Themes can apply shadows on framed elements using the CSS3 box-shadow syntax, as defined in the CSS3 specification.

A box shadow is specified using the syntax

box-shadow: [ `inset` ] `horizontal_offset` `vertical_offset` [ `blur_radius` ] [ `spread` ] `color`

A positive offset will draw a shadow that is offset to the right (down) of the box, a negative offset to the left (top). The optional spread parameter defines an additional distance to expand the shadow shape in all directions, by the specified radius. The optional blur radius parameter is parsed, but it is currently not rendered by the GTK+ theming engine. The inset parameter defines whether the drop shadow should be rendered inside or outside the box canvas. Only inset box-shadows are currently supported by the GTK+ theming engine, non-inset elements are currently ignored.

To set multiple box-shadows on an element, you can specify a comma-separated list of shadow elements in the box-shadow property. Shadows are always rendered front-back, i.e. the first shadow specified is on top of the others, so they may overlap other boxes or other shadows.

### Border images

Images and gradients can also be used in slices for the purpose of creating scalable borders. For more information, see the CSS3 documentation for the border-image property, which can be found here.

The parameters of the slicing process are controlled by four separate properties. Note that you can use the

border-image

shorthand property to set values for the three properties at the same time.

border-image-source: url(`path`)
(or border-image-source: -gtk-gradient(...))

: Specifies the source of the border image, and it can either be an URL or a gradient (see above).

border-image-slice: `top` `right` `bottom` `left`

The sizes specified by the `top`, `right`, `bottom` and `left` parameters are the offsets, in pixels, from the relevant edge where the image should be "cut off" to build the slices used for the rendering of the border.

border-image-width: `top` `right` `bottom` `left`

The sizes specified by the `top`, `right`, `bottom` and `left` parameters are inward distances from the border box edge, used to specify the rendered size of each slice determined by border-image-slice. If this property is not specified, the values of border-width will be used as a fallback.

border-image-repeat: [stretch|repeat|round|space] ?
[stretch|repeat|round|space]

Specifies how the image slices should be rendered in the area outlined by border-width. The default (stretch) is to resize the slice to fill in the whole allocated area. If the value of this property is 'repeat', the image slice will be tiled to fill the area. If the value of this property is 'round', the image slice will be tiled to fill the area, and scaled to fit it exactly a whole number of times. If the value of this property is 'space', the image slice will be tiled to fill the area, and if it doesn't fit it exactly a whole number of times, the extra space is distributed as padding around the slices. If two options are specified, the first one affects the horizontal behaviour and the second one the vertical behaviour. If only one option is specified, it affects both.

Example 36. A border image

This border image was specified with

url("gradient1.png") 10 10 10 10

Example 37. A repeating border image

This border image was specified with

url("gradient1.png") 10 10 10 10 repeat

Example 38. A stretched border image

This border image was specified with

url("gradient1.png") 10 10 10 10 stretch

Styles can specify transitions that will be used to create a gradual change in the appearance when a widget state changes. The following syntax is used to specify transitions:

`duration` [s|ms] [linear|ease|ease-in|ease-out|ease-in-out] [loop]?

The `duration` is the amount of time that the animation will take for a complete cycle from start to end. If the loop option is given, the animation will be repated until the state changes again. The option after the duration determines the transition function from a small set of predefined functions.

Figure 3. Linear transition

Figure 4. Ease transition

Figure 5. Ease-in-out transition

Figure 6. Ease-in transition

Figure 7. Ease-out transition

### Supported properties

Properties are the part that differ the most to common CSS, not all properties are supported (some are planned to be supported eventually, some others are meaningless or don't map intuitively in a widget based environment).

The currently supported properties are:

Property name | Syntax | Maps to | Examples
--- | --- | --- | ---
engine | engine-name | GtkThemingEngine | engine: clearlooks; engine: none; /* use the default (i.e. builtin) engine) */
background-color | color (see above) | GdkRGBA | background-color: #fff; color: &color1; background-color: shade (&color1, 0.5); color: mix (&color1, #f0f, 0.8);
color
border-top-color | transparent|color (see above)
border-right-color |
border-bottom-color |
border-left-color |
border-color | [transparent|color]{1,4}
font-family | `family` [, `family`]* | gchararray | font-family: Sans, Arial;
font-style | [normal|oblique|italic] | PANGO_TYPE_STYLE | font-style: italic; |  |
font-variant | [normal|small-caps] | PANGO_TYPE_VARIANT | font-variant: normal; |  |
font-weight | [normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900] | PANGO_TYPE_WEIGHT | font-weight: bold; |  |
font-size | Font size in point | gint | font-size: 13; |  |
font | `family` [`style`] [`size`] | PangoFontDescription | font: Sans 15; |  |
margin-top | integer | gint | margin-top: 0; |  |
margin-left | integer | gint | margin-left: 1; |  |
margin-bottom | integer | gint | margin-bottom: 2; |  |
margin-right | integer | gint | margin-right: 4; |  |
margin | `width` `vertical_width` `horizontal_width` `top_width` `horizontal_width` `bottom_width` `top_width` `right_width` `bottom_width` `left_width` | GtkBorder | margin: 5; margin: 5 10; margin: 5 10 3; margin: 5 10 3 5; |  |
padding-top | integer | gint | padding-top: 5;
padding-left | integer | gint | padding-left: 5; |  |  |
padding-bottom | integer | gint | padding-bottom: 5; |  |  |
padding-right | integer | gint | padding-right: 5; |  |  |
padding |  |  |  |  |  |
background-image | gradient (see above) or url(`path`) | cairo_pattern_t | -gtk-gradient (linear, left top, right top, from (#fff), to (#000)); -gtk-gradient (linear, 0.0 0.5, 0.5 1.0, from (#fff), color-stop (0.5, #f00), to (#000)); -gtk-gradient (radial, center center, 0.2, center center, 0.8, color-stop (0.0, #fff), color-stop (1.0, #000)); url ('background.png'); |  |  |
background-repeat | [repeat|no-repeat] | internal | background-repeat: no-repeat; If not specified, the style doesn't respect the CSS3 specification, since the background will be stretched to fill the area. |  |  |
border-top-width | integer | gint | border-top-width: 5; |  |  |
border-left-width | integer | gint | border-left-width: 5; |  |  |
border-bottom-width | integer | gint | border-bottom-width: 5; |  |  |
border-right-width | integer | gint | border-right-width: 5; |  |  |
border-width | GtkBorder | border-width: 1; border-width: 1 2; border-width: 1 2 3; border-width: 1 2 3 5; |  |  |  |
border-radius | integer | gint | border-radius: 5; |
border-style | [none|solid|inset|outset] | GtkBorderStyle | border-style: solid; |  |  |
border-image | border image (see above) | internal use only | border-image: url("/path/to/image.png") 3 4 3 4 stretch; border-image: url("/path/to/image.png") 3 4 4 3 repeat stretch; |  |  |
text-shadow | shadow list (see above) | GtkTextShadow | text-shadow: 1 1 0 blue, -4 -4 red; |  |  |
transition | transition (see above) | internal use only | transition: 150ms ease-in-out; transition: 1s linear loop; |  |  |
gtk-key-bindings | binding set name list | internal use only | gtk-bindings: binding1, binding2, ...; |  |  |

GtkThemingEngines can register their own, engine-specific style properties with the function `gtk_theming_engine_register_property()`. These properties can be set in CSS like other properties, using a name of the form

-`namespace`-`name`

, where `namespace` is typically the name of the theming engine, and `name` is the name of the property. Style properties that have been registered by widgets using `gtk_widget_class_install_style_property()` can also be set in this way, using the widget class name for `namespace`.

Example 39. Using engine-specific style properties

    1
    2
    3
    4
    5
    6
    * {
        engine: clearlooks;
        border-radius: 4;
        -GtkPaned-handle-size: 6;
        -clearlooks-colorize-scrollbar: false;
    }

## Details

### struct GtkCssProvider

    struct GtkCssProvider;

### gtk_css_provider_get_default ()

    GtkCssProvider *    gtk_css_provider_get_default        (void);

Returns the provider containing the style settings used as a fallback for all widgets.

Returns : | The provider used for fallback styling. This memory is owned by GTK+, and you must not free it. [transfer none]

### gtk_css_provider_get_named ()

    GtkCssProvider *    gtk_css_provider_get_named          (const gchar *name,
                                                             const gchar *variant);

Loads a theme from the usual theme paths

`name` : | A theme name
`variant` : | variant to load, for example, "dark", or `NULL` for the default. [allow-none]
Returns : | a GtkCssProvider with the theme loaded. This memory is owned by GTK+, and you must not free it. [transfer none]

### gtk_css_provider_load_from_data ()

    gboolean            gtk_css_provider_load_from_data     (GtkCssProvider *css_provider,
                                                             const gchar *data,
                                                             gssize length,
                                                             GError **error);

Loads `data` into `css_provider`, making it clear any previously loaded information.

`css_provider` : | a GtkCssProvider
`data` : | CSS data loaded in memory. [array length=length][element-type guint8]
`length` : | the length of `data` in bytes, or -1 for NUL terminated strings. If `length` is not -1, the code will assume it is not NUL terminated and will potentially do a copy.
`error` : | return location for a GError, or `NULL`. [out][allow-none]
Returns : | `TRUE` if the data could be loaded.

### gtk_css_provider_load_from_file ()

    gboolean            gtk_css_provider_load_from_file     (GtkCssProvider *css_provider,
                                                             GFile *file,
                                                             GError **error);

Loads the data contained in `file` into `css_provider`, making it clear any previously loaded information.

`css_provider` : | a GtkCssProvider
`file` : | GFile pointing to a file to load
`error` : | return location for a GError, or `NULL`. [out][allow-none]
Returns : | `TRUE` if the data could be loaded.

### gtk_css_provider_load_from_path ()

    gboolean            gtk_css_provider_load_from_path     (GtkCssProvider *css_provider,
                                                             const gchar *path,
                                                             GError **error);

Loads the data contained in `path` into `css_provider`, making it clear any previously loaded information.

`css_provider` : | a GtkCssProvider
`path` : | the path of a filename to load, in the GLib filename encoding
`error` : | return location for a GError, or `NULL`. [out][allow-none]
Returns : | `TRUE` if the data could be loaded.

### gtk_css_provider_new ()

    GtkCssProvider *    gtk_css_provider_new                (void);

Returns a newly created GtkCssProvider.

Returns : | A new GtkCssProvider

### gtk_css_provider_to_string ()

    char *              gtk_css_provider_to_string          (GtkCssProvider *provider);

Convertes the `provider` into a string representation in CSS format.

Using `gtk_css_provider_load_from_data()` with the return value from this function on a new provider created with `gtk_css_provider_new()` will basicallu create a duplicate of this `provider`.

`provider` : | the provider to write to a string
Returns : | a new string representing the `provider`.

Since 3.2

### GTK_CSS_PROVIDER_ERROR

    #define GTK_CSS_PROVIDER_ERROR (gtk_css_provider_error_quark ())

### enum GtkCssProviderError

    typedef enum {
      GTK_CSS_PROVIDER_ERROR_FAILED,
      GTK_CSS_PROVIDER_ERROR_SYNTAX,
      GTK_CSS_PROVIDER_ERROR_IMPORT,
      GTK_CSS_PROVIDER_ERROR_NAME,
      GTK_CSS_PROVIDER_ERROR_DEPRECATED,
      GTK_CSS_PROVIDER_ERROR_UNKNOWN_VALUE
    } GtkCssProviderError;

### GtkCssSection

    typedef struct _GtkCssSection GtkCssSection;

Defines a part of a CSS document. Because sections are nested into one another, you can use `gtk_css_section_get_parent()` to get the containing region.

Since 3.2

### enum GtkCssSectionType

    typedef enum {
      GTK_CSS_SECTION_DOCUMENT,
      GTK_CSS_SECTION_IMPORT,
      GTK_CSS_SECTION_COLOR_DEFINITION,
      GTK_CSS_SECTION_BINDING_SET,
      GTK_CSS_SECTION_RULESET,
      GTK_CSS_SECTION_SELECTOR,
      GTK_CSS_SECTION_DECLARATION,
      GTK_CSS_SECTION_VALUE
    } GtkCssSectionType;

The different types of sections indicate parts of a CSS document as parsed by GTK's CSS parser. They are oriented towards the CSS grammar CSS grammer, but may contain extensions.

More types might be added in the future as the parser incorporates more features.

`GTK_CSS_SECTION_DOCUMENT` | The section describes a complete document. This section time is the only one where `gtk_css_section_get_parent()` might return `NULL`.
`GTK_CSS_SECTION_IMPORT` | The section defines an import rule.
`GTK_CSS_SECTION_COLOR_DEFINITION` | The section defines a color. This is a GTK extension to CSS.
`GTK_CSS_SECTION_BINDING_SET` | The section defines a binding set. This is a GTK extension to CSS.
`GTK_CSS_SECTION_RULESET` | The section defines a CSS ruleset.
`GTK_CSS_SECTION_SELECTOR` | The section defines a CSS selector.
`GTK_CSS_SECTION_DECLARATION` | The section defines the declaration of a CSS variable.
`GTK_CSS_SECTION_VALUE` | The section defines the value of a CSS declaration.

Since 3.2

### gtk_css_section_get_end_line ()

    guint               gtk_css_section_get_end_line        (const GtkCssSection *section);

Returns the line in the CSS document where this section end. The line number is 0-indexed, so the first line of the document will return 0. This value may change in future invocations of this function if `section` is not yet parsed completely. This will for example happen in the GtkCssProvider::parsing-error signal. The end position and line may be identical to the start position and line for sections which failed to parse anything successfully.

`section` : | the section
Returns : | the line number

Since 3.2

### gtk_css_section_get_end_position ()

    guint               gtk_css_section_get_end_position    (const GtkCssSection *section);

Returns the offset in bytes from the start of the current line returned via `gtk_css_section_get_end_line()`. This value may change in future invocations of this function if `section` is not yet parsed completely. This will for example happen in the GtkCssProvider::parsing-error signal. The end position and line may be identical to the start position and line for sections which failed to parse anything successfully.

`section` : | the section
Returns : | the offset in bytes from the start of the line.

Since 3.2

### gtk_css_section_get_file ()

    GFile *             gtk_css_section_get_file            (const GtkCssSection *section);

Gets the file that `section` was parsed from. If no such file exists, for example because the CSS was loaded via ``gtk_css_provider_load_from_data()``, then `NULL` is returned.

`section` : | the section
Returns : | the GFile that `section` was parsed from or `NULL` if `section` was parsed from other data. [transfer none]

Since 3.2

### gtk_css_section_get_parent ()

    GtkCssSection *     gtk_css_section_get_parent          (const GtkCssSection *section);

Gets the parent section for the given `section`. The parent section is the section that contains this `section`. A special case are sections of type GTK_CSS_SECTION_TYPE_DOCUMENT. Their parent will either be `NULL` if they are the original CSS document that was loaded by `gtk_css_provider_load_from_file()` or a section of type GTK_CSS_SECTION_TYPE_IMPORT if it was loaded with an import rule from a different file.

`section` : | the section
Returns : | the parent section or `NULL` if none

Since 3.2

### gtk_css_section_get_section_type ()

    GtkCssSectionType   gtk_css_section_get_section_type    (const GtkCssSection *section);

Gets the type of information that `section` describes.

`section` : | the section
Returns : | the type of `section`

Since 3.2

### gtk_css_section_get_start_line ()

    guint               gtk_css_section_get_start_line      (const GtkCssSection *section);

Returns the line in the CSS document where this section starts. The line number is 0-indexed, so the first line of the document will return 0.

`section` : | the section
Returns : | the line number

Since 3.2

### gtk_css_section_get_start_position ()

    guint               gtk_css_section_get_start_position  (const GtkCssSection *section);

Returns the offset in bytes from the start of the current line returned via `gtk_css_section_get_start_line()`.

`section` : | the section
Returns : | the offset in bytes from the start of the line.

Since 3.2

### gtk_css_section_get_type ()

    GType               gtk_css_section_get_type            (void);

### gtk_css_section_ref ()

    GtkCssSection *     gtk_css_section_ref                 (GtkCssSection *section);

Increments the reference count on `section`.

`section` : | a GtkCssSection
Returns : | `section` itself.

Since 3.2

### gtk_css_section_unref ()

    void                gtk_css_section_unref               (GtkCssSection *section);

Decrements the reference count on `section`, freeing the structure if the reference count reaches 0.

`section` : | a GtkCssSection

Since 3.2

## Signal Details

### The `"parsing-error"` signal

    void                user_function                      (GtkCssProvider *provider,
                                                            GtkCssSection  *section,
                                                            GError         *error,
                                                            gpointer        user_data)      : Run Last

Signals that a parsing error occured. the `path`, `line` and `position` describe the actual location of the error as accurately as possible.

Parsing errors are never fatal, so the parsing will resume after the error. Errors may however cause parts of the given data or even all of it to not be parsed at all. So it is a useful idea to check that the parsing succeeds by connecting to this signal.

Note that this signal may be emitted at any time as the css provider may opt to defer parsing parts or all of the input to a later time than when a loading function was called.

`provider` : | the provider that had a parsing error
`section` : | section the error happened in
`error` : | The parsing error
`user_data` : | user data set when the signal handler was connected.

## See Also

GtkStyleContext, GtkStyleProvider