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.
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.
Click the View Report icon. See "About the Cascading Style Sheets Page".
A report appears.
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.
Once you upload a CSS to the CSS Repository, you control how the page displays by making a selections from the search bar. Available controls include:
Search icon - Resembles a magnifying glass. Click this icon to narrow your search to only specific columns. To search all columns, select All Columns.
Text area - Enter case insensitive search criteria (wildcard characters are implied) and then click Go.
Go button - Executes a search or applies a filter.
View Icons - Displays each cascading style sheet as a large icon.
View Report - Displays each cascading style sheet as a line in a report.
Actions menu - Displays the Actions menu. Use this menu to customize report view. See "About the Actions Menu".
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 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>
...