# CSS Text Property

CSS Text accepts any valid CSS string values. 

You can add a Name, Default, and make it responsive or not as required. 

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Choose CSS Text in the dropdown.
* Select the Text Property you wish to configure.

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

## Connect&#x20;

The Class Property needs to be connected for it to be applied to the canvas.&#x20;

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the CSS Text Property.
* Select "Modify" in the toolbar or the Block Inspector.

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

* The blocks contained in the component are now visible in the navigator.
* Find and select the Conditions property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish  to add, in this example Text Colour.

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

* Select the required CSS Property in the dropdown, in this example CSS Colour Text.

<figure><img src="/files/81ZJoaEt9AqVRuimm8JQ" alt=""><figcaption></figcaption></figure>

The connected CSS Text property will now have a coloured background in the Block Inspector to indicate that it is connected.

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

* A CSS Text field is now available in the Block Inspector where you can input your string.

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

As an example, the colour string "saddlebrown" has been added to the Name field of the component.

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

## Name&#x20;

Allows you to label the selected CSS Text property.

* Open the Component Properties modal.
* Select required CSS Text property.
* Input suitable label name to Name field.

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

The required label will now be visible in the Block Inspector next to the text field.

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

## Default

Allows you to set suitable default CSS Text string to your component.

* Open the Components Properties.
* Select required CSS Text property.
* Open Settings tab.
* Input suitable default text in Default field, in this example the colour "purple".

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

The Responsive toggle offers you the possibility of setting a CSS Text property for a specified screen size.

* In the Components Properties modal, toggle Responsive as required.
* Select required screen size.

<figure><img src="/files/eHFisjFD5GINg2nKWiNu" 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://docs.cwicly.com/cwicly/components/properties-add/css-text-property.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.