Opera Style Sheets

Opera provides two modes for page styles: "Author" and "User". In "Author" mode, the page renders the way the page creator wants it to look. He or she may also provide his or her own style sheets, known as alternate style sheets, to view a page in addition to the ones offered in "User" mode. In "User" mode, you choose the way the page will appear.

These options are designed to cater to different browsing preferences and enhance accessibility for the visually impaired. You can switch between "Author" and "User" modes with Shift+G or by clicking on the icon to the left of the address bar between the camera (no image mode) and the printer.

Style sheets can be combined. If you apply a style sheet to one window in user mode, the style sheet will apply to all windows in user mode.

This tutorial was last updated for Opera 9.0.

Emulate text browser

This mode renders pages the way a text browser would. Text browsing is ideal for accessing sites with bad design, browsing without images, seeing only content, and viewing content with a simple layout. Most text formatting has been disabled and replaced by basic formatting. It uses white text on a blue background, and uses the same font for all pages. Generated content in the source code appears inverted in blue text on a white background.

Nostalgia

This style sheet simulates running Opera on an old 8-bit computer. It is a great way to demonstrate the power of CSS by drastically altering the appearance and layout of a Web page.

Accessibility layout

You can use accessibility layout if you have visual impairments or reading disabilities to view pages more clearly. Most text formatting has been disabled and replaced by basic formatting. Combined with zooming, which further increases font size, it enables users to adjust the size until they can read the text clearly. For even greater readability, page width is also limited. Word, letter, and line spacing are increased. The lime green background gives the best contrast with black text. Linked images are outlined by a black border.

Show images and links only

This mode is a good way to get an overview of a page by removing text. Links are highlighted and images are outlined.

High contrast (white on black or black on white)

This style sheet comes in two modes: white on black and black on white. It is designed to give the greatest contrast between text and background. Laptop users will find this style sheet useful since it changes only the colors, not the layout.

Hide non-linking images

This style sheet hides images with no navigational purpose. Using it will retain the functionality of linking images.

Hide certain-sized elements (aggressive)

If the size of an HTML element has been specified in the HTML source, it will be hidden. This style sheet will apply to all elements of certain sizes regardless of the actual content.

Disable tables

This is designed for developers. It disables tables and treats them as generic unknown block elements, similar to the rendering of some text browsers.

Show structural elements

This is designed for developers. It shows where important block elements start and end, as well as meta information. It counts font elements and nested tables, which Web designers should avoid.

Debug with outline

Also designed for developers, this style sheet outlines major structural elements. This style sheet helps distinguish between different elements and shows how a Web page is structured. The advantage of using an outline instead of a border is that the page will not be reformatted since borders are drawn in. It is easier to see how elements are nested with borders, but they would have to be changed manually in the style sheet.