CSS glossary entries for ‘O’
- opacity
- The
opacity
property is a CSS property which sets the degree of semi-transparency (or opacity) in a selected area's content. The property is specified as a floating point number between0
and1
: where the0
equates to full transparency and1
equates to completely opaque. The important point to remember aboutopacity
is that should hardly ever be used when the selected elements have textual content, since it can significantly degrade the readability of that text. When you want readable text on a semi-transparent background, set a semi-transparent ‘background-color’ (using ‘rgba’ or ‘hsla’) or a semi-transparent ‘background-image’. - Out of order positioning
- Is the use of CSS positioning properties to place selected content at a different position in the visual display order than it occupies in the HTML source code order. It is most commonly used by developers to place ‘page furniture’ (e.g. navigation) below the unique content of a page within the HTML, but above that content in the visual display.
- outline
- In CSS and outline is a rendered bounding box which looks and behaves very much like a border. Unlike ‘borders’, outlines are rendered over the outer portion of the ‘padding area’, i.e. their outer edge coincides with the ‘padding edge’ of selected elements. An outline is created using the CSS
outline
property. Like the ‘border’ property, outline is a shorthand for theoutline-color
,outline-style
andoutline-width
properties. - outline-color
- The
outline-color
property is a CSS property which specifies the colour of ‘outlines’. - outline-style
- The
outline-style
property is a CSS property which specifies the type of line that an ‘outline’ is drawn with, e.g. solid, dotted, dashed, etc. - outline-width
- The
outline-width
property is a CSS property which specifies the thickness of an ‘outline’ - overflow
- The
overflow
property is a CSS ‘shorthand property’ which allows the designer to set all the ‘overflow properties’ in s single statement. For the most part, overflow properties affect ‘float boxes’ and ‘positioned boxes’, since those ‘layout box’ types do not contribute to the ‘width’ or ‘height’ of their container. By contrast ‘statically positioned’ containers automatically expand to encapsulate their ‘static’ descendants. - overflow-x
- The
overflow-x
property is a CSS property which specifies whether excess content should be allowed to visibly overflow the ‘inside edge’ of its parent container. - overflow-y
- The
overflow-y
property is a CSS property which determines whether excess content should be allowed to visibly overflow the bottom edge of its parent container. - Overlapping margins
- See ‘margin collapse’