Strategy Web can be considered as most websites, composed of the following:

• HTML, giving each page structure.
• CSS, defining the look & feel of each HTML component.
• Javascript, enriching the page with dynamic functionality.

This tutorial focuses on the CSS aspect of Strategy Web, and how it can be leveraged to customize the look and feel of almost any component of Strategy Web. The HTML & Javascript driving Strategy Web can also be manipulated and/or interacted with to a certain extent, although those aspects of the Web SDK are outside the scope of this tutorial.

Recommended reading

Developer Tools

This is often included with many modern browsers, and greatly simplfiies the processes of both inspecting parts of the page & testing custom CSS temporarily. In this tutorial we will be using Google Chrome's developer tools feature, primairly on the "Elements" tab to inspect HTML and styles affecting that selected HTML:
https://developer.chrome.com/docs/devtools/css/
https://developer.chrome.com/docs/devtools/css/reference/
https://developer.chrome.com/docs/devtools/css/animations/
https://developer.chrome.com/docs/devtools/css/grid/

CSS Syntax and Selectors

More information on this can be found online, for example:
https://www.w3schools.com/css/css_syntax.asp

Strategy Web Customization Editor

• Web Customization Editor: https://www2.microstrategy.com/producthelp/Current/WebSDK/Content/topics/webcusteditor/WCE_Getting_Started.htm
• CSS & Strategy Web:  https://www2.microstrategy.com/producthelp/Current/WebSDK/Content/topics/webcusteditor/WCE_Getting_Started.htm

Finding CSS selectors in Strategy Web

HTML often contains a "class" property or an "ID" property, but not always both.
As a Strategy-specific example, this is one of the menu items in the project landing page:

We can see the HTML driving this element has a "parent" element of the "span" tag with the ID property set to "mstrRecentObjects" and the class property has the values "mstrMenuItemRecents mstrMenuItem".

• Hovering over individual elements with the mouse highlights the page-content each element represents.
• Hovering over the span element highlighted the "Recents" menu item in blue. 
• If we hover over the parent div with class "mstrMenuContent", all the menu items are highlighted.
  
• That indicates that the span tag with id set to "mstrRecentObjects" is the highest parent responsible for the "Recents" menu item.
• Any parent of that span is a container for all shown elements or more.
• If we want to affect only the "Recents" menu item, we need to focus on this span element or any "child" html within the span tag.

From the findings above we can see three immediate ways to target this element using a CSS selector:

• #mstrRecentObjects
  
• This selector targets an element that has the id property set to "mstrRecentObjects".
• ID values are usually unique - this should affect only this element on the page.
• .mstrMenuItemRecents
  
• This selector targets any element that has the class value "mstrMenuItemRecents".
• If other HTML tags also contain the class value "mstrMenuItemRecents", they will also get targeted by this selector.
• The value "mstrMenuItemRecents" is very specific and likely only affects the element related to this "Recents" item.
• .mstrMenuItem
  
• This selector targets any element that has the class value "mstrMenuItem".
• As above, any other matching HTML tags will also get targeted by this selector.
• The value "mstrMenuItem" is quite generic, it's likely targeting this will affect any other "menu items" on the page.

Related Topics

https://community.Strategy.com/s/article/How-to-Modify-a-Specific-Selector-in-Chrome-Developer-Tools-to-Change-the-Look-and-Feel-of-Strategy-using-the-Web-SDK
https://community.Strategy.com/s/article/Implementing-a-Plugin-to-Change-the-Look-and-Feel-of-Strategy-Web-using-Web-SDK