Styling your visualizations

When creating visualizations for Qlik Sense, the following basic types of Cascading Style Sheets (css) are supported:

• Inline: code is written into the tag and is only having an effect to the tag in which they are applied to.
• External: code is created in a separate document and are attached to the visualization.

Qlik Sense set the css class qv-object-[extension name] on your visualizations and your css rules should be prefixed with that.

Example: Prefix css rules

Then you load your css file with requirejs and add its content to the html file.

Example: Load css file

Reusing css files for multiple visualizations

You can reuse your css file if you are creating multiple visualizations that should have the same styling applied. Then store the css in a separate folder and link to it from the visualizations for which it should apply.

Short hand styling

To improve performance and make the css file load faster, it is good programming practice to code your style sheet using short hand.

Example: Styling short hand

Instead of this:

You should do this:

Compatibility

To save time, write the css for Firefox because it is more probable that it will work well in other browsers.

Examples

The below css examples are included in the Simple table code example, included in your Qlik Sense installation.

Example: Loading css content and adding it to the html page

Example: simpletable.css