Using Custom Cascading Style Sheets

A cascading style sheet (CSS) provides a way 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.

Topics in this section include:

Uploading Cascading Style Sheets
Referencing an Uploaded Cascading Style Sheet in the Page Template

Uploading Cascading Style Sheets

You upload cascading style sheets to your workspace using the Cascading Style Sheet Repository. Uploaded cascading style sheets (CSS) are available to any application created in your workspace. The cascading style sheets are written to the file system, so you can reference them in your HTML source code.

To upload cascading style sheets:

On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.

The Shared Components page appears.
Under Files, select Cascading Style Sheets.

The Cascading Style Sheet page appears.
From the View list, select Details. See "About the Cascading Style Sheets Page".
To upload a CSS, click Create and follow the on-screen instructions.
To edit an existing CSS, select the CSS name.
To download an existing CSS, click the Download icon.

About the Cascading Style Sheets Page

Once you upload a CSS to the CSS Repository, you control how the page displays by making a selection from the View list. Available options include:

Icons (the default) displays each CSS as a large icon. To edit a CSS, click the appropriate icon.
Details displays each CSS as a line in a report. To edit a CSS, click the appropriate name.

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 Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.

The Themes page appears.
On the Tasks list, click View Templates.
Select the name of the page template you want to edit.
Use a <link> tag within the head 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>
...
```