User CSS
Last updated for Opera 10.51
Overview
Opera provides several ways to change the presentation layer styles of a Web page.
Author mode
- In "Author" mode, the Web page renders the way the page creator wants it to look.
- The author may also provide additional style sheets, known as alternate style sheets, to view a page in addition to the
ones offered in "User" mode.
- In addition, you can use any or all of Opera's built-in style options located in the Style menu. See the "Opera's built-in
style options" section.
User mode
- In "User" mode, you choose the way the page will appear by adding cascading style sheet (.css) files using:
- Opera's "Style Options"
- Opera's "Site Preferences"
These options are designed to cater to different browsing preferences and enhance accessibility. To switch between "Author"
and "User" modes go to View > Style and select the mode. You can set one of these modes as the default mode. To do this,
go to View > Style > Manage Modes to display the Presentation Modes tab of the Style Options dialog. Select the mode
in the Default mode drop-down list.
If you are using the keyboard to open the style options, please use the following instructions.
- When using the Opera O menu:
- In Windows and Linux/UNIX press: Alt , P , T
- When using the Opera Menu bar:
- In Windows and Linux/UNIX press: Alt , V , S
- In Mac press: Ctrl , F2 , → (go to View), ↓ (go to Style),
Enter
In the Style Options dialog, you can also specify the following options for either mode:
- Page style sheet
- Page fonts and colors
- My style sheet
- My fonts and colors
- My link style
Style sheets can be combined. If you apply a style sheet to one tab or window in user mode, the style sheet will apply to
all tabs or windows in user mode.
Author mode
Using Opera's built-in style options
The following list contains descriptions of the built-in Opera style options available in the Style menu. Each built-in
style option is identified along with its effect.
- Author mode
-
Renders a Web page with styles created by its author.
- User mode
-
Enables you to complement a Web page's styles with your own.
- Manage modes
-
Enables the adjustment of settings for user mode and author mode.
- Accessibility Layout
-
You can use the Accessibility Layout if you have visual impairments or reading disabilities to view pages more clearly.
In this mode, most text formatting has been disabled and replaced by basic formatting. Combined with page zoom, which further
increases font size, you can adjust the size until you can read the text clearly. For even greater readability, page width
is also limited. Word, letter, and line spacing is increased. The lime green background gives the best contrast with black
text. Linked images are outlined by a black border.
- Alt Debugger
-
Opens a new Web page and displays images with invalid or missing
alt attributes.
- Block Structure
-
Shows the block-level opening
<element> and closing </element> tag structure in a
Web page.
- Class and Id
-
Shows
class and id attributes with their values throughout a Web page.
- Disable Breaks
-
Disables all
<br /> and <br> elements in a Web page.
- Disable Floats
-
Reverts the flow of a Web page to normal (none), ignoring all left or right floated elements.
- Disable Forms
-
Prevents forms from rendering in a Web page by disabling all
<form> elements in its markup.
- Disable Positioning
-
Resets all absolute, relative, fixed, and inherited positioned elements to the static position.
- Disable Tables
-
Changes all table elements to block-level elements and displays them in a vertical stack.
- Fixed Table Layout
-
Resets the table-layout display property of
table or inline-table from auto or
inherit to fixed.
- High contrast (B/W) background
-
Increases the contrast of black text characters against a pure white background.
- High contrast (W/B) background
-
Renders a Web page with white text characters against a pure black background.
- Inline Structure
-
Displays all inline opening
<element> and closing </element> tags within a Web page.
- Outline
-
Outlines all block-level elements in a Web page.
- Table of Contents
-
Opens a new Web page listing the heading structure elements (
h1, h2, h3, h4, h5, h6) and their content in a
Web page.
- Table Structure
-
Reveals all opening
<element> and closing </element> tags within tables in a Web page.
User Mode
Adding alternate cascading style sheets to Opera
This facility enables a user to attach their own external cascading style sheet to influence the presentation layer of Web
pages being rendered in Opera. Its styles will affect all Web pages viewed in the browser. The following step-by-step instructions
guide you in applying it to your Opera browser.
- Create (or have ready) an external cascading style sheet document (.css) containing your styles on your hard drive.
- Using the Opera O menu, or the Opera Menu bar, navigate to:
- Tools > Preferences > Advanced > Content > Style Options...
- Click "Style Options..."
- In the Display dialog box "My style sheet" item, click "Choose..." and navigate to the location of your external cascading
style sheet.
- Click the style sheet .css file to highlight it.
- Click "OK" to save the location of your external style sheet in Opera.
- Opera will automatically load your external cascading style sheet and render its styles across all Web sites viewed in
Opera.
- Note: User style sheets respect
@import rules for local files.
Using Opera's "Site Preferences"
This powerful facility allows the application of a user style sheet to specific Web sites. Important note:
It will override a style sheet that has been linked in the "Style Options" facility described in the previous section. The
following steps describe how to use this facility.
- Create (or have ready) an external cascading style sheet document (.css) containing your styles on your hard drive.
- Go to: Tools > Quick Preferences > Edit Site Preferences.
- This opens the "Site Preferences" dialog box.
- Under the "General" tab, in the "Site" field box, enter the URL of a Web site you want to style.
- Under the "Display" tab, in the "My style sheet" select field, click "Choose..." and navigate to the CSS style sheet file
you want to apply to this Web site.
- Highlight your .css file and click "Open".
- Click "OK" to associate your CSS style sheet with this Web site.
Important note
Even though a user style sheet may use a very specific CSS selector (more specific than the page's own style sheets),
the page's CSS will override the user CSS style; see the
W3C CSS 2.1 section 6.4.1 Cascading order (http://www.w3.org/TR/CSS21/cascade.html#cascading-order).
You can overcome this by setting the individual style in the user CSS file with the !important rule; see the
W3C CSS 2.1 section 6.4.2 !important rules (http://www.w3.org/TR/CSS21/cascade.html#important-rules).
Example:
p { color: #000 !important; }