[00:00] Branding through cohesive, consistent style patterns can help you take your Perspective projects to the next level. Advanced Stylesheets can help you create those project-wide and component-level styles all in one convenient place. Here, I have several components in a new view. I'd like to develop a custom branding color palette and use it across my entire project. While themes and the built-in style tools are great, I'd rather use the most efficient resources possible to achieve that end. With solid prior knowledge of CSS, I can use the Advanced Stylesheet and a selection of custom colors to create an overall look that will be applied globally throughout my entire project. We'll begin this short but colorful journey by setting up our Advanced Stylesheet. Then we'll create some reusable custom properties as color variables. Next, we'll talk about the language of color in CSS and several common examples of color syntax. We'll also review the reserved prefixes in Ignition style declarations and wrap up by generating our own user-created style class.

[01:04] First, to enable the Advanced Stylesheet, let's go into the Project Browser and right click on the styles folder. Select Enable Advanced Stylesheet from the menu. The stylesheet.CSS resource will appear under styles in the Project Browser and it will act like any regular CSS file. To keep us organized as we go, I'll place a few comments in our stylesheet. One of the easiest ways to build efficiency into a custom color strategy within the Advanced Stylesheet is to use named color variables we create ourselves. Custom property syntax in CSS uses a double-dash format like this to create a variable name for a given color. Here I've set these variables to the hexadecimal values for the main colors I've picked so far - a slate blue-gray, a bright orange, and a neon green. We'll access those custom color properties anywhere we want in our CSS later using this pattern, by putting our color variable within the parentheses of a CSS function. So why do this? Color variables make it possible to set the value of each variable to a certain color and then reuse that variable throughout the CSS file.

[02:06] That way, if we change our minds about that color later, we only have to change the color on the variable declaration at the top to see the change throughout the project. Otherwise, we'd have to go digging through our entire CSS file and change each individual instance of a color to fix it. Now let's create some default color settings for all of our new Perspective views in our Advanced Stylesheet. We're not just limited to the color variables we set, since there are lots of different ways to represent colors in CSS. We'll look at some examples of the most common syntaxes -- predefined color names, hexadecimal values, RGB values and HSL values. There are more than a hundred predefined color names built into CSS that are supported by all major browsers. Let's say I want the overall background color for my project to be cadetblue. I want to apply that named color to my root container, so I'll first need to find the right selector for my stylesheet. I'll go to the Project Browser, click on Views, and right-click on the name of my view. I'll select Launch URL and the view will open in the browser.

[03:05] I can then open up the dev tools and use the inspector to find the correct class I need for that root container. So now we know what our target selector is-- dot ia underscore container dash dash root. Just a quick reminder -- the prefix ia underscore is reserved for the base, predefined styling that's built into Perspective. I've added in my background color of cadetblue, so let's save and take a look at the results in the view. Let's say I change my mind about that color though, and I want to use something different. We can look at hexadecimal values as another option for color syntax, using the hash RR GG BB format. These use hexadecimal integer representations of red, green, and blue that blend to create a given color like hash five B seven A 62, a nice, darker bluish green. Let's add that background color in instead. Once we save, it will override our original color choice. But I'm going to be picky. That isn't quite the color I wanted either.

[04:03] Let's try a different color and use RGB syntax this time with this format. These are integer values between zero and 255, and the higher the number, the more of that color that's added into the mix to get to the final result. You can also add a fourth number and use RGBA format if you'd prefer to specify the opacity of the final color like this. That final value, alpha, would be a number between 0.0 for fully transparent and 1.0 for fully opaque. Let's try that in our stylesheet with RGBA format to override all the previous styles. Maybe not. A little too bright for this purpose, so let's try again, this time with an HSL or HSLA value for a different color option. HSL stands for hue, saturation, and lightness. Hue is a degree value from zero to 360 on the color wheel. Saturation is represented as a percentage from zero to one hundred percent. zero percent is gray, and a hundred percent gives the full color experience. A percentage from zero to one hundred percent also defines lightness, where zero percent is black and a hundred percent is white.

[05:09] You can also tack an alpha value on the end if you want to specify opacity in much the same way we did for RGBA. You would just use something like this to represent it in your CSS. I'll add that to my stylesheet, save it, and check out my changes in the view. As it turns out, I just really like that first blue color, so I'm going to override all the rest of my experimentation by adding that bluish gray color variable in as my final background color for all of my Perspective views in the project. The last one wins in the cascade. One extra step is needed, though. We'll either need to close the view and reopen it to load the color variable changes in your designer, or you can open the view in the browser to see the final background color. We can use the dev tools to inspect a label element so we can restyle it with custom colors, too. The class I'm looking for in the DOM is dot ia underscore labelComponent.

[06:06] I already have a few styles in mind for my labels, so I'll go back to our stylesheet, paste those in under our label class, and on save it will apply that set of styles for all labels across all of our Perspective views. You can also use pseudo-classes along with the built-in style classes. So just for fun, let's add a hover effect to our labels and save. A pseudo-class is a key word attached to a CSS selector used to define a special state of a given element. The format of the pseudo-class usually consists of a colon and then the name of the pseudo-class, like the user-action pseudo-class colon hover that we used in this example. With this CSS in place, when we hover over that element, it changes the style. We'll see other examples of pseudo-classes in action in future videos. Our project wide styles are starting to come together, but I'd like to do a little bit more individual component styling also, so that gauge will show up better on screen.

[07:06] I always have the option of using the built-in style tools if I want, but I'm going to stick with my Advanced Stylesheet and the freedom it brings to deploy my custom colors in user- created style classes. Again, I can use all kinds of color syntax-- predefined color names, RGB, HSL, hex codes, or my color variables. I'm going to call this dot psc dash myNewColorStyle and paste in my green color variable so we can see that gauge a little better once we finish. As a quick review, if you're trying to target a user-created style class, you'll need to add the reserved prefix dot PSC dash to the name of your user-created style declaration in the stylesheet. We'll need to save our work and go back to our view. Next, we'll need to tell Perspective where to apply that new style. This new class won't show up in the dropdown like style classes created with the built-in styling tools. So we'll select the gauge component in the view, head over to the Perspective Property Editor and add that user-created style class under style in the Props section.

[08:05] Custom colors in the Advanced Stylesheet can help you with overall branding and consistency, but they also unlock the power to override other default styles in Ignition. Next time we'll build on what we've learned in this lesson and use custom colors in concert with the dev tools to help you change the look of more complex components across entire Ignition projects.