The hanging-punctuation property designates the placement of a punctuation mark outside the line box at the beginning or at the end of a full line of text. Syntax Example: p { hanging-punctuation: last; } Values none Default value. There will be no placement of a punctuation mark outside the line box at the beginning or […]

The height property designates an element’s height, which does not include borders, margin, or padding. Syntax If the height is set to auto the element’s height will automatically adjust to correctly display its contents. If height is specified with a numeric value and the content is larger than that value, it will overflow the container. […]

The hyphens property designates whether or not hyphenation is allowed in order to create more soft-wrap opportunities in a line of text. Syntax Examples: div.one { hyphens: none; } div.two { hyphens: manual; } div.three { hyphens: auto; } Values none Words are not hyphenated. manual Default value. Only words with ‐ or ­ are […]

The image-orientation property designates a correction to the orientation of an image that is independent of the layout. Syntax This property should only be used to correct the orientation of images that were taken with the camera rotated or scanned rotated. img.rotated { image-orientation: from-image; } Values none No correction is applied and the image […]

The image-rendering property designates the specific type of algorithm that will be used for image scaling. Syntax The image-rendering property does not have any effect on images that are not scaled. img.auto { height: 400px; image-rendering: auto; width: 600px; } img.crisp { image-rendering: crisp-edges; } img.pix { image-rendering: pixelated; } img.smooth { image-rendering: smooth; } […]

The isolation property designates whether or not an element should create a new stacking context. Syntax Helpful when used with the background-blend-mode or mix-blend-mode properties. div#ex { isolation: isolate; } Values auto Default value. The stacking context is changed only if one of the properties applied to the element requires it. isolate Creates a new […]

When a flexible container’s items do not use all available space on the main axis, the justify-content property aligns the items horizontally. Syntax Use align-items for vertical alignment of a flexible container’s items. div.ex { display: flex; justify-content: space-between; } Values flex-start Default value. Positions items at the beginning of the containing element. flex-end Positions […]

The left property is used to set the horizontal position on elements that have the position set to relative, fixed, absolute, or sticky. It has no effect on elements that are not positioned. Syntax If the element’s position is set to absolute or fixed, the left property sets the left edge of the element to […]

The letter-spacing property is used to increase or decrease the amount of space between text characters. Syntax Examples: p.one { letter-spacing: 3px; } p.two { letter-spacing: -1px; } Values normal Default value. Makes the space between text characters normal. length Defines in length units (px, pt, em, etc.) the space between text characters. initial Sets […]

The line-height property designates a line’s height. Syntax Only positive values are allowed. p.one { line-height: normal; } p.two { line-height: 1.25; } p.three { line-height: 125%; } Values normal Default value. Sets the line height to normal. number Sets the line height to this numerical value multiplied with the current font-size. length Sets a […]

The list-style property is the shorthand property for list-style-type, list-style-position, and list-style-image (in that order). Syntax The default value is used if any of the property values are missing. ul.ex { list-style: circle inside url('path-to-image.jpg'); } Values list-style-type Default value is “disc”. Designates the type of list-item marker (or lack thereof) in a list. list-style-position […]

The list-style-image property sets an image with which to replace the list-item marker. Syntax The list-style-type property should always be specified as a fallback in case the image is unavailable for some reason. ul.one { list-style-image: url('path-to-image.jpg'); list-style-type: circle; } Values none Default value. No image is displayed and the list-style-type property will be applied. […]

The list-style-position property designates the position of the list-item markers. Syntax list-style-position: outside; sets the list-item marker outside the list-item. list-style-position: inside; sets the list-item marker inside the list-item, so it will be part of the list-item’s text and push the text at the start. ul.one { list-style-position: outside; } ul.two { list-style-position: inside; } […]

The list-style-type property designates the type of list-item marker (or lack thereof) in a list. Syntax Examples: ul.one { list-style-type: circle; } ul.two { list-style-type: square; } ul.three { list-style-type: none; } ul.four { list-style-type: lower-alpha; } Values disc Default value. The marker is a filled circle (bullet point). armenian Sets the marker to traditional […]

The margin property is the shorthand property for margin-top, margin-right, margin-bottom, and margin-left (in that order). Syntax An element’s margin is the space between the designated edge(s) of an element and the edge(s) of the next or preceding element in the document flow. Positive and negative values are allowed. In the shorthand format, margin can […]

The margin-bottom property designates the bottom margin of an element. Syntax Both positive and negative values are allowed. div.ex { margin-bottom: 20px; } Values length Designates in length units (px, pt, em, etc.) a fixed bottom margin of the element. Default value is 0. % Designates a bottom margin in percentage of the width of […]

The margin-left property designates the left margin of an element. Syntax Both positive and negative values are allowed. div.ex { margin-left: 20px; } Values length Designates in length units (px, pt, em, etc.) a fixed left margin of the element. Default value is 0. % Designates a left margin in percentage of the width of […]

The margin-right property designates the right margin of an element. Syntax Both positive and negative values are allowed. div.ex { margin-right: 20px; } Values length Designates in length units (px, pt, em, etc.) a fixed right margin of the element. Default value is 0. % Designates a right margin in percentage of the width of […]

The margin-top property designates the top margin of an element. Syntax Both positive and negative values are allowed. div.ex { margin-top: 20px; } Values length Designates in length units (px, pt, em, etc.) a fixed top margin of the element. Default value is 0. % Designates a top margin in percentage of the width of […]

The mask-image property designates an image to be used as a mask layer for the element to which it is assigned. Syntax Linear and radial CSS gradients can also be used for the mask image. div.ex { mask-image: url(path-to-image.jpg); mask-position: center; mask-repeat: no-repeat; mask-size: 80%; } Values none Default value. image Specifies an image to […]

The mask-mode property designates whether the mask layer image is treated as an alpha mask or a luminance mask. Syntax Example: div.ex { mask-image: url(path-to-image.jpg); mask-position: center; mask-repeat: no-repeat; mask-size: 80%; mask-mode: luminance; } Values match-source Default value. Dependent on what type of element (image or SVG) the mask-image property is. If it is an […]

The mask-origin property designates the origin position – the mask position area – of a mask layer image. Syntax Example: div.ex { mask-image: url(path-to-image.jpg); mask-origin: content-box; mask-position: center; mask-repeat: no-repeat; mask-size: 80%; } Values border-box Default value. The position of the mask layer image is relative to the border box. content-box The position of the […]

The mask-position property designates the starting position – relative to the mask position area – of a mask image. Syntax A mask image is placed at the top left corner and repeated both vertically and horizontally by default. div.ex { mask-image: url(path-to-image.jpg); mask-position: center; mask-repeat: no-repeat; mask-size: 80%; } Values left top left center left […]

The mask-repeat property designates whether and how a mask image should be repeated. Syntax A mask image is repeated both horizontally and vertically by default. div.ex { mask-image: url(path-to-image.jpg); mask-repeat: repeat; mask-size: 80%; } Values repeat Default value. The mask image is repeated both horizontally and vertically by default. If the last image does not […]