My Blog

The overflow-wrap property is used to specify whether the browser can break lines within an unbreakable string thus preventing content from overflowing. The overflow-wrap property has only three values: normal, break-word and anywhere. Overflow-wrap vs Word-break Though overflow-wrap and word-break behave similarly there are differences between them. The overflow-wrap property breaks the word if it cannot be placed on the line without overflowing…

The overflow-anchor property allows to opt out Scroll Anchoring, a browser feature which adds scroll position to minimize content shifts. Scroll Anchoring is enabled by default in any supported browser. This property has two values: auto and none. Initial Value auto Applies to All elements. Inherited No. Animatable No. Version CSS Scroll Anchoring Module Level 1 DOM…

The overflow property defines the behavior content which overflows the element box. This property only works for block elements that have a specified height. It specifies whether the content should be clipped to fit in the box or scrollbars should be added on the element. This is a shorthand for the following properties: The content overflows when…

The outline-width property defines the width of an outline. An outline is a line which is drawn around an element. But it is different from the border property. The width and height properties of an element do not include the outline width because the outline is not considered a part of the element’s dimensions. This property has the following values: medium, thick,…

The outline-style property defines the style of an outline. It is similar to the border property but there is a difference. The outline is outside of an element’s border and it does not take space. It is drawn around an element’s four sides by default. The outline-style property has the following values: The width and height properties of an element do not include the outline…

The outline-offset property is used to specify the space between an outline and the border edge of an element. The space between the outline and the element is transparent. There are three ways in which outlines differ from borders: This property is one of the CSS3 properties. It is not a part of the outline shorthand property. The outline-offset property must be…

The outline-color property defines the color of an outline. An outline is a line that is drawn around an element. But it is different from the border property. The width and height properties of an element do not include the outline width because the outline is not considered a part of the element’s dimensions. Hexadecimal, RGB, RGBA, HSL, HSLA or color names can…

An outline is a line that is drawn outside the borders. It is the same on all sides. The outline property is a shorthand for: The outline-color property does not work if it is used alone. The width and height of the element do not include the width of the outline. It must be specified separately. Outlines vs. Borders…

The orphans property is used to specify the minimum number of lines of a block-level container that can be left at the bottom of a page or column. An orphan is the first line of a paragraph that appears alone at the bottom of a page and the paragraph continues on a following page. The orphans property…

The order property is used to specify the order of a flexible item inside the flex or grid container. The order property is a part of the Flexible Box Layout module. The order property is one of the CSS3 properties. Accessibility Concerns The order property creates a disconnection between the content’s visual display and DOM order. This can affect the users with low vision experience…