When you're building applications in Oracle APEX, understanding the available CSS classes can dramatically speed up your development and ensure your applications look polished and professional. I've spent countless hours exploring APEX's styling capabilities, and I'm excited to share this comprehensive guide to help you make the most of the built-in CSS classes available in APEX version 24 and above.
What Are Oracle APEX CSS Classes?
Before we dive into the specific classes, let me explain what these CSS classes actually do for you. APEX comes with a rich set of pre-defined CSS classes that handle everything from spacing and colors to responsive behavior and accessibility. Instead of writing custom CSS for common styling needs, you can simply apply these classes to your components.
The beauty of using APEX's built-in classes is consistency. Your application will automatically align with APEX's design system, and when you upgrade to newer versions, your styling often improves automatically as Oracle enhances the framework.
You can define them for any object property by navigating to Appearance > CSS Classes.
Understanding Universal Theme Classes
APEX 24 builds upon the Universal Theme framework, which has been the foundation since APEX 5.0. All the classes I'll share with you work seamlessly with this theme, ensuring your applications look modern and professional across all devices.
Layout and Container CSS Classes
These classes help you structure your page content and control how elements are arranged. I use these constantly when building application layouts.
u-container: Creates a centered container with maximum width constraints, perfect for maintaining readable content width on large screens.
u-fullwidth: Forces an element to take up the full width of its parent container, useful when you need edge-to-edge layouts.
t-Region: The main class for styling regions, providing consistent padding and borders.
t-Region--noPadding: Removes default padding from a region, giving you complete control over internal spacing.
t-Region--removeHeader: Hides the region header while maintaining the region structure.
t-Region--scrollBody: Makes the region body scrollable, ideal for regions with variable content heights.
t-Region--noBorder: Removes the border from a region for a cleaner look.
t-Region--hideShow: Enables collapsible region functionality with a toggle icon.
t-Region--stacked: Stacks regions vertically with proper spacing between them.
Example:
Spacing and Margin CSS Classes
Managing white space is crucial for creating visually appealing applications. APEX provides a comprehensive spacing system.
u-mt-{size}: Adds margin to the top of an element. Sizes include none, xs, sm, md, lg, xl.
u-mr-{size}: Adds margin to the right side.
u-mb-{size}: Adds margin to the bottom.
u-ml-{size}: Adds margin to the left side.
u-pt-{size}: Adds padding to the top.
u-pr-{size}: Adds padding to the right.
u-pb-{size}: Adds padding to the bottom.
u-pl-{size}: Adds padding to the left.
u-padding: Adds default padding on all sides.
u-margin: Adds a default margin on all sides.
u-padding-none: Removes all padding from an element.
u-margin-none: Removes all margin from an element.
Text and Typography Classes
These classes give you precise control over how text appears in your application.
u-textStart: Aligns text to the start (left in LTR languages, right in RTL).
u-textEnd: Aligns text to the end (right in LTR languages, left in RTL).
u-textCenter: Centers text horizontally.
u-bold: Makes text bold.
u-normal: Sets text to normal weight.
u-italic: Italicizes text.
u-uppercase: Transforms text to uppercase.
u-lowercase: Transforms text to lowercase.
u-capitalize: Capitalizes the first letter of each word.
t-Heading: Applies heading styles to text elements.
t-Heading--xl: Extra large heading size.
t-Heading--lg: Large heading size.
t-Heading--md: Medium heading size.
t-Heading--sm: Small heading size.
t-Heading--xs: Extra small heading size.
Color and Background Classes
APEX provides semantic color classes that adapt to your theme settings, ensuring consistency across your application.
u-color-1 through u-color-45: Apply theme-specific colors to text. Each number corresponds to a color in your Universal Theme color palette.
u-hot: Applies a highlight color, typically red or orange, for important items.
u-warning: Applies warning color styling.
u-success: Applies success color styling, usually green.
u-danger: Applies danger or error color styling, typically red.
u-info: Applies informational color styling, usually blue.
t-BadgeList-value--success: Styles badge values with success colors.
t-BadgeList-value--warning: Styles badge values with warning colors.
t-BadgeList-value--danger: Styles badge values with danger colors.
t-BadgeList-value--info: Styles badge values with info colors.
Display and Visibility Classes
Control when and how elements appear on your page with these helpful classes.
u-hidden: Completely hides an element from view and removes it from the document flow.
u-visible: Makes an element visible (counteracts hidden).
u-hiddenSmall: Hides elements on small screens only.
u-visibleSmall: Shows elements only on small screens.
u-hiddenMedium: Hides elements on medium screens.
u-visibleMedium: Shows elements only on medium screens.
u-hiddenLarge: Hides elements on large screens.
u-visibleLarge: Shows elements only on large screens.
u-screenReaderOnly: Hides content visually but keeps it accessible to screen readers.
Button CSS Classes
Buttons are fundamental to any application, and APEX offers extensive button styling options.
t-Button: The base button class.
t-Button--hot: Creates a prominent call-to-action button, typically in your primary color.
t-Button--primary: Styles a button as primary action.
t-Button--secondary: Styles a button as secondary action.
t-Button--warning: Creates a warning-styled button.
t-Button--danger: Creates a danger or delete button, typically red.
t-Button--success: Creates a success-styled button, usually green.
t-Button--simple: Creates a minimal, text-only button style.
t-Button--icon: Optimizes button for icon-only display.
t-Button--iconLeft: Positions icon to the left of button text.
t-Button--iconRight: Positions icon to the right of button text.
t-Button--large: Increases button size.
t-Button--small: Decreases button size.
t-Button--pill: Creates rounded, pill-shaped buttons.
t-Button--noUI: Removes all button styling, making it look like plain text.
t-Button--stretch: Makes the button expand to the full width of the container.
Form and Input Classes
These classes help you create beautiful, consistent forms throughout your application.
t-Form-fieldContainer: Wrapper for form fields with proper spacing.
t-Form-labelContainer: Container for form labels.
t-Form-inputContainer: Container for form inputs.
t-Form-error: Styles error messages for form fields.
t-Form-helpText: Styles help text beneath form fields.
apex-item-display-only: Styles read-only form items.
apex-item-required: Indicates a required field with visual markers.
apex-item-option: Styles individual options in radio groups or checkboxes.
apex-item-group: Groups related form items together.
Grid and Flexbox Classes
Modern layouts require flexible grid systems, and APEX delivers with these classes.
t-Form--stretchInputs: Makes all inputs in a form stretch to full width.
t-Form--slimPadding: Reduces padding in forms for compact layouts.
t-Form--labelsAbove: Places all labels above their inputs.
t-Form--leftLabels: Places labels to the left of inputs.
col: Creates a flexible column in a grid layout.
col-1 through col-12: Creates fixed-width columns (12-column grid system).
u-flex: Applies flexbox display to an element.
u-flexGrow-1: Allows an element to grow within a flex container.
u-flexShrink-1: Allows an element to shrink within a flex container.
u-justifyContentStart: Aligns flex items to the start.
u-justifyContentEnd: Aligns flex items to the end.
u-justifyContentCenter: Centers flex items horizontally.
u-justifyContentBetween: Distributes flex items with space between them.
u-alignItemsStart: Aligns flex items to the start vertically.
u-alignItemsCenter: Centers flex items vertically.
u-alignItemsEnd: Aligns flex items to the end vertically.
Card and Media Classes
Cards are popular UI components for displaying grouped content, and APEX provides comprehensive card styling.
t-Card: Base class for card components.
t-Card--featured: Creates a prominent featured card.
t-Card--compact: Creates a smaller, more compact card.
t-Card--noShadow: Removes shadow from cards.
t-Card--outline: Uses outline instead of shadow for card borders.
t-Cards: Container for multiple cards.
t-Cards--grid: Displays cards in a grid layout.
t-Cards--float: Allows cards to float and wrap naturally.
t-MediaList: Creates a list with media objects (image + content).
t-MediaList--horizontal: Arranges media list items horizontally.
t-MediaList-item: Individual item in a media list.
t-MediaList-itemWrap: Wrapper for media list item content.
Badge and Label Classes
Badges are perfect for highlighting counts, statuses, or categories within your application.
t-Badge: Base badge class for small labels.
t-Badge--dot: Creates a small dot badge, perfect for notifications.
t-Badge--square: Creates a square-shaped badge.
t-Badge--circle: Creates a circular badge.
t-Badge--large: Increases badge size.
t-Badge--small: Decreases badge size.
t-Badge--success: Styles badge with success colors.
t-Badge--warning: Styles badge with warning colors.
t-Badge--danger: Styles badge with danger colors.
t-Badge--info: Styles badge with info colors.
t-BadgeList: Container for badge lists.
t-BadgeList-item: Individual item in a badge list.
t-BadgeList-label: Label portion of a badge list item.
t-BadgeList-value: Value portion of a badge list item.
Alert and Message Classes
Communicating with users through messages is essential, and these classes make it easy.
t-Alert: Base class for alert messages.
t-Alert--success: Success alert styling with icon.
t-Alert--warning: Warning alert styling with icon.
t-Alert--danger: Danger or error alert styling with icon.
t-Alert--info: Informational alert styling with icon.
t-Alert--horizontal: Arranges alert content horizontally.
t-Alert--page: Styles alert for page-level messages.
t-Alert--wizard: Specialized alert for wizard-style pages.
t-Notification: Base notification class.
t-Notification--success: Success notification styling.
t-Notification--warning: Warning notification styling.
t-Notification--danger: Danger notification styling.
Icon CSS Classes
Icons enhance user experience, and APEX makes them easy to implement and style.
t-Icon: Base class for icons.
t-Icon--left: Positions icon to the left of text.
t-Icon--right: Positions icon to the right of text.
fa: Base FontAwesome icon class.
fa-{icon-name}: Specific FontAwesome icons (e.g., fa-home, fa-user).
fa-2x, fa-3x, fa-4x, fa-5x: Scales icons to different sizes.
fa-spin: Animates icon with spinning effect.
fa-pulse: Animates icon with pulsing effect.
Table and Report Classes
Tables and reports are core to many APEX applications, and these classes help you style them effectively.
t-Report: Base class for reports.
t-Report--stretch: Makes report columns fill the available width.
t-Report--altRowsDefault: Applies alternating row colors.
t-Report--rowHighlight: Highlights rows on hover.
t-Report--staticRowColors: Uses static colors instead of alternating.
t-Report--horizontalBorders: Shows only horizontal borders between rows.
t-Report--noBorders: Removes all borders from the report.
t-AVPList: Attribute-value pair list styling.
t-AVPList--leftAligned: Left-aligns AVP list labels.
t-AVPList--rightAligned: Right-aligns AVP list labels.
Navigation Classes
Navigation is crucial for user experience, and these classes help create intuitive menus and breadcrumbs.
t-NavigationBar: Styles the main navigation bar.
t-NavigationBar-item: Individual navigation items.
t-Breadcrumb: Styles breadcrumb navigation.
t-Breadcrumb-item: Individual breadcrumb items.
t-TreeNav: Styles tree-style navigation.
t-TreeNav-item: Individual tree navigation items.
t-Tabs: Base class for tab navigation.
t-Tabs-item: Individual tab items.
t-Tabs--simple: Simplified tab styling.
t-Tabs--pill: Pill-shaped tab styling.
Wizard and Step CSS Classes
For multi-step processes, wizards provide excellent user guidance.
t-Wizard: Base wizard container class.
t-Wizard-steps: Container for wizard steps.
t-Wizard-step: Individual wizard step.
t-Wizard-step.is-active: Marks the current active step.
t-Wizard-step.is-complete: Marks a completed step.
t-WizardSteps: Alternative wizard steps styling.
t-WizardSteps--displayLabels: Shows labels beneath step indicators.
t-WizardSteps--displayCurrentLabelOnly: Shows only the current step label.
Timeline Classes
Timelines are great for showing chronological information or process flows.
t-Timeline: Base timeline container.
t-Timeline-item: Individual timeline items.
t-Timeline-wrap: Wraps timeline item content.
t-Timeline-user: Styles user information in timeline.
t-Timeline-avatar: Styles avatar images in timeline.
t-Timeline-content: Main content area of timeline items.
t-Timeline-typeIcon: Icon representing timeline item type.
Chart and Visualization Classes
While APEX handles most chart styling automatically, these classes give you additional control.
a-Chart: Base chart container class.
a-Chart-legend: Styles chart legends.
a-Chart-tooltip: Customizes chart tooltips.
Utility CSS Classes
These miscellaneous utility classes solve common styling challenges you'll encounter.
u-vh: Sets height to viewport height units.
u-vw: Sets width to viewport width units.
u-hot-text: Styles text with hot/accent color.
u-danger-text: Styles text with danger color.
u-success-text: Styles text with success color.
u-warning-text: Styles text with warning color.
u-Processing: Shows processing indicator.
u-opacity-50: Sets element opacity to 50%.
u-opacity-75: Sets element opacity to 75%.
u-cursor-pointer: Changes cursor to pointer on hover.
u-overflow-auto: Adds scrollbars when content overflows.
u-overflow-hidden: Hides overflowing content.
u-overflow-scroll: Always shows scrollbars.
u-position-relative: Sets position to relative.
u-position-absolute: Sets position to absolute.
u-position-fixed: Sets position to fixed.
u-position-sticky: Sets position to sticky.
is-active: Marks elements as active state.
is-disabled: Marks elements as disabled state.
is-readonly: Marks elements as readonly state.
is-focused: Marks elements as a focused state.
is-expanded: Marks collapsible elements as expanded.
is-collapsed: Marks collapsible elements as collapsed.
Best Practices for Using Oracle APEX CSS Classes
Let me share some insights from my experience working with these classes. First, always prefer APEX's built-in classes over writing custom CSS. This ensures your application remains maintainable and benefits from future theme improvements.
When combining multiple classes, apply them in a logical order: layout classes first, then spacing, then color and typography. This makes your code more readable and easier to debug.
Don't be afraid to inspect APEX's own pages to see how Oracle uses these classes. The App Builder itself is an excellent reference for best practices.
Remember that responsive design is built into most of these classes. Test your applications on different screen sizes to ensure the responsive utilities work as expected for your use case.
Finally, document the classes you use frequently in your organization. Creating an internal style guide helps maintain consistency across all your APEX applications and speeds up development for your entire team.
See also: Oracle APEX JavaScript Functions
Conclusion
Understanding and effectively using APEX's built-in CSS classes is a game-changer for your application development. You'll build faster, maintain consistency, and create professional-looking applications without fighting with custom CSS. Start experimenting with these classes in your next project, and you'll quickly discover which ones become your favorites for different scenarios.
Check more tutorials here: Oracle APEX Tutorial
