# Page Styling

Modularjs makes styling your components flexible and simple by supporting **two ways to style**:

1. **CSS files** paired with your component (automatic loading)
2. **Inline styles** via the `style` prop on elements

***

### 1. CSS Files

* Each component **can have one CSS file** with the **same filename** as the JSX file but with `.css` extension.
* The CSS file must be placed **next to the JSX file** in the same folder.
* Modularjs **automatically loads** this CSS file and injects it, no import or extra setup needed.

Example folder structure:

```
/pages
  /Dashboard.jsx
  /Dashboard.css
```

Modularjs loads `Dashboard.css` whenever it loads `Dashboard.jsx`.

***

### 2. Inline Styles

* You can also use inline styles via the React-like `style` prop in your JSX.
* Inline styles work normally and are useful for dynamic or scoped styling.

Example:

```jsx
return <h1 style={{ color: 'white', fontWeight: 'bold' }}>Hello World</h1>;
```

***

### Benefits of Both

* **CSS files** keep styles modular, reusable, and separate from logic.
* **Inline styles** provide easy dynamic styling and overrides.
* You can combine both seamlessly inside your components.

***

### Quick Example

**SpinningSquare.jsx**

```jsx
module.exports = () => (
  <div className="square spin" style={{ borderRadius: '8px' }} />
);
```

**SpinningSquare.css**

```css
.square {
  width: 50px;
  height: 50px;
  background-color: crimson;
  margin: 20px auto;
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
```

No import of CSS needed—styles are auto-applied, and inline style `{ borderRadius: '8px' }` adds rounded corners dynamically.

***

### Summary

* CSS files: one per component, auto-loaded by Modularjs, keep styles organized.
* Inline styles: use React-like `style` props for dynamic or component-scoped styling.
* Both can be used together for maximum flexibility.


---

# Agent Instructions: 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:

```
GET https://nexo-maker.gitbook.io/nexo-maker-docs/modular/page-styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.