This document defines the RCSS Cascading Style Sheets language. RCSS is based on the CSS2 specification, with certain elements removed or altered to suit the needs of RmlUi. In some cases, elements have been taken from the CSS3 working draft. This document provides an overview of RCSS and the differences between RCSS and CSS, and should be read in conjunction with the CSS2 specification.

RCSS interacts with RML in an identical fashion to CSS and HTML. Style properties declared in a RCSS are attached selectively to elements defined in RML to affect layout, positioning and other style attributes (such as font, color, text decoration, etc).

If you are familiar with CSS, a good place to start is the property index, which outlines the properties and values supported in RCSS and the new functionality included. Next, read up on decorators, the new, flexible way to skin elements.

If you are not, read through this documentation while consulting the CSS2 specification for detailed examples and technical details, or skip all this for now and play around with the samples!

Contents

1. Syntax and basic data types
2. Selectors
3. Assigning property values, cascading, and inheritance
4. Box model
5. Visual formatting model
6. Visual formatting model details
7. Visual effects
8. Colours, backgrounds, and rounded corners
9. Fonts
10. Text
11. Tables
12. User interface
13. Flexboxes
14. Animations, transitions, and transforms
15. Media queries
16. Sprite sheets
17. Decorators
    • Image
    • Tiled horizontal
    • Tiled vertical
    • Tiled box
    • Ninepatch
    • Straight gradient
    • Linear gradient
    • Radial gradient
    • Conic gradient
    • Shader
    • Text
18. Masking
19. Filters
20. Font effects
    • glow
    • outline
    • shadow
    • blur

Appendix

• Property index