CSS Variables: The Secret Sauce of APEX Styling

APEX World 2025

Philipp Hartenfeller

21-MAR-2025 | Ede

$whoami

Philipp Hartenfeller

• Düsseldorf, Germany
• Oracle APEX Dev since 2016
• Product Lead at United Codes
• Web Dev and Databases

Blog: hartenfeller.dev/blog

Bluesky: @hartenfeller.dev

Agenda

(Shift + A: jump to Agenda, Shift + O: overview)

• CSS Basics Recap
• What are CSS Vars?
• CSS Vars in APEX
• Customizing Universal Theme
• Custom Components
• Quick CSS Tips
• Q&A

CSS Basics Recap

Selectors

• Select HTML DOM (tree) nodes
• body .card-title → all elements with class "card-title" that have a parent of element "body"
• No prefix: HTML element
• . → class
• # → ID

CSS Rules

Inheritance

Result:

Which color?

Specificity (1)

Result:

Which color?

Specificity (2)

Result:

Which color?

Specificity (3)

Result:

Which color?

What are CSS Vars?

CSS Custom Properties

• They are actually called custom properties
• Widely supported since April 2017
• Define and reuse values (all kinds of: left, #ff3489, 3px 6px rgb(20 32 54))
• Was possible before with SASS or LESS

How to use?

Demo

CSS Vars in action

CSS Vars in APEX

Universal Theme - powered by CSS Vars

• Since APEX 21.2 (grew over time)
• You mostly see variables getting applied, no direct values
• Good way to hook in and change styles
• Safer than overwriting values directly
• Versatile thanks to cascading nature

CSS Vars in Action

We can modify these

• Specifically target selector or global
• Just change variables values
• Better than overwriting rules (e.g.: color: red;)

What about Theme Roller?

• Still the best way to change things
• But also limited

Customizing Universal Theme

Demo

Customizing Buttons

Added to APEX CSS

Added to APEX CSS (hot button)

Custom Components

Make things look like UT

• APEX also documents some variables for us to reuse
• apex.oracle.com/pls/apex/r/apex_pm/ut/css-variables
• Custom templates, template components, dynamic content regions (copied or AI gen HTML & CSS)

Demo

⚽️ scores

Quick CSS Tips

CSS Nesting

Apply rule to same parent

Easier to read

& → nesting selector

More info

Container queries

• Issue: responsiveness on device width
• Not based on how wide the actual component is displayed
• More info

Flex and grid

• Complex layouts super easy
• More about Flex and Grid
• Image source

United Codes

Thank you!

Contact: phartenfeller at united-codes.com

Slides at: hartenfeller.dev

Evaluate this talk