[00:00] With Ignition Perspective, you have the freedom to mix and match styling tools as needed to achieve your desired goals. Your styling approach probably depends on your objectives, but there's no one right way to do it. It's whatever works best for you. Are you looking to create style consistency for branding or efficiency's sake? Do you prefer having one centralized location for your cross-project style customizations? If you already know CSS, the Advanced Stylesheet gives you a great resource to work with for those kinds of changes. It's easy to find the selectors you need for more universal styling changes using the developer tools, or you can peruse the theme files for extra CSS inspiration and adapt that CSS in your stylesheet. Do you need to make smaller style changes to individual components? Are you looking for little ways to increase the speed of development? In those cases, you may want to either use user-created style classes or domId targeting within your stylesheet. You may also want to mix in some of the built-in styling tools Perspective offers. Since many of our changes will still be centered on the Advanced Stylesheet, here's a convenient flow chart identifying the order in which identical rules would be applied across different resources within a project.

[01:16] We won't be addressing themes directly in this video as those are part of another series of lessons in Inductive University, but we will look at a real-world example of how you can blend other styling techniques together harmoniously in Perspective, and use the style flow to your advantage. Now let's take a look at our view in Perspective. I have a series of pumps, cylindrical tanks, and valves that are part of my design for a winery. First, I'll go to styles in the Project Browser and activate our Advanced Stylesheet. Then I'll pop in a few of the styles that we used in the last couple of lessons. We started by setting color variables at the top that we used throughout the CSS in the Advanced Stylesheet. Then, we added a standard blue background color across the entire project. Next, we changed the look of the cylindrical tank liquid, outline, and value display, because this winery's production focuses mostly on white wines.

[02:06] Last, we added a user-created style class that was designed to be applied to just a few cylindrical tanks' liquids, since there are only a few blush wines produced by this winery. We'll need to close and reopen our view to preview the changes. Let's add in that blush wine user-created style class to the second tank by going to the Perspective Property Editor and entering the blush wine class name without the reserved .psc- prefix under styles. We'll hit enter and save our work. This reflects most of the same basic styles we put together in the last lesson, where we had both project-wide and individual, more localized style changes represented. Another option for styling a single item in a more localized manner besides the .psc- user-created style class method is to assign a unique document object model ID or domId to it first, and then use that custom CSS selector in the Advanced Stylesheet.

[03:02] I'm going to select my third tank and go to my Perspective Property Editor to attach a domId to it. I'll scroll down to find the Meta section in the Property Editor and click on Add Meta Property. Then I'll select properties, domId, and it should appear under the Meta properties section. Let's give it a unique name and hit enter. Before, we altered the cylindrical tank's liquid color with a cross-project custom default fill color of gold using one of the built-in Perspective classes within our Advanced Stylesheet. Now let's use our new domId to change that custom default color, just for this tank, to a red that better matches the red wine product within it. We'll use the red wine domId first, combined with a built-in Perspective class for the tank liquid, like this. It's important to remember that a domId is best used when you want to make small changes to a single component, or part of a component, since that domId name should be unique within the project. Up to this point, we've mainly used our Advanced Stylesheet and the power of CSS to bend this project to our will.

[04:04] Since this winery only has one main red wine they produce, it may be just as efficient to forego the stylesheet for a few styles related to red wine displays in my project, provided that the other style tools built into Perspective allow me to change those specific properties. Let's mix and match styling techniques by setting up a red wine font effect style class within the built-in style tools in the Project Browser and Perspective Property Editor. We want to make sure that the value display still shows clearly in the view even when submerged in red wine. We'll go to the Project Browser, right click on Styles, and select New Style from the menu. In the New Style Class popup, we'll name this new style class Red Wine Font Effect and click Create Style Class. We'll add a different font color and a touch of text shadow, so it can stand out the way we want it to. Now let's apply that new style to the value display for this red wine tank, via the dropdown in the Perspective Property Editor.

[05:06] I'll select the third tank within the view, find value Display, then style. I'll click the dropdown icon next to style, click the dropdown icon next to classes, and select the checkbox for our newly-named style class, Red Wine Font Effect. This is where the new style class created with the Built-in styling tools lives in the project style flow, so it enables us to make that small, individualized change. Next, let's say the color scheme I chose for blush wines works for most of the few that this winery makes, but I want to be closer to the actual color of the blush wine that's in this second tank. I can set inline CSS properties for one component or part of a component using the built-in style tools inside the Perspective Property Editor. In some cases, it can be faster and easier to make a single small change using these built-in tools, rather than using the Advanced Stylesheet. I'll select the single tank where I want to change the liquid color. Then, if I go to my Property Editor under props and find the liquid color property, I can click on this box and a color selector will appear.

[06:09] I think this pink color is closer to the blush wine that's in this one tank, so I'll change the liquid color value to that instead. That change instantly replaces the blush wine user- created class from my stylesheet, because we're using an inline property. I'll go ahead and remove that old style from this tank, since we've got our new style in place. With all the styling options available in Perspective, your designs can leverage the power of pure CSS as well as the built-in style tools. A judicious blend of the Advanced Stylesheet and localized styling techniques can help you increase efficiency in your design process and achieve the level of customization that's perfect for your projects.