The text-overflow property designates how content that is overflowed and not displayed should be signaled to the user, by clipping, showing an ellipsis (…), or displaying a custom string. Syntax Both white-space: nowrap and overflow: hidden are required for text-overflow. p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } Values clip Default value. Designates that […]

The text-shadow property adds a shadow to text. Syntax More than  one shadow can be added to the text by using a comma-separated list of shadows. h3 { text-shadow: 0 1px 2px #ff0000; } Values h-shadow Required. Positive or negative value that sets the position of the horizontal shadow. v-shadow Required. Positive or negative value […]

The text-transform property controls the capitalization or lack thereof of text. Syntax Example: p.up { text-transform: uppercase; } p.low { text-transform: lowercase; } p.cap { text-transform: capitalize; } Values none Default value. The text renders as it was written. capitalize Designates that the first character of each word is uppercase. uppercase Designates that all characters […]

The top property is used to set the vertical 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 top property sets the top of the element to a […]

The transform property specifies a 2D or 3D transformation to an element, allowing you to implement rotate, scale, skew, and other transformations. Syntax Examples: div.one { transform: rotate(35deg); } div.two { transform: skewY(40deg); } div.three { transform: scaleX(1.1); } Values none Designates that there will be no transformation. matrix(n,n,n,n,n,n) Designates a 2D transformation by defining […]

The transform-origin property lets you change the position of transformed elements. Syntax The x- and y-axis of an element can be changed for 2D transformations, while 3D transformations can also change the z-axis of an element. div.tran { transform: rotate(45deg); transform-origin: 25% 45%; } Values x-axis Designates where the view is placed at the x-axis. […]

The transform-style property designates how nested elements render in 3D space. Syntax The transform-style property must be used with the transform property. div.tran { transform: rotateX(45deg); transform-style: preserve-3d; } Values flat Default value. Designates that children of the element’s 3D position will NOT be preserved. preserve-3d Designates that children of the element’s 3D position will […]

The transition property is a shorthand property that combines up to four of the following properties: transition-property transition-duration transition-timing-function transition-delay Syntax The value of the transition-duration property must always be specified, or else it will default to 0s, and the transition will not have any effect. The full syntax is as follows: transition: property duration timing-function […]

The transition-delay property designates when the transition effect begins. Syntax The value of the transition-delay property is specified in seconds (s) or milliseconds (ms). div.del { transition-delay: 0.25s; } Values time Designates the number of seconds or milliseconds to wait before the transition effect begins. initial Sets the property to its default value. inherit Inherits […]

The transition-duration property designates the number of seconds (s) or milliseconds (ms) the transition effect takes to complete. Syntax Example: a.animate { transition-duration: .25s; } Values time A positive number in seconds or milliseconds that provides the amount of time a transition effect takes to complete. Default value is 0 (no effect). initial Sets the […]

The transition-property property designates the name of the CSS property for which the transition effect is for. Syntax The transition effect starts when the specified CSS property changes (such as being hovered over). Note that the transition-duration property must be specified, otherwise the transition will have no effect. a.animated { color: #fff; transition-property: color; } […]

The transition-timing-function property designates the speed curve of the transition effect. Syntax Gives a transition effect the ability to change speed throughout its duration. div { transition-timing-function: ease; } Values ease Default value. Designates a transition effect that starts slowly, then fast, then ends slowly (same as cubic-bezier(0.25.0.1,0.25,1)). linear Designates a transition effect with the […]

The unicode-bidi property is used in conjunction with the direction property to designate whether or not to override the text to support multiple languages in the same document. Syntax The unicode-bidi property overrides the user-agent’s Unicode algorithm to allow the developer to control text embedding. div.uni { direction: rtl; unicode-bidi: bidi-override; } Values normal Default […]

The user-select property designates whether or not the text of an element can be selected. Syntax By default, some browsers allow the user to select text by double-clicking on it. This property can override the default behavoir. div.noselect { user-select: none; } Values auto Default value. As long as the browser allows it, text can […]

The vertical-align property designates the vertical alignment of an inline, inline-block, or table-cell box. Syntax Example: img.base { vertical-align: baseline; } Values baseline Default value. Aligns the element with the baseline of the parent. length Raises or lowers an element by the designated length based on a positive or negative value. % Raises or lowers […]

The visibility property designates whether or not an element is visible in the browser. Syntax Although elements with the visibility property set to hidden are not visible, their space is still taken up on the page. h2.hide { visiblity: hidden; } h2.show { visibility: visible; } Values visible Default value. Sets the element to be […]

The white-space property defines how an element’s white space is handled. Syntax The white-space property defines whether white space is collapsed and how, as well as whether lines may wrap at soft-wrap opportunities. p { white-space: normal; } Values normal Default value. Multiple whitespaces will collapse into a single whitespace. nowrap Multiple whitespaces will collapse […]

The widows property designates a specific number of lines in a block container that must be left at the top of a page, region, or column. Syntax A widow is the last line of a paragraph that appears alone at the top of the page in typography. .container p { widows: 2; } Values integer […]

The width property designates an element’s width, which does not include borders, margin, or padding. Syntax Note that, if set, the min-width and max-width properties will override the width property. .automatic { width: auto; } .pixels { width: 400px; } .percentage { width: 60%; } Values auto Default value. Width is automatically calculated by the […]

The word-break property designates how words at the end of a line should break. Syntax Example: p.all { word-break: break-all; } Values normal Default value. Uses normal line break rules. break-all The word may be broken at any character to prevent overflow. keep-all Designates that word breaks shall not be used for Chinese/Japanese/Korean text. Other […]

The word-spacing property sets an increase or decrease in the white space between words. Syntax Positive and negative values are allowed. p { word-spacing: 20px; } Values normal Default value. Sets the spacing between words (0.25em) to normal. length Positive or negative value in px, pt, cm, em, etc that defines an additional space between […]

The writing-mode property designates if lines of text flow horizontally or vertically as well as right to left or left to right. Syntax Example: p.hor { writing-mode: horizontal-tb; } p.vert-rl { writing-mode: vertical-rl; } p.vert-lr { writing-mode: vertical-lr; } Values horizontal-tb Default value. Sets the flow of the content to horizontal from left to right, […]

The z-index property designates the stacking order of an element. Syntax z-index only works when its element has a position assigned (position: absolute, position: fixed, position: relative, or position: sticky) and on flex elements (items inside display: flex elements). Elements with a higher z-index value display in front of those with a lower value. .classname […]