> For the complete documentation index, see [llms.txt](https://creatorlabs.gitbook.io/weblabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creatorlabs.gitbook.io/weblabs/understanding-weblabs/styles.md).

# Styles

Styling is very important for any app that has some sort of user interface, and same applies for Weblabs. Till now, we learnt how we can add properties and events to a component. Let's now see how we can add styles to our component as well.

### Inline styles

In HTML, we can add inline styling using the `style` attribute. Since we can add attributes in our Weblabs as well, we can just as well add them inline like this:

```javascript
import { p } from '@weblabsjs/core/components'

p("This is red").prop("style", "color: red")
```

But this is just a hectic way of styling, which also does not provides you with a lot of options

### Styles from css files

You can directly import stylesheets from your source directory and use them in your UI by selecting ids and classes in your css file. Let's see the above example

{% code title="main.js" %}

```javascript
import { p } from '@weblabsjs/core/components'
import "./style.css"

p("I am in red color").id("red")
```

{% endcode %}

{% code title="style.css" %}

```css
#red {
    color: red;
}
```

{% endcode %}

### Styling using SCSS

Since weblabs uses vite for development, we will need to look at the guidebook of vite to add SCSS support directly into vite, then we can just import the scss file as we did for our css file.

### Styles in HTML

If you are using weblabs as a CDN, you can just link your stylesheets to the html as you'd do to your default HTML files. It is as easy as that


---

# 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://creatorlabs.gitbook.io/weblabs/understanding-weblabs/styles.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.