---
title: "Styling with CSS"
slug: "styling-with-css"
updated: 2025-10-09T10:59:36Z
published: 2025-10-09T10:59:36Z
canonical: "learn.servitly.com/styling-with-css"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling with CSS

Other than JavaScript or HTML (for templates), a component definition may also include a CSS that can be used to control how the component is visualized in the page.

Within the [CSS](/docs/component-css) editing page, you can define the set of rules that must be loaded together with the component. In addition, if needed, you can also redefine rules for mobile navigation.

Instead of using the global application CSS, you can configure it in the [Appearance](/docs/css) page. We suggest you leave all the CSS rules related to a specific component directly in the component definition.

### How to write CSS rules?

In case you are defining rules for a WIDGET component, a good practice is to prefix all rules with the widget tag.

Below you can see the CSS rules for a widget with *machine-status-widget* tag.

```css
machine-status-widget .diagram {
    width: 100%;
    background-color: #D2D2D2;
}

machine-status-widget .span {
    color: #888888;
}
```

When defining a FILTER, in the result value, you can create HTML using inline style attributes or classes. In this case, you can define your classes with a specific name.

Below you can see the CSS rules for a filter that displays an icon for a status code rendered through the following output.

CSSHTMLFilter JavaScript

```css
.machine-status.success {
   color:green;
}

.machine-status.error {
   color:error;
}
```

```javascript
let status = (value == 'abc') ? "success" : "error";
return '<div class="machine-status ' + status + '">' + status.toUpperCase() + '</div>';
```

```xml
<div class="machine-status success">SUCCESS</div>
<div class="machine-status error">ERROR</div>
```

In case you are editing a TEMPLATE, into the HTML, you can use CSS classes with specific names.

Below you can see the CSS rules for a template that displays the machine productivity.

CSSHTML

```css
.productivity-template value-widget .card {
   border:solid 2px green;
}

.productivity-template time-series-chart-widget .card {
   max-width:400px;
}
```

```xml
<div class="d-flex flex-wrap components-row productivity-template">
	<value-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</value-widget>
	<time-series-chart-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</time-series-chart-widget>	
</div>
```