# Text Component CSS

**URL:** <https://community.glideapps.com/t/text-component-css/40109>\
**Category:** Ask for Help\
**Created:** [March 26, 2022, 2:25am UTC](https://community.glideapps.com/t/text-component-css/40109 "2022-03-26T02:25:09Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Wuerth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_wuerth/32/180_2.png) [@Alex\_Wuerth](https://community.glideapps.com/u/Alex_Wuerth)\
**Post date:** [March 26, 2022, 2:25am UTC](https://community.glideapps.com/t/text-component-css/40109/1 "2022-03-26T02:25:09Z")

</div>

I know this is a somewhat frequent point of conversation so I apologize for bringing it up again. I looked through all the other threads to try to find this info and couldn’t. How to change the color of a SPECIFIC text component on your screen? I found CSS that changed it for ALL the component but could not find CSS for just a single one. I finally got this CSS to display it exactly how I want it, but it only displays it in the builder, it does not change the color when viewing through the actual app. Here’s the CSS I am currently using along with a pic of my desired outcome. Thank you so much!

 ![Dashboard View](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd13255a30b61a8f533c4a842b3d2f5b1904a399.jpeg)

> ```
> div[id\*='screenScrollView'] \> div \> :nth-of-type(2) [data-test="app-text-box"] { color: #f15a29; }
> ```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 26, 2022, 2:28am UTC](https://community.glideapps.com/t/text-component-css/40109/2 "2022-03-26T02:28:21Z")

</div>

what component are you trying to change color? is that text?

---

<div class="post-metadata">

**Author:** ![Alex\_Wuerth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_wuerth/32/180_2.png) [@Alex\_Wuerth](https://community.glideapps.com/u/Alex_Wuerth)\
**Post date:** [March 26, 2022, 2:33am UTC](https://community.glideapps.com/t/text-component-css/40109/3 "2022-03-26T02:33:09Z")

</div>

Yes I just want to change the color of a normal text component

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [March 26, 2022, 2:41am UTC](https://community.glideapps.com/t/text-component-css/40109/4 "2022-03-26T02:41:46Z")

</div>

Why not use a Rich Text component?  
Seems like you’re deliberately making it difficult for yourself.

---

<div class="post-metadata">

**Author:** ![Alex\_Wuerth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_wuerth/32/180_2.png) [@Alex\_Wuerth](https://community.glideapps.com/u/Alex_Wuerth)\
**Post date:** [March 26, 2022, 2:50am UTC](https://community.glideapps.com/t/text-component-css/40109/5 "2022-03-26T02:50:48Z")

</div>

I’m sorry Darren, I’m not sure what you mean? Like just use a rich text component and use markdown? I could do that but then also, I want the texts displayed to be dynamic. I get I could use a template column but I just thought there had to be a way to just display the text you want using a normal text component, then use a rich text component to targe the color of the text.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 26, 2022, 2:51am UTC](https://community.glideapps.com/t/text-component-css/40109/6 "2022-03-26T02:51:39Z")

</div>

```auto
<pre><span><style> 
.kDEQDA{
    color: #f15a29 !important;
}

```

---

<div class="post-metadata">

**Author:** ![Alex\_Wuerth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_wuerth/32/180_2.png) [@Alex\_Wuerth](https://community.glideapps.com/u/Alex_Wuerth)\
**Post date:** [March 26, 2022, 2:53am UTC](https://community.glideapps.com/t/text-component-css/40109/7 "2022-03-26T02:53:46Z")

</div>

But wouldn’t that target all text components?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 26, 2022, 2:54am UTC](https://community.glideapps.com/t/text-component-css/40109/8 "2022-03-26T02:54:58Z")

</div>

text is hard to target… I would just use the rich text component… as Darren said… and make it dynamic using a template column… you will have better controll

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 26, 2022, 2:57am UTC](https://community.glideapps.com/t/text-component-css/40109/9 "2022-03-26T02:57:43Z")

</div>

```auto
<div class="text01">TEXT</div>

<pre><span><style>
.text01 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem;
text-align: center;font-weight: bold;
line-height: normal;
color: red;
text-shadow: 1px 1px grey;
width: 95%;
}

```

replace **TEXT** in template column

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [March 26, 2022, 3:11am UTC](https://community.glideapps.com/t/text-component-css/40109/10 "2022-03-26T03:11:57Z")

</div>

> [@Alex\_Wuerth](#):
>
> I’m sorry Darren, I’m not sure what you mean? Like just use a rich text component and use markdown? I could do that but then also, I want the texts displayed to be dynamic. I get I could use a template column but I just thought there had to be a way to just display the text you want using a normal text component, then use a rich text component to targe the color of the text.

Just use inline styling in a Rich Text component. Something like this:

```auto
<div style="color: #f15a29;">blah blah</div>

```

You can stick that in a template and use replacements if you want it to be dynamic.

---

<div class="post-metadata">

**Author:** ![Alex\_Wuerth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alex_wuerth/32/180_2.png) [@Alex\_Wuerth](https://community.glideapps.com/u/Alex_Wuerth)\
**Post date:** [March 26, 2022, 4:40am UTC](https://community.glideapps.com/t/text-component-css/40109/11 "2022-03-26T04:40:02Z")

</div>

Ok thanks guys! I’m still wrapping my head around CSS so I didn’t know what would be easiest!

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 26, 2022, 7:21pm UTC](https://community.glideapps.com/t/text-component-css/40109/12 "2022-03-26T19:21:12Z")

</div>

Placing text directly into Css and html have two major benefits…

1. It will work with most browsers and operating systems
2. It will not take extra space on the screen, which might create empty lines and make other elements unclickable

---

<div class="post-metadata">

**Author:** ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)\
**Post date:** [November 15, 2023, 5:25am UTC](https://community.glideapps.com/t/text-component-css/40109/14 "2023-11-15T05:25:26Z")

</div>

I would like to change overall text size. Is there a way to do that using css. Any suggestions are welcome

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 15, 2023, 11:45am UTC](https://community.glideapps.com/t/text-component-css/40109/15 "2023-11-15T11:45:36Z")

</div>

I’m not sure if there’s an overall class you can target because there’s no guarantee everything is stored in p or span, but you might try targeting p or span to see if they affect all the things you can see.

This is providing you have access to CSS on Business/Enterprise.