# Ignition Perspective Component Styling

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-component-styling/97687>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 23, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-component-styling/97687 "2024-10-23T18:32:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew\_Lin](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@Andrew\_Lin](https://forum.inductiveautomation.com/u/Andrew_Lin)\
**Post date:** [October 23, 2024, 6:32pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-component-styling/97687/1 "2024-10-23T18:32:15Z")

</div>

I created a bunch of components and components nested within components. I styled each components individually so they would all be uppercase but turns out I have a new requirement to have all components be capitalized instead. Is there a way where I can remove all the styling I applied in the entire project and restart applying it? Or would I have to go thru each component individually to change it.

So far, I attempted to add a styling property on the parent component but the child styling is still being applied. I think it is overwriting what I have on the parent.

---

<div class="post-metadata">

**Author:** ![Lynn\_Martineau](https://avatars.discourse-cdn.com/v4/letter/l/f1d935/32.png) [@Lynn\_Martineau](https://forum.inductiveautomation.com/u/Lynn_Martineau)\
**Post date:** [October 23, 2024, 6:48pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-component-styling/97687/2 "2024-10-23T18:48:52Z")

</div>

The whole idea of styling is to edit the style class and everything that uses that style class will automatically get the update; _unless, you set inline styles on every component instead of creating and using a style class_.  
[Style Classes](https://inductiveuniversity.com/video/style-classes/8.0?r=%2Fvideo%2Fsearch%2F%3Fq%3Dperspective%20style%26checked_topics%3D)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 23, 2024, 7:22pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-component-styling/97687/3 "2024-10-23T19:22:36Z")

</div>

Type everything in proper-case and apply the css style class as shown here:

> **[W3Schools.com](https://www.w3schools.com/cssref/pr_text_text-transform.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

That way you can change them all with enabling / disabling one or more CSS statements.

You'll need to define a standard:

- Appropriate capitalisation of first word and proper nouns. e.g. "Grain Silo 1 tare weight (kg)".  
or
- Capitalisation of all words except short ones like "of", "and", etc. e.g. "Grain Silo 1 Tare Weight (kg)".

IA use the latter on their user interface but I don't like it as it causes confusion between proper nouns and regular nouns / verbs.

* * *

Incidentally, you should be taking the same approach to styling if you use MS-Word or Open Office. Define a style for a heading, type them in proper-case and edit the style to turn All-Caps on or off. How often have you seen "proficient in MS-Word" on someone's CV? I bet most haven't a clue how to style a document!