[00:00] Hello, my name is Michael Perkins. I'm a senior software engineer here at Inductive Automation. I'm here to give you a short introduction to CSS and theming. CSS and theming allows you to customize look and feel of perspective components in ways that are simply not possible using style props. Let's take a look at my project. Here, I have a flex container containing many instances of the motor symbol. What if I wanted to change a motor's fill to red? Well, that could be easily accomplished using style props. But what if I wanted a motor's foot to be red? Let's use CSS theming. Go in the browser and inspect element on one of these motors' feet. Here we see a path element corresponding in the motors feet but this path element doesn't contain any classes that we could use as CSS selectors.

[01:04] So let's go one level higher. Its parent, a graphics element, contains a class of motor underscore motor feet. Within the browser, let's apply a style of fill red to see what it would look like. That looks like what I want. So let's create some custom CSS for it. Within the theming folder, let's create a new file. We'll call it custom dot CSS. We'll open this custom dot CSS in a text editor. In CSS classes begin with a dot, so let's do dot motor underscore motor underscore feet. Let's add some curly braces and add our rule.

[02:04] Fill red. In light dot CSS, let's import our custom dot CSS. Let's give perspective a moment to compile the themes. Now let's refresh the page. Now, every motor has its feet red, but what if we wanted some subset of motors to have its feet red? Well, let's go to the designer. Let's create a new style class. We're gonna call it feet dash red. In this style class, I'm not gonna apply any other styles because I don't want to style the rest of the motor. I will select some subset of motors, give it the style class of feet red, save my project and let's go into the browser really quick.

[03:19] So inspect element on one of these motor components. At the top level of the motor component, we now see a class of PSC dash feet dash red, which was that style class that we applied. Let's go to our custom dot CSS and let's create a compound selector. So dot T S C dash feet red, and then we're gonna do a space. Let's save it. Now let's refresh the page.

[04:07] Here, we see the subset of motors has their feet red, but what if we wanted a single motor to have its feet color changed? Well, we could use style classes or we can use a domID. Let's go to the designer, let's select a motor. Let's go to meta dot domID. Let's make this one feet dash green. Let's save this. Let's go back to our custom dot CSS file and custom dot CSS will create a new rule. In CSS, ID selectors always start with the pound sign. So pound, feet, green, space, dot motor underscore motor underscore feet.

[05:12] Let's give it some curly braces. Let's give it fill green and let's save that. Let's reload the browser. Now the feet are green, but what if we wanted to apply more than one property, like say a stroke of purple. Well within custom dot CSS, within those curly braces, we can do stroke purple. Let's refresh the browser and now it has a stroke of purple.

[06:11] But what if we had applied both feet red and feet green? So let's go back to the designer and give it a style class of feet red. Let's save this. Let's refresh the page. Why is it that its feet are still green? Well, let's inspect element. Let's go to that G class of motor underscore motor underscore feet and here we see fill red strike through. While this is due to CSS specificity, you'll encounter this frequently when modifying the themes for prospective components.

[07:10] So IDs have a higher specificity than class selectors. I'll let you research that on your own. So this was a quick introduction to CSS and theming. Hope you enjoyed it.