Tutorials     About     RSS
Tech and Media Labs

Riot.js CSS Styling

Jakob Jenkov
Last update: 2017-04-19

Riot.js tags can use CSS styles internally to style the HTML inside the custom tag. Here is an example of a Riot.js tag which defines a style for the <h1> element used inside it:

<h1>The Title</h1>

    h1 {
        font-family: Arial;

Tag Styles Are Local

The CSS styles defined inside a Riot.js tag are local to the HTML inside that tag. In the example above, the style defined for the <h1> element will only affect <h1> elements inside a mytag tag. Riot.js takes care of that when the tag definition is compiled.

Using Expressions to Set Style Classes

You can use Riot.js expressions to set a style class on an HTML element used inside a Riot.js tag. Here is an example of setting a CSS style class using a Riot.js expression:

<h1 class="{selectedClass}">The Title</h1>

    .aclass {
        font-family: Arial;
        color: #ff00ff;

    this.selectedClass = "aclass";


Riot.js Styles Live in the Head Element

The Riot.js tag compiler will extract CSS styles from the tag definition and inject them into the <head> element of the HTML page using the tag. The Riot.js tag compiler does this to avoid repeating the CSS styles in case a Riot.js tag is used multiple times inside the same HTML page.

Jakob Jenkov

Featured Videos

Thread Congestion in Java - Video Tutorial

Sponsored Ads

Maildroppa - Smart Email Marketing Solution
Close TOC

All Trails

Trail TOC

Page TOC