# Format content with the CSS menu

The CSS Formatting menu is very useful when it comes to formatting content on your page. Continue reading this article to learn more on how to use this menu. Topics discussed in this article: 

* [Open the CSS Formatting menu](#css-formatting-menu)
* [Menu Features](#menu-features)
* [Examples](#examples)

**Note**: This menu draws on concepts related to coding languages (HTML & CSS). A basic understanding of these concepts will make it easier to use this menu. Feel free to try it out on your own. You can reach out to our Customer Success team (<contact@theshoppad.com>) if you would like assistance.

1\. Starting from the Page Editor, click on a content block on your page.

2\. Click on the (...) **More icon**.

<figure><img src="/files/XJabvIgvXce7TNitUrZh" alt=""><figcaption></figcaption></figure>

3\. Click on the **Settings icon**.

<figure><img src="/files/U4Ot3BhctkrIwpPVUu4U" alt=""><figcaption></figcaption></figure>

This section will go over each feature of the menu going from top to bottom.

#### CSS Button & Panel

At the top of the menu is a CSS button. Clicking this button displays a CSS pop-up panel. Here you can see what styles have been applied, write in CSS, or add class selectors.

<figure><img src="/files/UkestL6rCRkwDDaazoPE" alt=""><figcaption></figcaption></figure>

#### HTML tags

Next is a trail of HTML tags that follows the code structure of the content you have clicked on. Keeping it on the rightmost tag will adjust that content specifically. You can click any of the tags listed to the left to adjust them.

<figure><img src="/files/JdRBPeXXESenqwyDsxfv" alt=""><figcaption></figcaption></figure>

You can also click on other content on the page to adjust it with the formatting menu.

#### Categories

Then a list of categories that you can adjust the styles for. You can click on any of the categories listed. Clicking the ••• icon displays more categories.

<figure><img src="/files/mADKncW90q53U1lZngzQ" alt=""><figcaption></figcaption></figure>

#### Styles

Depending on the category you have selected, styles that can be adjusted display underneath for that category. These styles will vary depending on the category.

<figure><img src="/files/pSMPqASlDh39NEJ7WJXJ" alt=""><figcaption></figcaption></figure>

To save any changes you have made, click the **Save** button at the top right corner of the editor.

### Examples <a href="#examples" id="examples"></a>

Listed here are common examples of adjustments made with this menu.

**Add spacing around images**

In this example, I have added 10px to the top under padding on this image. This adds a small amount of space at the top.

You can increase the number for a larger space. You can add this to bottom, left, or right to apply spacing to the other sides of the image.

<figure><img src="/files/pDQTchIp3CGt10eT4qpX" alt=""><figcaption></figcaption></figure>

#### Add border around text

A border that is gray and 2px thick has been added to this header title. Increasing the number will make the border thicker.

<figure><img src="/files/3NimXVRlhqbzfTzlbvcu" alt=""><figcaption></figcaption></figure>


---

# 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://shoppad.gitbook.io/pagestudio/customize-the-app/page-editor-format-content-with-the-css-formatting-menu.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.