9.1. Styling images
Prev | 9. CSS stylesheets | Next

### 9.1. Styling images

The "Simple Section" document type has an `image` element. The source of the image is specified using required attribute `source`, which contains an absolute or relative URI. An `image` element also has optional `width` and `height` attributes, which contain dimensions expressed in pixels.

This `image` element is styled using replaced content. Excerpts from `rng_section_config/section.css` (same file for all variants):

    image {
        display: inline;
        content: image-viewport(attribute, source,
                                data-type, anyURI,
                                content-width, attr(width),
                                content-height, attr(height));
    }

This replaced content consists in extension pseudo-function `image-viewport()` in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS) or extension pseudo-function `image()` in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS). Note that `image()` is based on `image-viewport()`, except that it has a simpler syntax. For example, one could have styled the `image` element as follows:

    image {
        display: inline;
        content: image(attr(source), attr(width), attr(height));
    }

Prev | Up | Next
9. CSS stylesheets | Home | 9.2. Styling tables