> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/jsx.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/jsx.design/styling-ui/images-and-media.md).

# Basic styling

<figure><img src="/files/3OQY1KjUHSQqjZcDS2DF" alt=""><figcaption><p>You can use the styling bar on the right-hand side to style your canvas</p></figcaption></figure>

Simply click on an element or Ant Design (AntD) component on the canvas. The right sidebar will reveal all styling options available for the selected item.

***

## Customise Component Style

### Option 1: Write CSS Properties

If you’re familiar with coding, you can directly add CSS properties under the `element.style` section.

* **How it works:**\
  Type CSS as you would in an IDE. JSX.Design provides intelligent suggestions to make your workflow faster and error-free.
* **Example:**\
  `background-color: #f0f0f0;`\
  `border-radius: 10px;`

### Option 2: Style Visually

For a more intuitive approach, use the visual styling options available in the sidebar.

#### Visual Styling Options:

* **Layout:** Adjust layout properties like `display`, `alignment`, and `positioning`.
* **Spacing:** Modify `margin` and `padding` values to control spacing around the element.
* **Size:** Configure dimensions, including `height`, `width`, `min/max` constraints, and more.
* **Typography:** Change font styles, sizes, colors, and text formatting.
* **Background:** Set background colors, add images, and adjust image positioning.
* **Appearance:** Define border styles and toggle visibility (hide/unmount elements).

{% hint style="info" %}
We will be covering more CSS properties to be able to edit visually. For any property not covered in the visual options, you can use the `element.style` section to add custom CSS manually.
{% endhint %}

***

## Manage Props

Navigate to the **Props Tab** to add and manage properties for elements and components.

#### What can you do:

* Create custom props and access them via code.
* Add AntD-specific props, which instantly reflect changes in the editor.

{% hint style="info" %}
Get a list of ANT.D components and their props from their [website](https://ant.design/components/overview/).
{% endhint %}

**Learn More:** Check out the detailed guide on creating and using Props:

***

## Add Custom CSS (SCSS Support)

If you need more advanced styling, you can write custom CSS directly:

* Select a component and go to the **Custom SCSS** tab in the sidebar.
* Enter your CSS in a familiar editor, making it easy to add complex styles manually.

Example:

```css
.card {  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
}  
```

***

## Edit the Global CSS File

For project-wide styles, you can edit the global CSS file:

* Click the **global-style.css** button on the top right (next to the *Export Code* button).
* Make updates that apply across all components and elements in your project.

***

## Suggested Enhancements

* Combine global and custom CSS for consistent design systems.
* Use props dynamically to create reusable and adaptable components.
* Mix visual and manual styling for the perfect balance between speed and precision.

***

#### **Next Steps:**

Great! Let's move on to other exciting topics: