/    Sign up×

Reference (335)

clear all

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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. […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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; } […]

Copy Link Tweet This Post ThisShare This

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,1)). linear Designates a transition effect with the […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This

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, […]

Copy Link Tweet This Post ThisShare This

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 […]

Copy Link Tweet This Post ThisShare This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 9.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @ddiebold17,
tipped: article
amount: 1000 SATS,

tipper: @Mqlinka19,
tipped: live stream
amount: 4900 SATS,

tipper: @Mqlinka19,
tipped: article
amount: 10 SATS,