> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/cwicly/components/properties-add/css-text-property.md).

# CSS Text Property

CSS Text accepts any valid CSS string values.&#x20;

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

* 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>
