--- source: https://qlik.dev/extend/build-extension/working-with-styling/ last_updated: 2025-11-21T14:05:39Z --- # Style your visualizations Create visualizations for Qlik Sense using one of the following basic types of Cascading Style Sheets (CSS): - 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. > **Tip:** It's good programming practice to keep your styling in a separate CSS file. > Separating content from design makes your visualizations easier to maintain.\ > Qlik Sense adds the CSS class `qv-object-[extension-name]` to your visualizations. > Prefix your CSS rules with this class to scope your styles properly. Example: Prefix CSS rules ```javascript .qv-object-com-qliktech-horizlist .qv-object-content { overflow: auto; } .qv-object-com-qliktech-horizlist ul { list-style: none; } .qv-object-com-qliktech-horizlist li.data { display: inline-block; margin: 3px; padding: 4px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #111; border-right: 1px solid #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` ## Loading style sheets There are several ways of loading style sheets into your visualization extension: - Loading and adding the content of a CSS file to the document header - Adding a link to a style sheet to the document header - Using the RequireJS CSS plugin > **Note:** Make sure to prevent conflicts between existing styles or style definitions from other visualization extensions when > you are creating style sheets. ### Loading and adding the content of a CSS file to the document header You can use RequireJS and the `text!` prefix in the `define` statement to inject the content into the header of the current document. Qlik Sense includes the RequireJS plugin for loading text resources, which can be used to load a specific CSS file. Assuming you have the following file structure: [image: CSS file structure] When prefixing a path with `text!`, the text plugin loads a file and passes its content to a variable. ```javascript define( [ 'jquery', 'text!./css/myStyle.css' ], function ( $, cssContent ) { // cssContent now contains the content of myStyle.css // Inject the CSS declarations into the header of the current document $( '