# 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FjRtyEDDA2QEDxMJP90Re%2FScreenshot%202023-10-14%20at%2011.27.30.png?alt=media&#x26;token=3211eeb3-3968-4629-a986-ec3ced3095da" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhlQ5u5fA969QlJqgctHp%2FScreenshot%202023-10-14%20at%2011.46.00.png?alt=media&#x26;token=7a1f6dfb-01b1-4fd8-a4a8-2cf13bb7c60a" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhzYZvvbbs1Hr7c7XNWId%2FScreenshot%202023-10-14%20at%2011.48.54.png?alt=media&#x26;token=95b93c73-9b8c-4e53-84dc-d608593db1b1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FCHyX7akkMopZS7KwgUpR%2FScreenshot%202023-10-14%20at%2011.50.11.png?alt=media&#x26;token=0f9fa8f0-fe06-46b6-8980-49e9ffa57da3" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FwwFYmrCqi6JPmYe6DKWR%2FScreenshot%202023-10-14%20at%2011.53.19.png?alt=media&#x26;token=8e7e7c0f-68a3-4561-afb9-1dff3aa637b6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FyyZDJr6IqgCQk9DPcO2v%2FScreenshot%202023-10-14%20at%2012.17.14.png?alt=media&#x26;token=f89ad5bb-e1b9-44d5-846c-f3bfbc78e3ab" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F1EwcrZO1QZmucuYF45rl%2FScreenshot%202023-10-14%20at%2012.18.47.png?alt=media&#x26;token=bcd26878-c487-4962-8da0-6d6beaba4d35" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Ff8Z6F6tzrePF516kxppK%2FScreenshot%202023-10-15%20at%2010.02.56.png?alt=media&#x26;token=3201e371-0340-4041-9f07-741f98278d6f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FcS5haUguZjogUlOfRzU7%2FScreenshot%202023-10-15%20at%2010.03.51.png?alt=media&#x26;token=aa0b3820-60b6-40f0-bbab-668fc36cc01b" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FCJBUbR7hFQaeMIr3fKf9%2FScreenshot%202023-10-15%20at%2010.07.00.png?alt=media&#x26;token=41ecb73a-b84c-4602-9157-4d7b65e9ef6a" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FgIWuW8Gyp14vaQqbP2xd%2FScreenshot%202023-10-15%20at%2010.08.59.png?alt=media&#x26;token=a43cd29f-7607-4001-a63c-a07c13ac11b4" alt=""><figcaption></figcaption></figure>
