Previous Next JavaScript must be enabled to correctly display this content

## 11.4 Using Custom Cascading Style Sheets

Control the style of a web page by uploading and referencing a cascading style sheet.

- About Cascading Style Sheets
  A cascading style sheet (CSS) enables a developer to control the style of a web page without changing its structure.
- Referencing an Uploaded Cascading Style Sheet in the Page Template
  Reference an uploaded cascading style sheet within the Header section of the page template.

Parent topic: Using Themes and Theme Styles

### 11.4.1 About Cascading Style Sheets

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 APEX 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 Using the Theme Roller Dialog.

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.

Parent topic: Using Custom Cascading Style Sheets

### 11.4.2 Referencing an Uploaded Cascading Style Sheet in the Page Template

Reference an uploaded cascading style sheet within the Header section of the page template.

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:

1. Navigate to the Themes page:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Click Shared Components.
   4. Under User Interface, select Themes.
   The Themes page appears.
2. `Select a theme.`
3. On the Tasks list, click View Templates.
4. Select the name of the page template you want to edit.
5. 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_FILES#`. For example:

       <html>
       <head>
           <title>#TITLE#</title>
           #HEAD#
           <link rel="stylesheet" href="#APP_FILES#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_FILES#`. For example:

       <html>
       <head>
           <title>#TITLE#</title>
           #HEAD#
           <link rel="stylesheet" href="#WORKSPACE_FILES#sample3.css" type="text/css">
       </head>
       ...

See Also:

- About Cascading Style Sheets
- Creating a New Template
- Managing Templates
- Page Templates
- APP_FILES
- WORKSPACE_FILES

Parent topic: Using Custom Cascading Style Sheets