# CSS from stylesheet not being applied **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [February 1, 2024, 9:49pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126 "2024-02-01T21:49:24Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [February 1, 2024, 9:49pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/1 "2024-02-01T21:49:24Z")
let's go! ```CSS .psc-temp-celciusUnits { color: #ff4600; font-size: 3rem; } .psc-temp-celciusUnits:after { content: '°C'; } ``` and here's the application: ![Screenshot 2024-02-01 144423](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/83c76fb0ac753703afaabb096f344ce0cbe7741e.png) and here's the result: ![Screenshot 2024-02-01 144353](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/023cb3b4331a3e43e4024557561b0b08d0abb48f.png) cue the _\*wah wah waaaah_\* trombones... nothing has been applied. what am i missing here? EDIT: these styles do not appear until you either sync or save. 😛 EDIT again: BUT! the CSS `:after` seems to put the content on a new line. which is 🐐 🤮 ![Screenshot 2024-02-01 145740](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/00cf526cae6d414ee55fdd2ec7891b47ba0f44a2.png) how do i fix THAT?? ---
**Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\ **Post date:** [February 1, 2024, 10:05pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/2 "2024-02-01T22:05:06Z")
Pryvit Ian, I am by no means a Perspective Guru, I'm more a Vision guy. That said, have you looked at: [https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes](https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes) > **[Perspective Tips and Tricks Course at Inductive University](https://www.inductiveuniversity.com/courses/elective-studies/perspective-tips-and-tricks)** > > This course is dedicated to showcasing tips and tricks that can take your Perspective projects to the next level. ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [February 1, 2024, 10:19pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/3 "2024-02-01T22:19:21Z")
вітання! 😃 yeah. i'm actually working on that on another side-project for my University challenge. so when i stumbled on this anomaly with the `:after` putting it's content on a new line... i had to stamp on the brakes and solve that problem because a lot of the theming uses several more 'advanced' CSS attributes. 😛 kinda letting my webDev background out to play... 🥳 ###### EDIT: of course that also means this group would have to PLAN something... ;) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [February 2, 2024, 12:03am UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/4 "2024-02-02T00:03:19Z")
Personally, I would just put the units in the Column header: `FLUID TEMP(°C)` That aside. Often, for "reasons", you have to mark your styles with `!important` to get them to work as intended. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 2, 2024, 12:54pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/5 "2024-02-02T12:54:04Z")
> [@ian.sebryk](#): > > how do i fix THAT?? Css help you won't really find a lot of here on the forum, apart from my self, most people dont seem to have much web background ^^ with all your styles i dont immediatly see which component you are using, label, or input? The easiest way to fix css is to use the googlechrome inspection tools 🙂 ---
**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\ **Post date:** [February 2, 2024, 2:23pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/6 "2024-02-02T14:23:02Z")
It has always struck me as wrong that in CSS if you want something to work you have to mark it as _not_ Important ... ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [February 2, 2024, 2:47pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/7 "2024-02-02T14:47:50Z")
i do NOT need help with CSS. **ever**. i need help with CSS _ **in Ignition** _. the `:after` modification _in the real world_ does NOT add a new line (in fact, you have to take some degree of pains to make it do so). so i need help understanding why it DOES in Ignition. this is a _very simple fix_ for an otherwise pain in the ass problem. i am not interested in placing text somewhere else. i want to know a solution to this problem. i am fully aware i could put it elsewhere. but that is not what i am tasked with doing. i don't deliver _kinda_ what the client wants. i deliver _exactly_ what the client wants. so knowing what the software can and can't do is critical. this is something the software _kinda_ does. which baffles me. why not just do it properly? completely? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [February 2, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/8 "2024-02-02T14:56:38Z")
> [@ian.sebryk](#): > > i do NOT need help with CSS. **ever**. i need help with CSS _ **in Ignition** _ There is no difference, the browser is still responsible for interpreting the style. > [@ian.sebryk](#): > > i don't deliver _kinda_ what the client wants. i deliver _exactly_ what the client wants Okay, great, but sometimes the client doesn't know what they're asking for. Oh well. As for your problem, perhaps the new line isn't being inserted by CSS, but is instead part of the value? If I knew what components you were needing it would be a whole lot easier to mock something up and see if I could help arrive at a solution. As it is, I can't, and I won't guess. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [February 2, 2024, 3:53pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/9 "2024-02-02T15:53:08Z")
> [@ian.sebryk](#): > > so i need help understanding why it DOES in Ignition. ![Screenshot 2024-02-02 at 7.52.20 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/8359772674c5679d5bf4fee0bb87131a8acd5c93.png) Examine the element in the browser. You'll notice that the Label component displays the internal text within a column-oriented flex display. As `::after` adds a new pseudo element _after_ the targeted element, you are in essence adding a new element into a column-oriented flex display, resulting in the new element being below. The Label does this because that was the best option we had for placing Label text in the vertical center of the component; without this setting, all Labels would always display their text along the very bottom - unless users applied complicated stylings to every Label themselves. ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [February 2, 2024, 4:00pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/10 "2024-02-02T16:00:21Z")
okay. now i understand. and i understand _why_ you did it that way. thank you. i'll just have to create a script workaround, which is sub-optimal, but certainly not overly complicated. thanks again. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [February 2, 2024, 4:07pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/11 "2024-02-02T16:07:32Z")
Instead of injecting the units, you could apply them as part of the binding. Then your styling would just be used for aesthetic changes. ![Screenshot 2024-02-02 at 8.06.05 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f93c6b38d7e224c07f51183b1b7fa0bf7f413d46.png) ![Screenshot 2024-02-02 at 8.06.35 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/1208c8bcf890448af50abbb8c1538a8604a781f3.png) ---
**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:** [February 2, 2024, 4:10pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/12 "2024-02-02T16:10:51Z")
You can also consider setting the EngUnit in the tag definition and use that in an expression. See here: > [@Unit simple letters](https://forum.inductiveautomation.com/t/unit-simple-letters/80047/4): > > If we were all organised we would add the engineering units into the tag definition. Then it can be picked up from there. [EngUnit] ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 5, 2024, 8:26am UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/13 "2024-02-05T08:26:32Z")
You can use `.psc-temp-celciusUnits span::after` to fix this flex issue:after, if its the label component you are using ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e897ba989cb197a32b5a69cd1558b203a21c29cc.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/872b03ab997deb096bb7b37d838b64d95c4d5333.png) You have to use the inspector to see what inner html components igntions usees, because its usually not just one html element that gets important and they all have a bunch of styling ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [February 6, 2024, 6:23pm UTC](https://forum.inductiveautomation.com/t/css-from-stylesheet-not-being-applied/85126/14 "2024-02-06T18:23:20Z")
> [@victordcq](#): > > You have to use the inspector yeah. i spent all day yesterday just deep-diving how the HTML is actually structured. 🫢 i am glad i did. i did not expect it to be so... layered. 😶 so, yeah. i came to a similar solution. but thanks for confirming it. i always get a bit nervous positing solutions since this forum is full of very talented and seasoned people.