Styling DWC Applications with CSS

Overview

The Dynamic Web Client (DWC) supports CSS for customizing the appearance and layout of browser-based BBj applications. This page introduces CSS rules and selectors, selector combinations, pseudo-classes, and Shadow DOM parts used with DWC components. It also demonstrates how BBj programs can apply CSS classes to controls and inject CSS into a DWC application.

CSS Rules and Selectors

A CSS rule consists of a selector followed by a declaration block. The selector identifies the elements to style, while each declaration assigns a value to a CSS property.

Type Selector

A type selector targets elements with a particular HTML element name. The following rule targets all p elements:

p {
    property: value;
}

Class Selector

A class selector, prefixed with ., targets every element assigned that class:

.myClass {
    property: value;
}

ID Selector

An ID selector, prefixed with #, targets the element having that unique ID:

#myId {
    property: value;
}

To target a specific BBj control with an ID selector, assign its HTML id attribute using BBjControl::setAttribute as follows:

setAttribute("id","yourIdHere")

Selectors can be used individually or combined to target elements more precisely.

Combining Selectors

CSS selectors can be combined to target multiple groups or identify elements through more specific relationships.

element-one, .class-two { ... }

A comma creates a selector list. The rule applies to every element-one element and every element assigned the class-two class.

element-one.class-two.class-three { ... }

Chaining selectors without spaces targets element-one elements assigned both the class-two and class-three classes.

element-one .class-two { ... }

A space creates a descendant selector. It targets elements assigned the class-two class that occur within an element-one element.

element-one > element-two { ... }

The > child combinator targets element-two elements that are immediate children of an element-one element.

Pseudo-Classes

Pseudo-classes are CSS selectors that match elements based on their state or other characteristics. Common pseudo-classes include:

:hover matches an element while the mouse pointer is over it.
:focus matches an element that has focus.
:not() excludes elements that match the selector specified within its parentheses.

Browser developer tools can toggle pseudo-class states for inspection.

Note: For a complete list of pseudo-classes, see: CSS Pseudo-Classes.

Shadow DOM

The Document Object Model (DOM) represents the structure of the elements on a page. JavaScript and CSS use the DOM to apply functionality and styles.

Shadow DOM allows an element to have its own encapsulated DOM, helping prevent interference from the page’s CSS and JavaScript and improving reusability.

DWC components are implemented as custom web components that use Shadow DOM. CSS can access exposed parts of a component’s Shadow DOM using the ::part() selector.

Use browser developer tools to inspect the structure of DWC components.

Note: For more information about Shadow DOM and encapsulation, see: Shadow DOM.

Aplying CSS Classes in BBj

Use addClass("CSSClassNameWithoutDot") to apply a CSS class to a BBj control. Specify the class name without the leading period. To apply multiple classes, call addClass() once for each class. For complete method information, see BBjControl::addClass.

Injecting CSS into a DWC Application

CSS can be injected into a DWC application as a string containing a single CSS rule or the contents of a stylesheet. For information about injecting CSS into the web page, targeting the page’s top-level window, and adding attributes to the generated style element. See: BBjWebManager::injectStyle.