> 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/basics/6-styling.md).

# 6. Styling

A veteran web developer knows that there are multiple ways to style HTML elements. For example, this can be done statically by including a `<link rel="stylesheet" href="style.css">`, or dynamically via JavaScript with `element.style.backgroundColor = "tomato"`, to name a few. Yes! "Tomato" is, unironically, the best red color there is, in my personal opinion!

One way to style widgets is by using the Less editor under the Styles tab. Less is a CSS preprocessor that provides additional functionality on top of CSS. If you prefer not to write in Less, you can still write standard CSS without using any Less features.

If you do want to write in Less, you will also have access to built-in variables from Bootstrap 3, which can be very handy if you want to customize some of their components in a widget. You can find these variables in the right-side panel of the screen.

In this chapter, we are going to write a simple message box. If you are familiar with Bootstrap 3, you know they have an Alert component available out of the box, and we provide that as one of our base components. However, for the sake of this exercise, we will write one from scratch.

#### Creating the Message Widget

1. Create a new widget called "Message" in the "Widget Academy" library.
2. Copy and paste the following script:

```html
<div class="message <?attr @Style ?>"><?= @Text ?></div>
```

3. Create a Literal Text Property called "Text" and place it in the General section.
4. Create a Dropdown Property called "Style" and place it in the Appearance section, with the following labels: "Info," "Success," and "Danger," and the corresponding values: "info," "success," and "danger." Note that the values are case-sensitive and should be in lowercase!
5. Finally, click on the Styles tab and copy and paste the following Less code:

```less
.message {
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 15px;

	&.danger {
		background: lighten(@brand-danger, 25%);
		border-color: lighten(@brand-danger, 10%);
		color: darken(@brand-danger, 23%);
	}

	&.info {
		background: lighten(@brand-info, 25%);
		border-color: lighten(@brand-info, 10%);
		color: darken(@brand-info, 23%);
	}

	&.success {
		background: lighten(@brand-success, 25%);
		border-color: lighten(@brand-success, 10%);
		color: darken(@brand-success, 23%);
	}
}
```

Note that we are using the predefined Bootstrap branding color variables to ensure this widget adopts the color styles of the selected design template in a portal, making it look nice across various design templates. Additionally, we use two Less color functions: `lighten()` and `darken()` to differentiate the branding colors from the background, border, and text color of the message box.


---

# 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/basics/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.