# CSS to change Title font size in a collection

**URL:** <https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117>\
**Category:** Ask for Help\
**Created:** [July 11, 2025, 7:43pm UTC](https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117 "2025-07-11T19:43:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MJolley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mjolley/32/85220_2.png) [@MJolley](https://community.glideapps.com/u/MJolley)\
**Post date:** [July 11, 2025, 7:43pm UTC](https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117/1 "2025-07-11T19:43:48Z")

</div>

I have a custom collection that displays a list of items from a sheet as a schedule of events. Each item in the collection is displayed as a separate part (shown in picture). How can I write CSS to change the font size of the Title item only?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/437dfd36de76ca6dc5ec57edf0096ba5ea1c5124.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 12, 2025, 3:00am UTC](https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117/2 "2025-07-12T03:00:49Z")

</div>

It depends. Assuming you’re using a list collection within the custom collection —

1. Add a css class to the collection within the custom collection (something like `custom-title`)
2. In Settings → Appearance, target the collection’s title using this CSS:

```auto
.custom-title [class*="StyledP2"] {
font-size: 30px;
}

```

---

<div class="post-metadata">

**Author:** ![MJolley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mjolley/32/85220_2.png) [@MJolley](https://community.glideapps.com/u/MJolley)\
**Post date:** [July 13, 2025, 10:12pm UTC](https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117/3 "2025-07-13T22:12:45Z")

</div>

Here’s the setup of the custom collection:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22d2f5445f107dd96c6b6abf054dbc5773355a54.png)

And here’s how the items appear:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fa2b4384e931084866e1322248ab1d3fbfea2eb3.png)

I want the text “Remove materials from storage…” to be a different size (smaller, in this case). The code you wrote isn’t doing that, no matter which object I apply the CSS code to.

Also, more broadly, how do you know what code to write and what to target? Is there a resource somewhere that shows which objects/styles exist in Glide? For example, the “StyledP2” class, where did you figure out to target that?

---

<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:** [July 13, 2025, 11:50pm UTC](https://community.glideapps.com/t/css-to-change-title-font-size-in-a-collection/83117/4 "2025-07-13T23:50:04Z")

</div>

> [@MJolley](#):
>
> Also, more broadly, how do you know what code to write and what to target? Is there a resource somewhere that shows which objects/styles exist in Glide? For example, the “StyledP2” class, where did you figure out to target that?

You can use the Inspect function in your browser to check that, but make sure you know what you’re doing because you can inadvertently affect some other components..

 ![CleanShot 2025-07-14 at 06.49.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/0413125e76ba299a08932e32597633682f75dd5d.png)

Here’s a sample to adjust the title font size, with the class name being smaller-title.

```auto
.smaller-title .headlineMedium {
font-size: 1.2rem;
}

```