> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/tutorials/building-widgets/in-depth/6-styling.md).

# 6. Styling

The teaching of Less and CSS is outside the scope of this academy. However, there are a few important points to keep in mind. Most of the concepts I explain here apply not only to WEM widgets but also to web development in general.

### Global Space

When you publish or preview a WEM application, the Less styles from all the widgets are combined into a single CSS file. This CSS file is then included in the design template. This presents a significant issue: all the CSS exists in a global space. I briefly discussed this in previous chapters. As we learned, if you are not careful, you could inadvertently overwrite the styles of other widgets or any HTML element, for that matter! For example:

```css
/* Bob's card widget */
.card {
	background: tomato;
}
```

```css
/* Jane's card widget */
.card {
	background: lightgoldenrodyellow;
}
```

In this case, both Bob and Jane have created a card widget using the class name "card." Even if Jane's widget is not used on a page, if Bob's widget is included, it may appear to have a strange yellow background. This can lead to confusion and blame for issues that are not actually related to Bob's widget. It is advisable to make class names more unique. You can add prefixes to the class names, such as your initials, your company name, or both, like this:

```css
/* Bob's card widget */
.bobs-company-name-card {
	background: tomato;
}
```

```css
/* Jane's card widget */
.janes-company-name-card {
	background: lightgoldenrodyellow;
}
```

### CSS Variables

When WEM supported widgets, it included Less by default. Less is powerful because it supports variables, which makes styling more organized and easier to maintain. Nowadays, CSS variables are supported in all major browsers and offer even greater capabilities. You can alter the value of a CSS variable in real time, creating new opportunities for styling your widgets. You can still use Less variables as a base. For example, consider the following Less code:

```less
body {
	--card-color: @brand-danger;
}

.janes-company-name-card {
	background: var(--card-color);
	border: 1px solid hsl(from var(--card-color) h s calc(l - 10));
	color: white;
	padding: 8px;
}
```

However, if you save this code, you will encounter an error message indicating a syntax error on the line setting the `border` property.

### Escape Syntax

What is happening here? This is because Less has its own syntax and attempts to parse the CSS value as a Less expression. We can resolve this issue by using the escape syntax `~"value"`. If we modify the line as follows:

```less
.janes-company-name-card {
	border: ~"1px solid hsl(from var(--card-color) h s calc(l - 10))";
}
```

This change makes the code valid. While it may not be ideal, it is better than nothing.

### Embedding Resources

You may be wondering how to embed a resource in Less. The short answer is that you cannot do it directly. The following code, which uses a made-up WEM style syntax, will not work:

```less
.company-logo {
	/* This does not work. */
	background: <?less FileUrl(@CompanyLogo) ?>;
}
```

To achieve this, you need to revert to using the `<style>` tag or apply it via JavaScript.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/tutorials/building-widgets/in-depth/6-styling.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.