[00:00] In this lesson, we'll talk about style classes. Style classes are similar to the inline styles that we've seen in other videos but style classes live in their own resource up in the project browser. Style classes allow you to configure a style and then apply it to many different components. Very similar to how a template works, just like a template, any changes you make to the style class will then propagate down to all of the components that's using it. To get started, we'll make a style class by right clicking on the styles folder here and selecting new style. We can then give our style class a name. I'm going to use the name background because I'm simply going to change the background color for my style. We are then presented with a popup that contains all the same styling options that we've seen before. I wanted to change the background color of my style so I'm simply going to go to background and choose a new color, maybe some light blue or something like that and then hit OK down below. We've now created our style, you can see it here called background but we're not actually using it at this point. Let's grab a component so that we can use our new style class. I'm just going to grab a simple label component here and add it to my screen then with the label selected, we're going to take a look at the property editor. Instead of clicking on the modify style button like we do with inline styles, I'm actually going to go to the classes property and select the browse styles button. We are given a list of all of the style classes that we have in this project. You can see I have the background style there so I can go ahead and select that one and it's going to apply that style class to my label. Just like with templates, if I wanted to make a change to the style class, I simply need to go back to the style class background in the project browser, double click on it to open it up and make some more changes. Maybe this time I will add a border and I'll give the border a specific width and color. Once I hit Ok, that new addition to my style will be added to the style class and since the style class is being used on this label, the label will automatically get that new edition. Now what's great about these style classes is that you don't have to put all stylistic elements in a single style class. You can actually mix and match the style classes on a single component. I'm going to go add another style class and this one I am going to configure the text. So I'll call it text and create that. I'm going to go into the text section and maybe choose a new font, maybe a mono-space font and a specific size, let's say 20 point font. We'll hit OK and now that we have that new style, I can select my label and go apply that style class to this label as well. You'll notice the list of classes here is simply a list of check boxes and I can select that text style class and you can see that my labels text has now changed. So as you can see, these style classes are a great way to categorize this style of your elements across the entire project in one convenient location. Lastly, I want to mention that you can still apply an inline style to a component that is using a style class. Your style class may be very general as they're used for many components throughout the project but maybe on a particular component, you want to apply some extra styling without having to do it to the style class and add it to every component. You can simply apply the inline style just like you normally would. Selecting new component and going and selecting the modify styles button. Here we can add a style attribute maybe I will set the text alignment to be in the center and you can see now that my text is centered in the label. So again, style classes act as sort of style templates that we can add to many components throughout our project.