# CSS Styles
```
sample-integration/
├── styles/
| └── sample-integration.less
```
The Polarity Integration framework allows you to specify `less` or `css` stylesheets which can be used to provide custom styling for your integration template. Less stylesheets are automatically compiled when the integration is first loaded by the Polarity Server. Less compilation errors are captured as integration errors and should appear on the Integration page error list.
Any CSS and Less styles you provide are automatically namespaced to your integration. This means your CSS classes should not "bleed" into other integrations.
{% hint style="info" %}
The Polarity Notification window comes preloaded with Bootstrap v4 which means you can take advantage of any of the bootstrap CSS classes. Please keep this in mind when creating CSS classes as any collisions with built-in bootstrap classes could cause unintended visual effects.
For a full review of all boostrap CSS classes please [see the official Bootstrap documentation](http://getbootstrap.com/css/).
{% endhint %}
## Setting up Styles
We generally recommend using `less` stylesheets as `less` files are backwards compatible with `css` but include additional features such as slash style comments (`//`) and nested classes.
For the full documentation on `less` please see .
To get started first create your `less` file:
```css
// ./styles/sample-integration.less
.red-text{
color: red;
}
```
Make sure to specify the `less` file in your `config.js` so that it is loaded when your integration is loaded:
```javascript
// config/config.js
module.exports = {
styles:[
'./styles/sample_integration.less'
]
}
```
You can now use the styles in your template file:
```markup
This is red
```
## Helper CSS Classes
As users are able to set custom colors for integrations there are 4 CSS helper classes that let you make use of the colors chosen by the user at runtime.
### p-key
The `p-key` class is used to style the `key` in a key-value pair.
```
Severity:
High
```
### p-value
The `p-value` class is used to style the `value` in a key-value pair. Any text styled with `p-value` will be bold.
```markup
Severity:
High
```
### p-action
The `p-action` class is used to style text that can be clicked on by the user to trigger some action. Text styled with `p-action` will be green.
```markup
Click to Expand
```
### p-link
The `p-link` class is used to style text that is an external link. Text styled with `p-link` will be blue.
```markup
Google
```
## Color Classes
The following special CSS classes can be applied to style text, background and border colors to match the color selected by a user:
### integration-text-color
CSS class that modifies the `color` CSS attribute.
```markup
Hello World
```
### integration-text-bold-color
CSS class that modifies the `color` CSS attribute setting it to a darker version of `integration-text-color`.
```markup
Hello World in Bold!
```
### integration-background-color
CSS class that modifies the `background-color` property and sets it to a lighter version of `integration-text-color`.
```markup
Hello World
```
### integration-border-color
CSS class that modifies the `border-color` CSS property. Note that for a border to be visible you will still need to specify the `border-width` property and `border-style` property.
```markup
This is a box with a border.
```
{% hint style="info" %}
For more styling guideline examples please see the style guide integration which can be found here
{% endhint %}