[00:00] In this lesson, we'll talk about styles in Perspective. Styles are the main way in the Perspective module to change the look and formatting of your components. To begin with, I'll go into my Perspective component palette and I'll go ahead and drag a label component into my view here. And I'll go ahead and resize that component a bit. Now you may have noticed when working with components in Perspective, that pretty much every component has a style property here under the props section in the property editor. You may also notice that apart from this section particularly on components like the label component here look and feel properties are pretty sparse, that is to say, unlike in the Vision module, you aren't finding too many text color or font size properties exposed directly in the property editor. Most of those settings are handled by this style property here. This property allows you to configure what's called an inline style, which basically means you're applying formatting and style settings directly on the component.

[01:05] We can contrast this with style classes, which we'll talk about in later videos, basically they're a way of configuring styles as project resources rather than on specific components. But here, to configure an inline style, I'll go ahead and find that style property on my label and I'll click the little paint swatch icon on the right-hand side, and that will open up our style menu. Now I won't go through all the options here, there's quite a bit we can do from this menu, but maybe I'll expand the text header here and I could change the font, so maybe I could make it Helvetica, I could type in a font size, so maybe 30 point font, I could change the color of the text, so maybe I'll go into the palette here and make it a green, and I could find the weight property and make my text bold. So all of the properties under this text heading here give us ways of configuring how the text on our component should look. It's worth noting that these properties are available on more than just labels. Styles can be thought of as a unified way of modifying the look and feel of components meaning that every component that you go into the style menu for will have these same properties available.

[02:12] So maybe one final property I'll set here is the text align property. I'll set that to center which will center the text inside of my label, and then I'll go ahead and collapse that text heading. Now you may have noticed that all of the options I have selected are available in the left-hand side here in this panel. And if I wanted to clear any out let's say I don't like the color any more, I can click the x on the right-hand side to remove that property and set it back to the default. So there are quite a few other properties in here and like I said, I won't get into all of them, but background, for example, would allow me to change the background color of my label or set an image up. Margin and padding would allow me to introduce an offset into one or more of the edges of my component so if I wanted to shift my content five pixels down or to the left, I could do something like that. Border will allow me to configure some nice edge stylings for my component.

[03:08] Shape properties come into play when we're working with graphics like SVGs. And then there are some miscellaneous properties at the bottom, like making my component partially transparent or changing the cursor when you hover over it, that kind of stuff. If you have a web development background you may have noticed when looking at these properties here that we've effectively taken many properties of CSS and added them directly into the Perspective module. As such, the style menu effectively allows you to configure CSS features on your component. So, once I'm done picking out properties, I can go ahead and click OK on the bottom, and now you'll find that those properties we've changed are exposed in the property editor here. So, if you wanted to make the properties dynamic, the best approach is to configure an inline style on that property and then you can buy into it using the icons here. So, that's should be enough to get you started with styles. As you can see, they're very easy to configure and get set up.