# Basic styling

<figure><img src="https://3095745603-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs3DuOoTSAyAvoXmHTrAZ%2Fuploads%2Fp8MNLRca76ZxlNA8uKOp%2FScreenshot%202024-12-31%20at%204.28.25%E2%80%AFPM.png?alt=media&#x26;token=b1f29016-2cef-4d05-88ee-e6621ad83373" 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:
