12.4 Using Custom Cascading Style Sheets

Upload or reference a cascading style sheet.

A cascading style sheet (CSS) enables a developer to control the style of a web page without changing its structure. When used properly, a CSS separates visual attributes such as color, margins, and fonts from the structure of the HTML document. Oracle Application Express includes themes that contain templates that reference their own CSS. The style rules defined in each CSS for a particular theme also determine the way reports and regions display.

Tip:

If your application uses Universal Theme - 42, you can also take advantage of theme styles and update the appearance of your application using Theme Roller. See "Using Theme Styles and Theme Roller" and "Using Theme Roller."

Parent topic: Using Themes and Theme Styles

12.4.1 About Uploading Cascading Style Sheets

You can upload files (including CSS files) for use by a specific application or all applications within a workspace. To learn more, see "Managing Static Application Files" and "Managing Static Application Files."

12.4.2 Referencing an Uploaded Cascading Style Sheet in the Page Template

You can reference an uploaded cascading style sheet within the Header section of the page template. You use the Header section to enter the HTML that makes up the <HEAD> section of the HTML document.

To reference an uploaded cascading style sheet:

On the Workspace home page, click the App Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.

The Themes page appears.
Select a theme.
On the Tasks list, click View Templates.
Select the name of the page template you want to edit.
Use a <link> tag within the Header section to reference the appropriate style sheet.
To reference an uploaded file that is associated with a specific application, you would use the substitution string #APP_IMAGES#. For example:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#APP_IMAGES#sample2.css" type="text/css">
</head>
...
```
To reference an uploaded file that is associated with a specific workspace, you would use the substitution string #WORKSPACE_IMAGES#. For example:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#sample3.css" type="text/css">
</head>
...
```