The mask-size property designates the size of the mask layer image. Syntax The mask-size property works in conjunction with the mask-image property, which declares an image to be used as a mask layer for an element.. div.ex { mask-image: url(path-to-image.jpg); mask-size: 80%; } Values auto Default value. size Designates the size on the mask image […]

The max-height property designates the maximum height of an element. Syntax If the content is larger than the max-height value, the property will be applied but the content will overflow. The overflow property defines how the container will handle the overflowing content. If the content is smaller than the max-height value, the property will not […]

The max-width property designates the maximum width of an element. Syntax If the content is larger than the max-width value, the property will be applied. If the content is smaller than the max-width value, the property will not have any effect. div.ex { max-width: 400px; } Values none Default value. No maximum width is set. […]

The min-height property designates the minimum height of an element. Syntax If the content is smaller than the min-height value, the property will be applied. If the content is larger than the min-height value, the property will not have any effect. div.ex { min-height: 400px; } Values length Defines in length units (px, pt, em, […]

The min-width property designates the minimum width of an element. Syntax If the content is smaller than the min-width value, the property will be applied. If the content is larger than the min-width value, the property will not have any effect. div.ex { min-width: 400px; } Values length Defines in length units (px, pt, em, […]

The mix-blend-mode property designates how an element’s content will blend with its parent element’s background. Syntax Example: .wrap { background-color: blue; } .wrap img { mix-blend-mode: multiply; } Values normal Default value. Sets blending mode to normal. multiply Sets blending mode to multiply. screen Sets blending mode to screen. overlay Sets blending mode to overlay. […]

The object-fit property designates how an <img> or <video> is resized within its container. Syntax The object-fit property’s value tells the content to fill the content in a variety of ways, as shown in the values listed below. img.ex { height: 400px; object-fit: cover; width: 600px; } Values fill Default value. The replaced content is […]

The object-position property, used in conjunction with object-fit, designates how an <img> or <video> is positioned via x/y coordinates within its own content box. Syntax The object-position value can be a string (left, center, or right) or a number (in px or percentage). img.ex { height: 400px; object-fit: none; object-position: 50% top; width: 600px; } […]

The opacity property designates the opacity level for an element. Syntax The opacity level value is a numerical value between 0 and 1 in which 0 is 100% transparent and 1 is not transparent at all. div.ex { opacity: 0.6; } Values number Numerical value that designates the opacity level from 0.0 (100% transparent) to […]

The order property declares the order of a flexible element in relation to the rest of the flexible elements within the same container. Syntax The element that the order property is applied to must be a flexible element or else the property will have no effect. div.row { display: flex; } div.row .column.one { order: […]

The orphans property designates the minimum number of lines to be left at the bottom of a page or column. Syntax Often used in conjunction with the widows property. .container p { orphans: 2; } Values integer Numerical value that designates the minimum number of lines that are left at the bottom of a page, […]

The outline property is a shorthand property for outline-width, outline-style, and outline-color. Syntax An outline is a line rendered around and outside the borders of an element to make it stand out. The outline-style value is required. If outline-color is not specified the outline will be the same color as the text. h3.ex { outline: […]

The outline-color property designates the color of an outline. Syntax An outline is a line rendered around and outside the borders of an element to make it stand out. div.ex { outline-color: #000; } Values invert Inverts the color of the outline to ensure it is visible regardless of color background. color Designates the color […]

The outline-offset property is used to add space between the edge or border of an element and the outline around it. Syntax Space that is added with the outline-offset property is transparent. div.ex { outline: 2px solid #000; outline-offset: 10px; } Values length Designates the distance in length units (px, em, pt, etc.) that the […]

The outline-style property designates the style of an element’s outline. Syntax An outline is a line rendered around and outside the borders of an element to make it stand out. div.ex { outline-style: solid; } Values none Default value. No outline will be used. hidden The outline will be hidden. dotted The outline will be […]

The outline-width property designates the width of an outline. Syntax An outline is a line rendered around and outside the borders of an element to make it stand out. div.ex { outline-width: medium; } Values medium Default value. Designates an outline of medium width. thin Designates an outline of thin width. thick Designates an outline […]

The overflow property is used when a block-level element’s content overflows its container to designate whether the overflow content should be clipped, a scroll bar added, or displayed. Syntax Note that the overflow property only works on block elements with a set height. div.one { overflow: scroll; } div.two { overflow: hidden; } div.three { […]

The overflow-wrap property is used to determine whether or not lines with long words can break if they overflow the container. Syntax Example: div.ex { overflow-wrap: break-word; } Values normal Default value. Even if long words overflow the container, they will not break. anywhere Long words that overflow the container will break. break-word Long words […]

The overflow-x property is used when a block-level element overflows at the left and right edges to designate whether the overflow content should be clipped, a scroll bar added, or displayed. Syntax Examples: div.one { overflow-x: scroll; } div.two { overflow-x: hidden; } div.three { overflow-x: auto; } div.four { overflow-x: visible; } Values visible […]

The overflow-y property is used when a block-level element overflows at the top and bottom edges to designate whether the overflow content should be clipped, a scroll bar added, or displayed. Syntax Examples: div.one { overflow-y: scroll; } div.two { overflow-y: hidden; } div.three { overflow-y: auto; } div.four { overflow-y: visible; } Values visible […]

The padding property is the shorthand property for padding-top, padding-right, padding-bottom, and padding-left (in that order). Syntax An element’s padding is the space between the content it contains and its border. In the shorthand format, padding can have between one to four values. If it has one value, that value is applied to all four […]

The padding-bottom property designates the amount of space between an element’s contents and its bottom border. Syntax Padding cannot use negative values. div.ex { padding-bottom:30px; } Values length Defines in length units (px, pt, em, etc.) the space (padding) between the bottom of the content and the bottom border of the element. Default value is […]

The padding-left property designates the amount of space between an element’s contents and its left border. Syntax Padding cannot use negative values. div.ex { padding-left:30px; } Values length Defines in length units (px, pt, em, etc.) the space (padding) between the left edge of the content and the left border of the element. Default value […]

The padding-right property designates the amount of space between an element’s contents and its right border. Syntax Padding cannot use negative values. div.ex { padding-right:30px; } Values length Defines in length units (px, pt, em, etc.) the space (padding) between the right edge of the content and the right border of the element. Default value […]