Learning about Custom Style Sheets and Classes in Design Studio

After reading two great blogs How To: Create a manila folder like vertical tabs using CSS by Murali Balreddy and New in 1.1 : CSS classes by Jeroen van der A I started to look more at CSS with Design Studio.

First, I watched this tutorial by the SAP In-House Product Education team:

I thought I would try some different things myself, given I completed a CSS class by CodaGogy last month.

I decided not to use the RGB codes provided in the tutorial; instead I copied something simple from class:

Setting the background to color indigo is something we learned in class.  The above screen shot is from one of my class exercises using Notepad++

Then I opened Design Studio, and looked at changing the CSS style on the panel container component.

I use the code below background: indigo; instead of the RGB codes shown in the tutorial.

Next, see how the background color changed to indigo in the application:

Following the tutorial, I decided to create my own custom CSS using Notepad so it could be reused in multiple components.

I place this custom.css in the Properties of the application:

I place the "myPanel" CSS class on two text components - see changes below:

Notice how the two text boxes are now indigo.