CSS Animations - CSS: Cascading Style Sheets
css animations is a module of css that lets you animate the values of css properties over time, using keyframes.
... css animations is a module of css that lets you animate the values of css properties over time, using keyframes.
...ver time, using keyframes.
...And 8 more matches

CSSUnparsedValue.CSSUnparsedValue() - Web APIs
the cssunparsedvalue() constructor creates a new cssunparsedvalue object which represents property values that reference custom properties.
... the cssunparsedvalue() constructor creates a new cssunparsedvalue object which represents property values that reference custom properties.
... the cssunparsedvalue() constructor creates a new cssunparsedvalue object which represents property values that reference custom properties.
...And 7 more matches

Using CSS animations - CSS: Cascading Style Sheets
css animations make it possible to animate transitions from one css style configuration to another.
... css animations make it possible to animate transitions from one css style configuration to another.
... css animations make it possible to animate transitions from one css style configuration to another.
...And 7 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
... the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
...late to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
...And 7 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in these guides, i have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification.
...item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
...d dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr.
...And 7 more matches

CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... with the different layout models.
...ce properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
...And 7 more matches

Using CSS counters - CSS: Cascading Style Sheets
css counters let you adjust the appearance of content based on its location in a document.
... css counters let you adjust the appearance of content based on its location in a document.
... css counters let you adjust the appearance of content based on its location in a document.
...And 7 more matches

CSS Shapes - CSS: Cascading Style Sheets
css shapes describe geometric shapes for use in css.
... css shapes describe geometric shapes for use in css.
...shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%).
...And 7 more matches

CSS Color - CSS: Cascading Style Sheets
css color is a css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to html content.
... css color is a css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to html content.
... css color is a css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to html content.
...And 6 more matches

Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow.
... by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow.
... by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow.
...And 6 more matches

CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship.
... the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship.
... the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship.
...And 5 more matches

CSSStyleDeclaration.cssText - Web APIs
the csstext property of the cssstyledeclaration interface returns or sets the text of the element's inline style declaration only.
... the csstext property of the cssstyledeclaration interface returns or sets the text of the element's inline style declaration only.
... the csstext property of the cssstyledeclaration interface returns or sets the text of the element's inline style declaration only.
...And 5 more matches

CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
the cssstyledeclaration.getpropertycssvalue() method interface returns a cssvalue containing the css value for a property.
... the cssstyledeclaration.getpropertycssvalue() method interface returns a cssvalue containing the css value for a property.
... the cssstyledeclaration.getpropertycssvalue() method interface returns a cssvalue containing the css value for a property.
...And 5 more matches

CSS Display - CSS: Cascading Style Sheets
css display is a module of css that defines how the css formatting box tree is generated from the document element tree and defines properties controlling it.
... css display is a module of css that defines how the css formatting box tree is generated from the document element tree and defines properties controlling it.
... css display is a module of css that defines how the css formatting box tree is generated from the document element tree and defines properties controlling it.
...And 5 more matches

CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from html primitives.
... css grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from html primitives.
...p in terms of size, position, and layer, between parts of a control built from html primitives.
...And 5 more matches

CSSKeywordValue.CSSKeywordValue() - Web APIs
the csskeywordvalue constructor creates a new csskeywordvalue object which represents css keywords and other identifiers.
... the csskeywordvalue constructor creates a new csskeywordvalue object which represents css keywords and other identifiers.
... the csskeywordvalue constructor creates a new csskeywordvalue object which represents css keywords and other identifiers.
...And 4 more matches

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
...And 4 more matches

CSS Overflow - CSS: Cascading Style Sheets
the css overflow module contains the features of css relating to scrollable overflow handling in visual media.
... the css overflow module contains the features of css relating to scrollable overflow handling in visual media.
... the css overflow module contains the features of css relating to scrollable overflow handling in visual media.
...And 4 more matches

CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by windows ie 5.5.
... } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
...tsoi tomatillo melon azuki bean garlic.
...And 4 more matches

Overview of CSS Shapes - CSS: Cascading Style Sheets
the css shapes level 1 specification describes geometric shapes in css.
...ed items.
... you might simply want to cause some text to flow along a non-rectangular invisible line.
...And 4 more matches

CSS Layout cookbook - CSS: Cascading Style Sheets
the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites.
... the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites.
...ims to bring together recipes for common layout patterns, things you might need to implement in your own sites.
...And 4 more matches

CSSMathSum.CSSMathSum() - Web APIs
the cssmathsum() constructor creates a new cssmathsum object which creates a new csskeywordvalue object which represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathsum() constructor creates a new cssmathsum object which creates a new csskeywordvalue object which represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathsum() constructor creates a new cssmathsum object which creates a new csskeywordvalue object which represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
...And 3 more matches

CSSPositionValue.CSSPositionValue() - Web APIs
the csspositionvalue constructor creates a new csspositionvalue object which represents values for properties that take a position, for example object-position.
... the csspositionvalue constructor creates a new csspositionvalue object which represents values for properties that take a position, for example object-position.
... the csspositionvalue constructor creates a new csspositionvalue object which represents values for properties that take a position, for example object-position.
...And 3 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
css animations make it possible to do incredible things with the elements that make up your documents and apps.
...t possible to do incredible things with the elements that make up your documents and apps.
...o "running" again.
...And 3 more matches

CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
...ling the size of a box height width max-height max-width min-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the css box model explains one of the fundamental concept of css: the box model.
...controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the css box model explains one of the fundamental concept of css: the box model.
...And 3 more matches

CSS Containment - CSS: Cascading Style Sheets
the aim of the css containment specification is to improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page.
... the aim of the css containment specification is to improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page.
... sections which are independent of each other.
...And 3 more matches

CSS Fonts - CSS: Cascading Style Sheets
css fonts is a module of css that defines font-related properties and how font resources are loaded.
...or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others.
... variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
...And 3 more matches

Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
..."></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction.
...: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction.
...And 3 more matches

Understanding CSS z-index - CSS: Cascading Style Sheets
in the most basic cases, html pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping.
...aware of the space taken by others.
...you adjust the order of the layering of objects when rendering content.
...And 3 more matches

CSS Properties Reference - CSS: Cascading Style Sheets
common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from javascript: note: this list is incomplete.
... common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from javascript: note: this list is incomplete.
... common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from javascript: note: this list is incomplete.
...And 3 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level 3 which is the same standard flexbox uses for aligning items in its flex container.
... specification details how alignment should work in all the different layout methods.
..."item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> you can see how the item is aligned by using the firefox grid highlighter: alignment and writing modes in all of these examples i have been working in english, which is a left-to-right language.
...And 2 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
to round off this set of guides to css grid layout, i am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout.
...ion of elements.
... to see how the blocks align themselves to the tracks, use the firefox grid inspector.
...And 2 more matches

CSS Lists - CSS: Cascading Style Sheets
css lists is a module of css that defines how lists can be laid out and styled.
... css lists is a module of css that defines how lists can be laid out and styled.
... css lists is a module of css that defines how lists can be laid out and styled.
...And 2 more matches

CSS Paged Media - CSS: Cascading Style Sheets
css paged media is a module of css that defines how page switches are handled.
... css paged media is a module of css that defines how page switches are handled.
... css paged media is a module of css that defines how page switches are handled.
...And 2 more matches

CSS Positioned Layout - CSS: Cascading Style Sheets
css positioned layout is a module of css that defines how to position elements on the page.
... css positioned layout is a module of css that defines how to position elements on the page.
... css positioned layout is a module of css that defines how to position elements on the page.
...And 2 more matches

CSS Scroll Snap - CSS: Cascading Style Sheets
css scroll snap is a module of css that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
... css scroll snap is a module of css that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
... css scroll snap is a module of css that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
...And 2 more matches

CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.
...breaking, justification and alignment, white space handling, and text transformation.
...-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text.
...And 2 more matches

CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space.
... css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space.
...w elements styled with css can be transformed in two-dimensional or three-dimensional space.
...And 2 more matches

CSS Transitions - CSS: Cascading Style Sheets
css transitions is a module of css that lets you create gradual transitions between the values of specific css properties.
... css transitions is a module of css that lets you create gradual transitions between the values of specific css properties.
...ansitions between the values of specific css properties.
...And 2 more matches

CSS data types - CSS: Cascading Style Sheets
css data types define typical values (including keywords and units) accepted by css properties and functions.
... css data types define typical values (including keywords and units) accepted by css properties and functions.
...ent> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.
...And 2 more matches

Questions about CSS - CSS: Cascading Style Sheets
cascading style sheets (css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures).
... cascading style sheets (css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures).
... cascading style sheets (css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures).
...And 2 more matches

CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a css module that lets you define the rendering and functionality of features related to the user interface.
... box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors.
... nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors.
...ne-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors.

CSS Multi-column Layout - CSS: Cascading Style Sheets
css multi-column layout is a module of css that adds support for multi-column layouts.
...rty has been applied to the element with a class of container.
... page becomes a fragment of an overall document.
...olling the way columns are filled.

CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface design, and the layout of items in one dimension.
...venly on the main axis.
...ox alignment.
...te flex containers with multiple lines and control the display of the items in those lines.

CSS Writing Modes - CSS: Cascading Style Sheets
css writing modes is a css module that defines various international writing modes, such as left-to-right (e.g.
...ic scripts), right-to-left (e.g.
...ectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g.
...ft scripts) and vertical (e.g.

CSSMathProduct.CSSMathProduct() - Web APIs
the cssmathproduct() constructor creates a new cssmathproduct object which creates a new cssmathproduct object which syntax var cssmathproduct = new cssmathproduct() parameters arg a value for the cssmathproduct object to be constructed either a double integer or a cssnumericvalue.
... the cssmathproduct() constructor creates a new cssmathproduct object which creates a new cssmathproduct object which syntax var cssmathproduct = new cssmathproduct() parameters arg a value for the cssmathproduct object to be constructed either a double integer or a cssnumericvalue.
...the cssmathproduct() constructor creates a new cssmathproduct object which creates a new cssmathproduct object which syntax var cssmathproduct = new cssmathproduct() parameters arg a value for the cssmathproduct object to be constructed either a double integer or a cssnumericvalue.

CSSOM View - CSS: Cascading Style Sheets
cssom view is a module of css that lets you manipulate the visual view of a document, in particular its scrolling behavior.
...ts scrolling behavior.
...ior.

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard css basic box model.
... when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard css basic box model.
...operty is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

CSS Counter Styles - CSS: Cascading Style Sheets
css counter styles is a module of css that lets you define your own counter styles.
... css counter styles is a module of css that lets you define your own counter styles.
... styles.

CSS Generated Content - CSS: Cascading Style Sheets
css generated content is a module of css that defines how to add content to an element.
...nt can be used to add content to anonymous replaced elements or replace the content of a dom node in very limited circumstances with a generated value.
...lace the content of a dom node in very limited circumstances with a generated value.

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in addition to the ability to place items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items.
...e</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> </div> the order of auto placed items a grid can contain a mixture of items.
...often come up as questions.

CSS Logical Properties and Values - CSS: Cascading Style Sheets
css logical properties and values is a module of css introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
... css logical properties and values is a module of css introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
... (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) guides basic concepts of logical properties and values logical properties for sizing logical properties for margins, borders and padding logical properties for floating and positioning specifications specification status comment css logical properties and values level 1 editor's draft initial definition.

CSS selectors - CSS: Cascading Style Sheets
css selectors define the elements to which a set of css rules apply.
... logical combinators, location, time-demensional, resource state, linguistic and ui pseudo-classes, modifier for ascii case-sensitive and case-insensitive attribute value selection.
...ribute value selection.

CSS Custom Properties for Cascading Variables - CSS: Cascading Style Sheets
css custom properties for cascading variables is a css module that allows for the creation of custom properties that can be used over and over.
... css custom properties for cascading variables is a css module that allows for the creation of custom properties that can be used over and over.
... css custom properties for cascading variables is a css module that allows for the creation of custom properties that can be used over and over.

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
d as a separate custom property to --my-color.
...firstparagraph { background-color: var(--first-color); color: var(--second-color); } #secondparagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph { background-color: var(--first-color); color: var(--second-color); } result specifications specification status comment css custom properties for cascading variables module level 1the definition of '--*' in that specification.

CSS Charsets - CSS: Cascading Style Sheets
css charsets is a module of css that lets you specify the character set used in the style sheet.
... css charsets is a module of css that lets you specify the character set used in the style sheet.

CSS Conditional Rules - CSS: Cascading Style Sheets
css conditional rules is a css module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.
... css conditional rules is a css module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.

CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of css that lets you define the size, zoom factor, and orientation of the viewport.
... css device adaptation is a module of css that lets you define the size, zoom factor, and orientation of the viewport.

CSS Fragmentation - CSS: Cascading Style Sheets
css fragmentation is a module of css that defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.
... inline box wraps onto multiple lines.

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
/ 1 / 4 / 2; } .box2 { grid-area: 1 / 3 / 3 / 4; } .box3 { grid-area: 1 / 2 / 2 / 3; } .box4 { grid-area: 3 / 2 / 4 / 4; } this order of values for grid-area can seem a little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example.
...grid-column-end: -3; grid-row-start: -1; grid-row-end: -2; } .box4 { grid-column-start: -2; grid-column-end: -4; grid-row-start: -3; grid-row-end: -4; } stretching an item across the grid being able to address the start and end lines of the grid is useful as you can then stretch an item right across the grid with: .item { grid-column: 1 / -1; } gutters or alleys the css grid specification includes the ability to add gutters between column and row tracks with the grid-column-gap and grid-row-gap properties.

CSS Masking - CSS: Cascading Style Sheets
css masking is a css module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.
...of visual elements.

CSS Namespaces - CSS: Cascading Style Sheets
css namespaces is a css module that allows authors to specify xml namespaces in css.
... css namespaces is a css module that allows authors to specify xml namespaces in css.

CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of css that provides the rendering model and formatting controls related to the display of ruby annotation.
...controls related to the display of ruby annotation.

CSS Table - CSS: Cascading Style Sheets
css table is a css module that defines how to lay out table data.
... css table is a css module that defines how to lay out table data.

CSS Text Decoration - CSS: Cascading Style Sheets
css text decoration is a module of css that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.
...e users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level 4 working draft css text decoration module level 3 candidate recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...

Microsoft CSS extensions - CSS: Cascading Style Sheets
microsoft applications such as edge and internet explorer support a number of special microsoft extensions to css.
...-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries.
...start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.

WebKit CSS extensions - CSS: Cascading Style Sheets
applications based on webkit or blink, such as safari and chrome, support a number of special webkit extensions to css.
...ks to the new synax.

CSS Flow Layout - CSS: Cascading Style Sheets
er are block level, displaying one under the other.

CSS Miscellaneous - CSS: Cascading Style Sheets
these pages contain css properties that are highly experimental or don't fit in any other categories.

CSS Motion Path - CSS: Cascading Style Sheets
motion path is a css module that allows authors to animate any graphical object along a custom path.

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document.

Animatable CSS properties - CSS: Cascading Style Sheets
certain css properties can be animated using css animations or css transitions.

CSS3 - Archive of obsolete content
css3 is the latest evolution of the cascading style sheets language and aims at extending css2.1.
...ot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
...nments, or used with extreme caution as both their syntax and semantics can change in the future.
...And 139 more matches

Using the CSS Typed Object Model - Web APIs
the css typed object model api exposes css values as typed javascript objects to allow their performant manipulation.
... the css typed object model api exposes css values as typed javascript objects to allow their performant manipulation.
... the css typed object model api exposes css values as typed javascript objects to allow their performant manipulation.
...And 117 more matches

How CSS is structured - Learn web development
previous overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
... previous overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
... previous overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
...And 88 more matches

Organizing your CSS - Learn web development
previous overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
... previous overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
...challenging.
...And 77 more matches

CSS Typed Object Model API - Web APIs
the css typed object model api simplifies css property manipulation by exposing css values as typed javascript objects rather than strings.
... the css typed object model api simplifies css property manipulation by exposing css values as typed javascript objects rather than strings.
... the css typed object model api simplifies css property manipulation by exposing css values as typed javascript objects rather than strings.
...And 75 more matches

Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...wser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...And 65 more matches

CSS: Cascading Style Sheets
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
... cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
... cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
...And 49 more matches

The Firefox codebase: CSS Guidelines
this document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
... this document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
... this document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
...And 48 more matches

CSSPrimitiveValue - Web APIs
the cssprimitivevalue interface derives from the cssvalue interface and represents the current computed value of a css property.
... the cssprimitivevalue interface derives from the cssvalue interface and represents the current computed value of a css property.
...he cssprimitivevalue interface derives from the cssvalue interface and represents the current computed value of a css property.
...And 48 more matches

What is CSS? - Learn web development
overview: first steps next css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
... overview: first steps next css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
...allows you to create great-looking web pages, but how does it work under the hood?
...And 46 more matches

CSSRule - Web APIs
the cssrule interface represents a single css rule.
... the cssrule interface represents a single css rule.
... the cssrule interface represents a single css rule.
...And 43 more matches

Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
...aint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
...And 41 more matches

CSS - Archive of obsolete content
obsolete css features -moz-bindingthe -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element.-moz-border-bottom-colorsin mozilla applications like firefox, the -moz-border-bottom-colors css property sets a list of colors for the bottom border.-moz-border-left-colorsin mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border.-moz-border-right-colorsin mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border.-moz-border-top-colorsin mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property.
...der-top-colors css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property.
...sizing-moz-stack-sizing is an extended css property.
...And 38 more matches

CSSStyleDeclaration - Web APIs
the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-related methods and properties.
... the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-related methods and properties.
... the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-related methods and properties.
...And 36 more matches

Debugging CSS - Learn web development
previous overview: building blocks next sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect.
... previous overview: building blocks next sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect.
...a different size than you expected.
...And 35 more matches

Getting started with CSS - Learn web development
previous overview: first steps next in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
...ious overview: first steps next in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
...tml document and apply css to it, learning some practical things about the language along the way.
...And 35 more matches

CSSNumericValue - Web APIs
the cssnumericvalue interface of the css typed object model api represents operations that all numeric values can perform.
... the cssnumericvalue interface of the css typed object model api represents operations that all numeric values can perform.
... the cssnumericvalue interface of the css typed object model api represents operations that all numeric values can perform.
...And 35 more matches

CSS Houdini
houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
... houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
... houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
...And 34 more matches

CSS building blocks - Learn web development
this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper.
...first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper.
...h using it, its time to dive a bit deeper.
...And 31 more matches

CSSPrimitiveValue.primitiveType - Web APIs
the primitivetype read-only property of the cssprimitivevalue interface represents the type of a css value.
... the primitivetype read-only property of the cssprimitivevalue interface represents the type of a css value.
... the primitivetype read-only property of the cssprimitivevalue interface represents the type of a css value.
...And 31 more matches

attr() - CSS: Cascading Style Sheets
note: the attr() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
... note: the attr() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
...nt's originating element is returned.
...And 31 more matches

Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html.
... cascading stylesheets — or css — is the first technology you should start learning after html.
... cascading stylesheets — or css — is the first technology you should start learning after html.
...And 30 more matches

CSS basics - Learn web development
previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
... previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
... previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
...And 30 more matches

How CSS works - Learn web development
previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
... previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
...learned the basics of css, what it is for and how to write simple stylesheets.
...And 29 more matches

CSS values and units - Learn web development
previous overview: building blocks next every property used in css has a value or set of values that are allowed for that property, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
...operty, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
...g a look at any property page on mdn will help you understand the values that are valid for any particular property.
...And 28 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
with flexbox using the native support of current browsers.
... webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
...owser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
...And 28 more matches

font - CSS: Cascading Style Sheets
the font css shorthand property sets all the different properties of an element's font.
...equest.
...f font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value.
...And 28 more matches

Adding a new CSS property
this page describes how to add a new css property to the style system.
...ly contain only properties set/reset by a particular common shorthand property; this improves the effectiveness of some of the performance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct.
... you're going to use (or that the property is a shorthand), you can add appropriate entry to nscssproplist.h.
...And 27 more matches

<color> - CSS: Cascading Style Sheets
the <color> css data type represents a color in the srgb color space.
...: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
...color keywords are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen.
...And 27 more matches

CSS numeric factory functions - Web APIs
the css numeric factory functions, such as css.em() and css.turn() are methods that return cssunitvalues with the value being the numeric argument and the unit being the name of the method used.
... the css numeric factory functions, such as css.em() and css.turn() are methods that return cssunitvalues with the value being the numeric argument and the unit being the name of the method used.
... the css numeric factory functions, such as css.em() and css.turn() are methods that return cssunitvalues with the value being the numeric argument and the unit being the name of the method used.
...And 25 more matches

CSSPrimitiveValue.getFloatValue() - Web APIs
the getfloatvalue() method of the cssprimitivevalue interface is used to get a float value in a specified unit.
... the getfloatvalue() method of the cssprimitivevalue interface is used to get a float value in a specified unit.
... the getfloatvalue() method of the cssprimitivevalue interface is used to get a float value in a specified unit.
...And 25 more matches

Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test.
... feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test.
... feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test.
...And 25 more matches

CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer.
... in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer.
...ctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> when at all possible, you should just use the html5 doctype.
...And 24 more matches

Examine and edit CSS - Firefox Developer Tools
you can examine and edit css in the inspector's css pane.
... you can examine and edit css in the inspector's css pane.
... you can examine and edit css in the inspector's css pane.
...And 24 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the use of color is a fundamental form of human expression.
... fundamental form of human expression.
... of ways to add color to your html elements to create just the look you want.
...And 24 more matches

CSSStyleSheet - Web APIs
the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
... the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
... the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
...And 23 more matches

CSSGroupingRule - Web APIs
an object implementing the cssgroupingrule interface represents any css at-rule that contains other rules nested within it.
... an object implementing the cssgroupingrule interface represents any css at-rule that contains other rules nested within it.
... an object implementing the cssgroupingrule interface represents any css at-rule that contains other rules nested within it.
...And 22 more matches

CSSRuleList - Web APIs
a cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of cssrule objects.
... a cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of cssrule objects.
... a cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of cssrule objects.
...And 22 more matches

Specificity - CSS: Cascading Style Sheets
specificity is the means by which browsers decide which css property values are the most relevant to an element and, therefore, will be applied.
... specificity is the means by which browsers decide which css property values are the most relevant to an element and, therefore, will be applied.
... specificity is the means by which browsers decide which css property values are the most relevant to an element and, therefore, will be applied.
...And 22 more matches

CSS and JavaScript animation performance - Web Performance
animations are critical for a pleasurable user experience on many applications.
... animations are critical for a pleasurable user experience on many applications.
... animations are critical for a pleasurable user experience on many applications.
...And 22 more matches

CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
... previous overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
... css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
...And 21 more matches

Variable fonts guide - CSS: Cascading Style Sheets
variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
...(off or on).
...nt, italic, and optical size.
...And 21 more matches

CSSMediaRule - Web APIs
the cssmediarule interface represents a single css @media rule.
... the cssmediarule interface represents a single css @media rule.
... the cssmediarule interface represents a single css @media rule.
...And 20 more matches

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
</script> note that this example is not well formed xhtml since the use of raw < is only allowed as a part of markup in xhtml or xml.
...r i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
... alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
...And 19 more matches

CSS performance optimization - Learn web development
previous overview: performance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience.
... previous overview: performance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience.
... previous overview: performance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience.
...And 19 more matches

Styling Vue components with CSS - Learn web development
previous overview: client-side javascript frameworks next the time has finally come to make our app look a bit nicer.
... previous overview: client-side javascript frameworks next the time has finally come to make our app look a bit nicer.
... of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure.
...And 19 more matches

CSSNumericValue.equals() - Web APIs
the equals() method of the cssnumericvalue interface returns a boolean indicating whether the passed value are strictly equal.
... the equals() method of the cssnumericvalue interface returns a boolean indicating whether the passed value are strictly equal.
... the equals() method of the cssnumericvalue interface returns a boolean indicating whether the passed value are strictly equal.
...And 19 more matches

CSSPrimitiveValue.setFloatValue() - Web APIs
the setfloatvalue() method of the cssprimitivevalue interface is used to set a float value.
... the setfloatvalue() method of the cssprimitivevalue interface is used to set a float value.
...operty attached to this value can't accept the specified unit or the float value, the value will be unchanged and a domexception will be raised.
...And 19 more matches

Box-shadow generator - CSS: Cascading Style Sheets
this tool lets you construct css box-shadow effects, to add box shadow effects to your css objects.
... <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" ...
...m"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .s...
...And 19 more matches

Introduction to CSS layout - Learn web development
overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
... overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
... overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
...And 18 more matches

@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
... the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
... the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
...And 18 more matches

Shorthand properties - CSS: Cascading Style Sheets
shorthand properties are css properties that let you set the values of multiple other css properties simultaneously.
... shorthand properties are css properties that let you set the values of multiple other css properties simultaneously.
... shorthand properties are css properties that let you set the values of multiple other css properties simultaneously.
...And 18 more matches

Syntax - CSS: Cascading Style Sheets
the basic goal of the cascading stylesheet (css) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations.
... the basic goal of the cascading stylesheet (css) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations.
...tions.
...And 18 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
in this article we will take a look at how flexbox fits in with all the other css modules.
... in this article we will take a look at how flexbox fits in with all the other css modules.
... in this article we will take a look at how flexbox fits in with all the other css modules.
...And 17 more matches

Fundamental CSS comprehension - Learn web development
n is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.
...comprehension of fundamental css theory, syntax and mechanics.
...nt to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.
...And 16 more matches

CSSKeyframesRule - Web APIs
the csskeyframesrule interface describes an object representing a complete set of keyframes for a css animation.
... the csskeyframesrule interface describes an object representing a complete set of keyframes for a css animation.
... the csskeyframesrule interface describes an object representing a complete set of keyframes for a css animation.
...And 16 more matches

Using multi-column layouts - CSS: Cascading Style Sheets
the css multi-column layout module extends the block layout mode to allow the easy definition of multiple columns of text.
... of text.
...which line they were on.
...And 16 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
kground </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-s...
...'images/arrow.svg'); background-size: 24px 24px; position: absolute; right: -10px; top: -9.5px; } /** * output */ #output { width: 100%; padding: 10px 0; margin: 20px 0 50px 0; border: 2px dashed #ccc; border-radius: 5px; display: table; font-size: 13px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #output .css-property { width: 90%; margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-wrap: break-word; display: block; right: 0; } javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function g...
...ener('mousedown', resizestart); elem.appendchild(handle); }; return { makeresizable : makeresizable }; })(); /** * gradient point */ var gradientpoint = function gradientpoint(axis) { var point = document.createelement('div'); point.classname = 'gradient-point'; this.position = 0; this.node = point; this.axis = axis; this.color = new hsvcolor(0, 0, 100); this.csscolor = this.color.getcolor(); this.cssposition = 0; this.prevpoint = null; this.nextpoint = null; this.axis.num_points++; point.addeventlistener('click', this.activate.bind(this)); trackmouse(point, this.updatepositionm.bind(this), this.startmove.bind(this), this.endmove.bind(this)); axis.line.appendchild(point); return this; }; gradientpoint.prototype.deletepoint = funct...
...And 16 more matches

Visual formatting model - CSS: Cascading Style Sheets
in css the visual formatting model describes how user agents take the document tree, and process and display it for visual media.
...tes zero or more boxes according to the box model.
...d absolute positioning).
...And 16 more matches

CSS - Web APIs
the css interface holds useful css-related methods.
... the css interface holds useful css-related methods.
... the css interface holds useful css-related methods.
...And 15 more matches

CSSCounterStyleRule - Web APIs
the csscounterstylerule interface represents an @counter-style at-rule.
... this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" ...
..." height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 15 more matches

display - CSS: Cascading Style Sheets
the display css property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
...ildren, such as flow layout, grid or flex.
...ype sets an element's participation in flow layout; the inner type sets the layout of children.
...And 15 more matches

url() - CSS: Cascading Style Sheets
the url() css function is used to include a file.
... the url() css function is used to include a file.
...; src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...And 15 more matches

Writing Skinnable XUL and CSS - Archive of obsolete content
the following document outlines rules that one must abide by when writing a skin.
...our particular mozilla skin, there is a special package calledglobal.
...e is a special package calledglobal.
...And 14 more matches

CSSMathValue.operator - Web APIs
the cssmathvalue.operator read-only property of the cssmathvalue interface indicates the operator that the current subtype represents.
... the cssmathvalue.operator read-only property of the cssmathvalue interface indicates the operator that the current subtype represents.
... the cssmathvalue.operator read-only property of the cssmathvalue interface indicates the operator that the current subtype represents.
...And 14 more matches

CSSStyleValue - Web APIs
the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api.
... the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api.
... the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api.
...And 14 more matches

CSSSupportsRule - Web APIs
the csssupportsrule interface describes an object representing a single css @supports at-rule.
... the csssupportsrule interface describes an object representing a single css @supports at-rule.
... the csssupportsrule interface describes an object representing a single css @supports at-rule.
...And 14 more matches

CSSUnparsedValue - Web APIs
the cssunparsedvalue interface of the css typed object model api represents property values that reference custom properties.
... the cssunparsedvalue interface of the css typed object model api represents property values that reference custom properties.
... the cssunparsedvalue interface of the css typed object model api represents property values that reference custom properties.
...And 14 more matches

CSS selectors - Learn web development
previous overview: building blocks next in css, selectors are used to target the html elements on our web pages that we want to style.
... previous overview: building blocks next in css, selectors are used to target the html elements on our web pages that we want to style.
... variety of css selectors available, allowing for fine-grained precision when selecting elements to style.
...And 13 more matches

Use CSS to solve common problems - Learn web development
the following links provide solutions to common problems you may face when working with css.
... the following links provide solutions to common problems you may face when working with css.
... the following links provide solutions to common problems you may face when working with css.
...And 13 more matches

CSSMathSum - Web APIs
the cssmathsum interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathsum interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathsum interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
...And 13 more matches

CSSPageRule - Web APIs
csspagerule is an interface representing a single css @page rule.
... csspagerule is an interface representing a single css @page rule.
... csspagerule is an interface representing a single css @page rule.
...And 13 more matches

CSSStyleSheet.insertRule() - Web APIs
the cssstylesheet.insertrule() method inserts a new css rule into the current style sheet, with some restrictions.
... the cssstylesheet.insertrule() method inserts a new css rule into the current style sheet, with some restrictions.
... the cssstylesheet.insertrule() method inserts a new css rule into the current style sheet, with some restrictions.
...And 13 more matches

CSSValue - Web APIs
the cssvalue interface represents the current computed value of a css property.
... the cssvalue interface represents the current computed value of a css property.
... the cssvalue interface represents the current computed value of a css property.
...And 13 more matches

<url> - CSS: Cascading Style Sheets
the <url> css data type denotes a pointer to a resource, such as an image or a font.
... the <url> css data type denotes a pointer to a resource, such as an image or a font.
...<url> css data type denotes a pointer to a resource, such as an image or a font.
...And 13 more matches

CSS property compatibility table for form controls - Learn web development
the following compatibility tables try to summarize the state of css support for html forms.
... the following compatibility tables try to summarize the state of css support for html forms.
... and you should avoid it.
...And 12 more matches

CSSConditionRule - Web APIs
an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block.
... an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block.
... an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block.
...And 12 more matches

CSSMathValue - Web APIs
the cssmathvalue interface of the css typed object model api a base class for classes representing complex numeric values.
... the cssmathvalue interface of the css typed object model api a base class for classes representing complex numeric values.
... the cssmathvalue interface of the css typed object model api a base class for classes representing complex numeric values.
...And 12 more matches

::before (:before) - CSS: Cascading Style Sheets
in css, ::before creates a pseudo-element that is the first child of the selected element.
...ild of the selected element.
... it is often used to add cosmetic content to an element with the content property.
...And 12 more matches

Alternative style sheets - CSS: Cascading Style Sheets
cessed from view > page style.
...rome requires an extension to use the feature (as of version 48).
...to use the feature (as of version 48).
...And 12 more matches

Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css, svg, and mobile devices — and differentiates between the visual viewport and the layout viewport.
...: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including padding (but not borders, margins, or vertical scrollbars, if present).
...dow.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including padding (but not borders, margins, or vertical scrollbars, if present).
...And 12 more matches

CSS first steps - Learn web development
css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... familiarity with html, as discussed in the introduction to html module.
...And 11 more matches

Animating CSS properties - Firefox Developer Tools
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
... the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
... the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
...And 11 more matches

CSSNamespaceRule - Web APIs
the cssnamespacerule interface describes an object representing a single css @namespace at-rule.
... the cssnamespacerule interface describes an object representing a single css @namespace at-rule.
... the cssnamespacerule interface describes an object representing a single css @namespace at-rule.
...And 11 more matches

CSSUnitValue - Web APIs
the cssunitvalue interface of the css typed object model api represents values that contain a single unit type.
... the cssunitvalue interface of the css typed object model api represents values that contain a single unit type.
... the cssunitvalue interface of the css typed object model api represents values that contain a single unit type.
...And 11 more matches

@import - CSS: Cascading Style Sheets
the @import css at-rule is used to import style rules from other style sheets.
...he resource to import.
...ue> ) ] | ( <ident> <any-value> )where <mf-plain> = <mf-name> : <mf-value><mf-boolean> = <mf-name><mf-range> = <mf-name> [ '<' | '>' ]?
...And 11 more matches

@supports - CSS: Cascading Style Sheets
the @supports css at-rule lets you specify declarations that depend on a browser's support for one or more specific css features.
...larations that depend on a browser's support for one or more specific css features.
...browser's support for one or more specific css features.
...And 11 more matches

Sizing items in CSS - Learn web development
previous overview: building blocks next in the various lessons so far you have come across a number of ways to size items on a web page using css.
... previous overview: building blocks next in the various lessons so far you have come across a number of ways to size items on a web page using css.
...how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via css and define a few terms around sizing that will help you in the future.
...And 10 more matches

CSS layout - Learn web development
at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
...already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
...And 10 more matches

CSSKeyframeRule - Web APIs
the csskeyframerule interface describes an object representing a set of style for a given keyframe.
... the csskeyframerule interface describes an object representing a set of style for a given keyframe.
... the csskeyframerule interface describes an object representing a set of style for a given keyframe.
...And 10 more matches

CSSUnitValue.value - Web APIs
the cssunitvalue.value property of the cssunitvalue interface returns a double indicating the number of units.
... the cssunitvalue.value property of the cssunitvalue interface returns a double indicating the number of units.
... the cssunitvalue.value property of the cssunitvalue interface returns a double indicating the number of units.
...And 10 more matches

::after (:after) - CSS: Cascading Style Sheets
in css, ::after creates a pseudo-element that is the last child of the selected element.
...hild of the selected element.
...t.
...And 10 more matches

Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-image values.
... </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </div> </div> </div> <div id="output" class="category"> <div class="title"> css code </div> <div class="css-property"> <span class="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> ...
...ty"> <span class="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-outset: </span> <span id="out-border-outset" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-repeat: </span> <span id="out-border-repeat" class="value"> </span> </div> <...
...And 10 more matches

background-size - CSS: Cascading Style Sheets
the background-size css property sets the size of the element's background image.
...ns (width-to-height ratio).
...adient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).
...And 10 more matches

<custom-ident> - CSS: Cascading Style Sheets
the <custom-ident> css data type denotes an arbitrary user-defined string used as an identifier.
... the <custom-ident> css data type denotes an arbitrary user-defined string used as an identifier.
...dentifiers.
...And 10 more matches

CSSStyleDeclaration.parentRule - Web APIs
the cssstyledeclaration.parentrule read-only property returns a cssrule that is the parent of this style block, e.g.
... the cssstyledeclaration.parentrule read-only property returns a cssrule that is the parent of this style block, e.g.
... the cssstyledeclaration.parentrule read-only property returns a cssrule that is the parent of this style block, e.g.
...And 9 more matches

CSSStyleDeclaration.setProperty() - Web APIs
the cssstyledeclaration.setproperty() method interface sets a new value for a property on a css style declaration object.
... the cssstyledeclaration.setproperty() method interface sets a new value for a property on a css style declaration object.
...ue, priority); parameters propertyname is a domstring representing the css property name (hyphen case) to be modified.
...And 9 more matches

CSSStyleValue.parse() - Web APIs
the parse() method of the cssstylevalue interface sets a specific css property to the specified values and returns the first value as a cssstylevalue object.
... the parse() method of the cssstylevalue interface sets a specific css property to the specified values and returns the first value as a cssstylevalue object.
... the parse() method of the cssstylevalue interface sets a specific css property to the specified values and returns the first value as a cssstylevalue object.
...And 9 more matches

ElementCSSInlineStyle.style - Web APIs
the style property is used to get as well as set the inline style of an element.
... the style property is used to get as well as set the inline style of an element.
... the style property is used to get as well as set the inline style of an element.
...And 9 more matches

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
pecifying fixed lengths for both dimensions if you use background-size to specify fixed lengths for both dimensions, those lengths are always used, per rule 1 above.
... will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.
...en this css: background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; the rendered output would look like this: source: one specified dimension, no intrinsic ratio given this css: background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; the rendered output would look like this: source: one specified dimension with intrinsic ratio given this css: background: url(100px-height-3x4-ratio.svg); background-size: 275px 125px; the rendered output would look like this: source: no specified width or height with intrinsic ratio given this css: background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; the rendered output would look like this: using contain or cover specifying cover for background-size makes the pictu...
...And 9 more matches

max-width - CSS: Cascading Style Sheets
the max-width css property sets the maximum width of an element.
...tage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.
...els wide or the width of the "parent," whichever is smaller.
...And 9 more matches

min-width - CSS: Cascading Style Sheets
the min-width css property sets the minimum width of an element.
...ied or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
...tage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
...And 9 more matches

position - CSS: Cascading Style Sheets
the position css property sets how an element is positioned in a document.
...of absolutely positioned boxes do not collapse with other margins.
...s not affect the position of any other elements.
...And 9 more matches

text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text.
... case as written in the element's text).
...ritten in the element's text).
...And 9 more matches

Chrome-only CSS reference
this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
...And 8 more matches

CSSKeywordValue - Web APIs
the csskeywordvalue interface of the the css typed object model api creates an object to represent css keywords and other identifiers.
... the csskeywordvalue interface of the the css typed object model api creates an object to represent css keywords and other identifiers.
... the csskeywordvalue interface of the the css typed object model api creates an object to represent css keywords and other identifiers.
...And 8 more matches

CSSNumericValue.add() - Web APIs
the add() method of the cssnumericvalue interface adds a supplied number to the cssnumericvalue.
... the add() method of the cssnumericvalue interface adds a supplied number to the cssnumericvalue.
... the add() method of the cssnumericvalue interface adds a supplied number to the cssnumericvalue.
...And 8 more matches

CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
... the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
... the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
...And 8 more matches

CSSStyleRule - Web APIs
cssstylerule represents a single css style rule.
... cssstylerule represents a single css style rule.
... cssstylerule represents a single css style rule.
...And 8 more matches

CSSStyleSheet.addRule() - Web APIs
the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
... the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
... the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
...And 8 more matches

CSSStyleSheet.rules - Web APIs
rules is a deprecated legacy property of the cssstylesheet interface.
... rules is a deprecated legacy property of the cssstylesheet interface.
... rules is a deprecated legacy property of the cssstylesheet interface.
...And 8 more matches

CSSValueList - Web APIs
the cssvaluelist interface derives from the cssvalue interface and provides the abstraction of an ordered collection of css values.
... the cssvaluelist interface derives from the cssvalue interface and provides the abstraction of an ordered collection of css values.
...aluelist are accessible via an integral index, starting from 0.
...And 8 more matches

CSS Properties and Values API - Web APIs
the css properties and values api — part of the css houdini umbrella of apis — allows developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
... the css properties and values api — part of the css houdini umbrella of apis — allows developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
... the css properties and values api — part of the css houdini umbrella of apis — allows developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...And 8 more matches

::first-line (:first-line) - CSS: Cascading Style Sheets
the ::first-line css pseudo-element applies styles to the first line of a block-level element.
... the ::first-line css pseudo-element applies styles to the first line of a block-level element.
...element.
...And 8 more matches

caption-side - CSS: Cascading Style Sheets
the caption-side css property puts the content of a table's <caption> on the specified side.
...lues */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below.
...tion-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below.
...And 8 more matches

content - CSS: Cascading Style Sheets
the content css property replaces an element with a generated value.
...s the "alt text" for the element.
...bute x as a string.
...And 8 more matches

Creating reusable content with CSS and XBL - Archive of obsolete content
this page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.
... you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.
... simple demonstration.
...And 7 more matches

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
... css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
... css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
...And 7 more matches

CSS.supports() - Web APIs
the css.supports() method returns a boolean value indicating if the browser supports a given css feature, or not.
... the css.supports() method returns a boolean value indicating if the browser supports a given css feature, or not.
... the css.supports() method returns a boolean value indicating if the browser supports a given css feature, or not.
...And 7 more matches

CSSNumericValue.max() - Web APIs
the max() method of the cssnumericvalue interface returns the highest value from among the values passed.
... the max() method of the cssnumericvalue interface returns the highest value from among the values passed.
... the max() method of the cssnumericvalue interface returns the highest value from among the values passed.
...And 7 more matches

CSSNumericValue.min() - Web APIs
the min() method of the cssnumericvalue interface returns the lowest value from among those values passed.
... the min() method of the cssnumericvalue interface returns the lowest value from among those values passed.
... the min() method of the cssnumericvalue interface returns the lowest value from among those values passed.
...And 7 more matches

CSSNumericValue.mul() - Web APIs
the mul() method of the cssnumericvalue interface multiplies the cssnumericvalue by the supplied value.
... the mul() method of the cssnumericvalue interface multiplies the cssnumericvalue by the supplied value.
... the mul() method of the cssnumericvalue interface multiplies the cssnumericvalue by the supplied value.
...And 7 more matches

CSSNumericValue.sub() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
... the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
... the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
...And 7 more matches

CSSNumericValue.sum() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
... the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
... the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue.
...And 7 more matches

CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
... the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
... the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
...And 7 more matches

CSSUnitValue.unit - Web APIs
the cssunitvalue.unit read-only property of the cssunitvalue interface returns a usvstring indicating the type of unit.
... the cssunitvalue.unit read-only property of the cssunitvalue interface returns a usvstring indicating the type of unit.
... the cssunitvalue.unit read-only property of the cssunitvalue interface returns a usvstring indicating the type of unit.
...And 7 more matches

CSSVariableReferenceValue - Web APIs
the cssvariablereferencevalue interface of the css typed object model api allows you to create a custom name for a built-in css value.
... the cssvariablereferencevalue interface of the css typed object model api allows you to create a custom name for a built-in css value.
... the cssvariablereferencevalue interface of the css typed object model api allows you to create a custom name for a built-in css value.
...And 7 more matches

CSS Painting API - Web APIs
the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
... the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
... the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
...And 7 more matches

Using the CSS properties and values API - Web APIs
the css properties and values api — part of the css houdini umbrella of apis — allows the registration of css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...hecking, default values, and properties that do or do not inherit their value.
...eir value.
...And 7 more matches

::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
...tch.
...atibility table below.) a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element.
...And 7 more matches

@media - CSS: Cascading Style Sheets
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
... the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
... the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
...And 7 more matches

@page - CSS: Cascading Style Sheets
the @page css at-rule is used to modify some css properties when printing a document.
...cifies the target size and orientation of the page box’s containing block.
...age sheet, it also indicates the size of the destination page sheet.
...And 7 more matches

At-rules - CSS: Cascading Style Sheets
at-rules are css statements that instructs css how to behave.
... at-rules are css statements that instructs css how to behave.
...g up to the next semicolon, ';' (u+003b semicolon), or the next css block, whichever comes first.
...And 7 more matches

Block and inline layout in normal flow - CSS: Cascading Style Sheets
in this guide, we will explore the basics of how block and inline elements behave when they are part of the normal flow.
..., one after the other, beginning at the top of a containing block.
...model values in your browser devtools.
...And 7 more matches

OpenType font features guide - CSS: Cascading Style Sheets
or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others.
...e several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages.
...e actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features.
...And 7 more matches

Replaced elements - CSS: Cascading Style Sheets
in css, a replaced element is an element whose representation is outside the scope of css; they're external objects whose representation is independent of the css formatting model.
... in css, a replaced element is an element whose representation is outside the scope of css; they're external objects whose representation is independent of the css formatting model.
...ng model.
...And 7 more matches

Value definition syntax - CSS: Cascading Style Sheets
css value definition syntax, a formal grammar, is used for defining the set of valid values for a css property or function.
...ng the set of valid values for a css property or function.
...or a css property or function.
...And 7 more matches

<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations.
... color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively).
... the cubic-bezier() class of easing functions the cubic-bezier() functional notation defines a cubic bézier curve.
...And 7 more matches

font-weight - CSS: Cascading Style Sheets
the font-weight css property sets the weight (or boldness) of the font.
...e mapping section below.
... common weight name mapping.
...And 7 more matches

<length> - CSS: Cascading Style Sheets
the <length> css data type represents a distance value.
... the <length> css data type represents a distance value.
... the <length> css data type represents a distance value.
...And 7 more matches

max-height - CSS: Cascading Style Sheets
the max-height css property sets the maximum height of an element.
...tion typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
...t | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
...And 7 more matches

Used value - CSS: Cascading Style Sheets
the used value of a css property is its value after all calculations have been performed on the computed value.
... the used value of a css property is its value after all calculations have been performed on the computed value.
...putes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used w...
...And 7 more matches

writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
... content flows vertically from top to bottom.
... scripts, are set sideways toward the right.
...And 7 more matches

CSS preprocessor - MDN Web Docs Glossary: Definitions of Web-related terms
a css preprocessor is a program that lets you generate css from the preprocessor's own unique syntax.
... a css preprocessor is a program that lets you generate css from the preprocessor's own unique syntax.
... a css preprocessor is a program that lets you generate css from the preprocessor's own unique syntax.
...And 6 more matches

CSS.escape() - Web APIs
the css.escape() static method returns a cssomstring containing the escaped string passed as parameter, mostly for use as part of a css selector.
... the css.escape() static method returns a cssomstring containing the escaped string passed as parameter, mostly for use as part of a css selector.
... the css.escape() static method returns a cssomstring containing the escaped string passed as parameter, mostly for use as part of a css selector.
...And 6 more matches

CSSMathProduct - Web APIs
the cssmathproduct interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathproduct interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
... the cssmathproduct interface of the css typed object model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
...And 6 more matches

CSSNumericValue.parse() - Web APIs
the parse() method of the cssnumericvalue interface converts a value string into an object whose members are value and the units.
... the parse() method of the cssnumericvalue interface converts a value string into an object whose members are value and the units.
... the parse() method of the cssnumericvalue interface converts a value string into an object whose members are value and the units.
...And 6 more matches

CSSNumericValue.toSum() - Web APIs
the tosum() method of the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit.
... the tosum() method of the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit.
... the tosum() method of the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit.
...And 6 more matches

CSSPositionValue - Web APIs
the csspositionvalue interface of the the css typed object model api represents values for properties that take a position, for example object-position.
... the csspositionvalue interface of the the css typed object model api represents values for properties that take a position, for example object-position.
... the csspositionvalue interface of the the css typed object model api represents values for properties that take a position, for example object-position.
...And 6 more matches

CSSPrimitiveValue.getRectValue() - Web APIs
the getrectvalue() method of the cssprimitivevalue interface is used to get a rect value.
... the getrectvalue() method of the cssprimitivevalue interface is used to get a rect value.
... the getrectvalue() method of the cssprimitivevalue interface is used to get a rect value.
...And 6 more matches

system - CSS: Cascading Style Sheets
le.
...rts it, this example will render a list like this: ◉ one ◉ two ◉ three css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; } result fixed counter if your browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three 4 four 5 five css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; } result symbolic counter if your browser supports it, this example will render a list like this: a.
...</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; } result symbolic counter if your browser supports it, this example will render a list like this: a.
...And 6 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
css grid layout has been designed to work alongside other parts of css, as part of a complete system for doing the layout.
... css grid layout has been designed to work alongside other parts of css, as part of a complete system for doing the layout.
... css grid layout has been designed to work alongside other parts of css, as part of a complete system for doing the layout.
...And 6 more matches

background-image - CSS: Cascading Style Sheets
the background-image css property sets one or more background images on an element.
...d send us a pull request.
...tage> = <angle> | <percentage> examples layering background images note that the star image is partially transparent and is layered over the cat image.
...And 6 more matches

font-size - CSS: Cascading Style Sheets
the font-size css property sets the size of the font.
...his formula: em = desired element pixel value / parent element font-size in pixels for example, suppose the font-size of the body of the page is set to 16px.
...apts its length relative to the font that the reader chooses to use.
...And 6 more matches

font-variant - CSS: Cascading Style Sheets
the font-variant css shorthand property allows you to set all the font variants for a font.
... the font-variant css shorthand property allows you to set all the font variants for a font.
...2 (revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.
...And 6 more matches

text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block element or table-cell box.
...left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla placerat varius.
...t eros, suscipit sed dictum quis, accumsan a ligula.
...And 6 more matches

SVG and CSS - SVG: Scalable Vector Graphics
this page illustrates the application of css to the specialized language for creating graphics: svg.
... this page illustrates the application of css to the specialized language for creating graphics: svg.
...yles to them you should use css custom properties.
...And 6 more matches

Using CSS generated content - Learn web development
this article describes some ways in which you can use css to add content when a document is displayed.
... this article describes some ways in which you can use css to add content when a document is displayed.
...at share a stylesheet.
...And 5 more matches

CSSNumericValue.div() - Web APIs
the div() method of the cssnumericvalue interface divides the cssnumericvalue by the supplied value.
... the div() method of the cssnumericvalue interface divides the cssnumericvalue by the supplied value.
... the div() method of the cssnumericvalue interface divides the cssnumericvalue by the supplied value.
...And 5 more matches

CSSPrimitiveValue.getRGBColorValue() - Web APIs
the getrgbcolorvalue() method of the cssprimitivevalue interface is used to get an rgb color value.
... the getrgbcolorvalue() method of the cssprimitivevalue interface is used to get an rgb color value.
... the getrgbcolorvalue() method of the cssprimitivevalue interface is used to get an rgb color value.
...And 5 more matches

CSSPrimitiveValue.getStringValue() - Web APIs
the getstringvalue() method of the cssprimitivevalue interface is used to get a string value.
... the getstringvalue() method of the cssprimitivevalue interface is used to get a string value.
... the getstringvalue() method of the cssprimitivevalue interface is used to get a string value.
...And 5 more matches

CSSPrimitiveValue.setStringValue() - Web APIs
the setstringvalue() method of the cssprimitivevalue interface is used to set a string value.
... the setstringvalue() method of the cssprimitivevalue interface is used to set a string value.
...d to set a string value.
...And 5 more matches

CSSValueList.item() - Web APIs
the item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index.
... the item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index.
... the item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index.
...And 5 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode.
... the css 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode.
... how flow layout behaves when used with different document writing modes.
...And 5 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout introduces a two-dimensional grid system to css.
... css grid layout introduces a two-dimensional grid system to css.
... css grid layout introduces a two-dimensional grid system to css.
...And 5 more matches

background-position - CSS: Cascading Style Sheets
the background-position css property sets the initial position for each background image.
...es uses the background property to create a yellow, rectangular element containing a star image.
...g position, from first specified to last.
...And 5 more matches

border-color - CSS: Cascading Style Sheets
the border-color shorthand css property sets the color of an element's border.
...xamples and send us a pull request.
...border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.
...And 5 more matches

clear - CSS: Cascading Style Sheets
the clear css property sets whether an element must be moved below (cleared) floating elements that precede it.
... none | left | right | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
... background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...And 5 more matches

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
the column-gap css property sets the size of the gap (gutter) between an element's columns.
...d in a github repository.
...responding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows:...
...And 5 more matches

font-stretch - CSS: Cascading Style Sheets
the font-stretch css property selects a normal, condensed, or expanded face from a font.
...s the most condensed.
...ensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting font stretch percentages note that this example will only work in browsers that support <percentage> values.
...And 5 more matches

<image> - CSS: Cascading Style Sheets
the <image> css data type represents a two-dimensional image.
...of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... a single file, like some .ico formats.
...And 5 more matches

<percentage> - CSS: Cascading Style Sheets
the <percentage> css data type represents a percentage value.
...tage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.
...round-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification.
...And 5 more matches

<resolution> - CSS: Cascading Style Sheets
the <resolution> css data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
... the <resolution> css data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
... the <resolution> css data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
...And 5 more matches

CSSOMString - Web APIs
cssomstring is used to denote string data in cssom specifications and can refer to either domstring or usvstring.
... cssomstring is used to denote string data in cssom specifications and can refer to either domstring or usvstring.
... cssomstring is used to denote string data in cssom specifications and can refer to either domstring or usvstring.
...And 4 more matches

CSSStyleDeclaration.getPropertyPriority() - Web APIs
the cssstyledeclaration.getpropertypriority() method interface returns a domstring that provides all explicitly set priorities on the css property.
...e css property.
...ity(property); parameters property is a domstring representing the property name to be checked.
...And 4 more matches

CSSStyleDeclaration.getPropertyValue() - Web APIs
the cssstyledeclaration.getpropertyvalue() method interface returns a domstring containing the value of a specified css property.
...mstring containing the value of a specified css property.
...tax var value = style.getpropertyvalue(property); parameters property is a domstring representing the property name to be checked.
...And 4 more matches

CSSStyleDeclaration.removeProperty() - Web APIs
the cssstyledeclaration.removeproperty() method interface removes a property from a css style declaration object.
... the cssstyledeclaration.removeproperty() method interface removes a property from a css style declaration object.
...epresenting the property name to be removed.
...And 4 more matches

CSSStyleRule.selectorText - Web APIs
the cssrule.selectortext property gets the textual representation of the selector for the rule set.
... the cssrule.selectortext property gets the textual representation of the selector for the rule set.
... the cssrule.selectortext property gets the textual representation of the selector for the rule set.
...And 4 more matches

@document - CSS: Cascading Style Sheets
the @document css at-rule restricts the style rules contained within it based on the url of the document.
...url is matched by the regular expression provided.
...ed by single or double quotes.
...And 4 more matches

-webkit-transition - CSS: Cascading Style Sheets
the -webkit-transition boolean css media feature is a chrome extension whose value is true if the browsing context supports css transitions.
... the -webkit-transition boolean css media feature is a chrome extension whose value is true if the browsing context supports css transitions.
...nsitions.
...And 4 more matches

Tools - CSS: Cascading Style Sheets
css offers a number of powerful features that can be tricky to use, or have a number of parameters, so that it's helpful to be able to visualize them while you work on them.
... css offers a number of powerful features that can be tricky to use, or have a number of parameters, so that it's helpful to be able to visualize them while you work on them.
... so that it's helpful to be able to visualize them while you work on them.
...And 4 more matches

animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles.
...{ togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions.
... function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions.
...And 4 more matches

border-bottom-width - CSS: Cascading Style Sheets
the border-bottom-width css property sets the width of the bottom border of an element.
... document.
... <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
...And 4 more matches

border-width - CSS: Cascading Style Sheets
the border-width shorthand css property sets the width of an element's border.
... the border-width shorthand css property sets the width of an element's border.
... and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment ...
...And 4 more matches

calc() - CSS: Cascading Style Sheets
the calc() css function lets you perform calculations when specifying css property values.
...e .modal a final z-index value of 2.
...ckground-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
...And 4 more matches

column-span - CSS: Cascading Style Sheets
the column-span css property makes it possible for an element to span across all columns when its value is set to all.
...formal syntax none | all examples making a heading span columns in this example, the heading is made to span across all the columns of the article.
... article.
...And 4 more matches

<display-box> - CSS: Cascading Style Sheets
these keywords define whether an element generates display boxes at all.
...hese keywords define whether an element generates display boxes at all.
...rendering anything, use the visibility property instead.
...And 4 more matches

float - CSS: Cascading Style Sheets
the float css property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
...table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
... other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
...And 4 more matches

font-style - CSS: Cascading Style Sheets
the font-style css property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
...h an oblique face is slanted.
...ss fonts level 4 syntax in which font-style: oblique can accept an <angle>.
...And 4 more matches

<frequency> - CSS: Cascading Style Sheets
the <frequency> css data type represents a frequency dimension, such as the pitch of a speaking voice.
... the <frequency> css data type represents a frequency dimension, such as the pitch of a speaking voice.
... the <frequency> css data type represents a frequency dimension, such as the pitch of a speaking voice.
...And 4 more matches

inherit - CSS: Cascading Style Sheets
the inherit css keyword causes the element for which it is specified to take the computed value of the property from its parent element.
... the inherit css keyword causes the element for which it is specified to take the computed value of the property from its parent element.
... the inherit css keyword causes the element for which it is specified to take the computed value of the property from its parent element.
...And 4 more matches

Inheritance - CSS: Cascading Style Sheets
in css, inheritance controls what happens when no value is specified for a property on an element.
... in css, inheritance controls what happens when no value is specified for a property on an element.
... in css, inheritance controls what happens when no value is specified for a property on an element.
...And 4 more matches

initial - CSS: Cascading Style Sheets
the initial css keyword applies the initial (or default) value of a property to an element.
... the initial css keyword applies the initial (or default) value of a property to an element.
... the initial css keyword applies the initial (or default) value of a property to an element.
...And 4 more matches

<integer> - CSS: Cascading Style Sheets
the <integer> css data type is a special type of <number> that represents a whole number, whether positive or negative.
... the <integer> css data type is a special type of <number> that represents a whole number, whether positive or negative.
...unter-increment, grid-column, grid-row, and z-index.
...And 4 more matches

margin-left - CSS: Cascading Style Sheets
the margin-left css property sets the margin area on the left side of an element.
...to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification.
...h formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification.
...And 4 more matches

outline-style - CSS: Cascading Style Sheets
the outline-style css property sets the style of an element's outline.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g.
...der-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g.
...And 4 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
... the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
...e repeating gradient.
...And 4 more matches

Specified value - CSS: Cascading Style Sheets
the specified value of a css property is the value it receives from the document's style sheet.
...owing rules: if the document's style sheet explicitly specifies a value for the property, the given value will be used.
...ocument's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
...And 4 more matches

<string> - CSS: Cascading Style Sheets
the <string> css data type represents a sequence of characters.
... the <string> css data type represents a sequence of characters.
... to output new lines, you must escape them with a line feed character such as \a or \00000a.
...And 4 more matches

text-shadow - CSS: Cascading Style Sheets
the text-shadow css property adds shadows to text.
...adow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em georgia, serif; } <p class="white-text-with-blue-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> specifications specification status comment css text decoration module level 3the definition of 'text-shadow' in that specification.
...lass="white-text-with-blue-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> specifications specification status comment css text decoration module level 3the definition of 'text-shadow' in that specification.
...And 4 more matches

transform - CSS: Cascading Style Sheets
the transform css property lets you rotate, scale, skew, or translate an element.
... the transform css property lets you rotate, scale, skew, or translate an element.
...clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 4 more matches

white-space - CSS: Cascading Style Sheets
the white-space css property sets how white space inside an element is handled.
...nitial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magn...
...minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
...And 4 more matches

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
...rismo and variations on a grid experiments, and a live named grid area example from rachel andrew.
...And 3 more matches

CSSKeywordValue.value - Web APIs
the value property of the csskeywordvalue interface returns or sets the value of the csskeywordvalue.
... the value property of the csskeywordvalue interface returns or sets the value of the csskeywordvalue.
... the value property of the csskeywordvalue interface returns or sets the value of the csskeywordvalue.
...And 3 more matches

CSSNumericValue.to() - Web APIs
the to() method of the cssnumericvalue interface converts a numberic value from one unit to another.
... the to() method of the cssnumericvalue interface converts a numberic value from one unit to another.
... the to() method of the cssnumericvalue interface converts a numberic value from one unit to another.
...And 3 more matches

CSSPositionValue.x - Web APIs
the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis.
... the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis.
... the x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis.
...And 3 more matches

CSSPositionValue.y - Web APIs
the y property of the csspositionvalue interface returns the item's position along the vertical axis.
... the y property of the csspositionvalue interface returns the item's position along the vertical axis.
... the y property of the csspositionvalue interface returns the item's position along the vertical axis.
...And 3 more matches

CSSPrimitiveValue.getCounterValue() - Web APIs
the getcountervalue() method of the cssprimitivevalue interface is used to get the counter value.
... the getcountervalue() method of the cssprimitivevalue interface is used to get the counter value.
... the getcountervalue() method of the cssprimitivevalue interface is used to get the counter value.
...And 3 more matches

CSSPseudoElement.element - Web APIs
the element read-only property of the csspseudoelement interface returns a reference to the originating element of the pseudo-element, in other words its parent element.
... the element read-only property of the csspseudoelement interface returns a reference to the originating element of the pseudo-element, in other words its parent element.
... the element read-only property of the csspseudoelement interface returns a reference to the originating element of the pseudo-element, in other words its parent element.
...And 3 more matches

CSSPseudoElement.type - Web APIs
the type read-only property of the csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a css selector.
... the type read-only property of the csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a css selector.
... the type read-only property of the csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a css selector.
...And 3 more matches

CSSStyleDeclaration.item() - Web APIs
the cssstyledeclaration.item() method interface returns a css property name from a cssstyledeclaration by index.
...on by index.
... name of the css property at the specified index.
...And 3 more matches

CSSStyleSheet.deleteRule() - Web APIs
the cssstylesheet method deleterule() removes a rule from the stylesheet object.
... the cssstylesheet method deleterule() removes a rule from the stylesheet object.
... the cssstylesheet method deleterule() removes a rule from the stylesheet object.
...And 3 more matches

CSSStyleSheet.ownerRule - Web APIs
the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document.
... the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document.
... the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document.
...And 3 more matches

CSSStyleSheet.removeRule() - Web APIs
the obsolete cssstylesheet method removerule() removes a rule from the stylesheet object.
... the obsolete cssstylesheet method removerule() removes a rule from the stylesheet object.
... the obsolete cssstylesheet method removerule() removes a rule from the stylesheet object.
...And 3 more matches

CSSStyleValue.parseAll() - Web APIs
the parseall() method of the cssstylevalue interface sets all occurences of a specific css property to the specified value and returns an array of cssstylevalue objects, each containing one of the supplied values.
... the parseall() method of the cssstylevalue interface sets all occurences of a specific css property to the specified value and returns an array of cssstylevalue objects, each containing one of the supplied values.
... the parseall() method of the cssstylevalue interface sets all occurences of a specific css property to the specified value and returns an array of cssstylevalue objects, each containing one of the supplied values.
...And 3 more matches

CSSUnparsedValue.length - Web APIs
the length read-only property of the cssunparsedvalue interface returns the number of items in the object.
... the length read-only property of the cssunparsedvalue interface returns the number of items in the object.
... the length read-only property of the cssunparsedvalue interface returns the number of items in the object.
...And 3 more matches

ElementCSSInlineStyle - Web APIs
the elementcssinlinestyle mixin describes cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces.
... the elementcssinlinestyle mixin describes cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces.
... the elementcssinlinestyle mixin describes cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces.
...And 3 more matches

::marker - CSS: Cascading Style Sheets
the ::marker css pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
... the ::marker css pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
... and <summary> elements.
...And 3 more matches

:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an element (such as a button) that is being activated by the user.
...heir associated <label>.
...ith multi-button mice, css3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
...And 3 more matches

:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id matching the url's fragment.
...ref="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this paragraph</i> using a url fragment.
... <i>another paragraph</i>, also accessible from the links above.
...And 3 more matches

:visited - CSS: Cascading Style Sheets
the :visited css pseudo-class represents links that the user has already visited.
...ver, or :active) that has at least equal specificity.
...d with :visited.
...And 3 more matches

font-weight - CSS: Cascading Style Sheets
the font-weight css descriptor allows authors to specify font weights for the fonts specified in the @font-face rule.
...the fonts specified in the @font-face rule.
...described in the common weight name mapping section below.
...And 3 more matches

@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
...ossible to customize the font beyond the basics while making it possible to do so without relying on an internet connection.
...font beyond the basics while making it possible to do so without relying on an internet connection.
...And 3 more matches

@keyframes - CSS: Cascading Style Sheets
the @keyframes css at-rule controls the intermediate steps in a css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
...fining styles for keyframes (or waypoints) along the animation sequence.
...orm: translatex(100%); } } values <custom-ident> a name identifying the keyframe list.
...And 3 more matches

-webkit-animation - CSS: Cascading Style Sheets
the -webkit-animation boolean css media feature is a chrome extension whose value is true if vendor-prefixed css animations are supported.
... the -webkit-animation boolean css media feature is a chrome extension whose value is true if vendor-prefixed css animations are supported.
...the -webkit-animation boolean css media feature is a chrome extension whose value is true if vendor-prefixed css animations are supported.
...And 3 more matches

-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
... the -webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
... the -webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
...And 3 more matches

-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
... the -webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
... the -webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
...And 3 more matches

shape - CSS: Cascading Style Sheets
the shape css media feature can be used to test the shape of the device to distinguish recrangular and round displays.
...g a circular, oval or elliptical screen.
...ctively rounded designs are appropriate.
...And 3 more matches

Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size css property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
... doing so, you can scale the image upward or downward as desired.
...x; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
...And 3 more matches

Using URL values for the cursor property - CSS: Cascading Style Sheets
gecko 1.8 supports url values for the css cursor property on windows and linux.
... gecko 1.8 supports url values for the css cursor property on windows and linux.
...on windows and linux.
...And 3 more matches

Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" da...
..."delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; ...
...init = function init() { uicolorpicker.init(); inputslidermanager.init(); colorinfo.init(); colorpalette.init(); colorpickersamples.init(); canvassamples.init(); tool.init(); }; return { init : init }; })(); this tool makes it easy to create, adjust, and experiment with custom colors for the web.
...And 3 more matches

Using media queries - CSS: Cascading Style Sheets
media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs.
...wport width).
..., the media type is optional and the all type will be implied.
...And 3 more matches

Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
...st, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
...tors level 3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
...And 3 more matches

all - CSS: Cascading Style Sheets
the all shorthand css property resets all of an element's properties except unicode-bidi, direction, and css custom properties.
...ties to their initial or inherited values, or to the values specified in another stylesheet origin.
... the source for this interactive example is stored in a github repository.
...And 3 more matches

background-attachment - CSS: Cascading Style Sheets
the background-attachment css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
...mputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
...ng to one of the doors of the hall; but, alas!
...And 3 more matches

background-repeat - CSS: Cascading Style Sheets
the background-repeat css property sets how background images are repeated.
... original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added.
...ml <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { backgroun...
...And 3 more matches

border-bottom - CSS: Cascading Style Sheets
the border-bottom shorthand css property sets an element's bottom border.
...tted; border-bottom: thick green; ...
...> <percentage> [ / <alpha-value> ]?
...And 3 more matches

border-left - CSS: Cascading Style Sheets
the border-left shorthand css property set an element's left border.
...ft-style: dotted; border-left: thick green; ...
...tage> <percentage> [ / <alpha-value> ]?
...And 3 more matches

border-right - CSS: Cascading Style Sheets
the border-right shorthand css property sets the properties of an element's right border.
...le: dotted; border-right: thick green; ...
...entage> [ / <alpha-value> ]?
...And 3 more matches

border-style - CSS: Cascading Style Sheets
the border-style shorthand css property sets the line style for all four sides of an element's border.
...e border-style shorthand css property sets the line style for all four sides of an element's border.
...ll the property values.
...And 3 more matches

border-top - CSS: Cascading Style Sheets
the border-top shorthand css property sets all the properties of an element's top border.
...rder-top-style: dotted; border-top: thick green; ...
...entage> <percentage> [ / <alpha-value> ]?
...And 3 more matches

border - CSS: Cascading Style Sheets
the border shorthand css property sets an element's border.
...operty sets an element's border.
...-value> ]?
...And 3 more matches

box-orient - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
...ut its contents vertically.
...And 3 more matches

box-sizing - CSS: Cascading Style Sheets
the box-sizing css property sets how the total width and height of an element is calculated.
... the box-sizing css property sets how the total width and height of an element is calculated.
...ight, you have to adjust the value you give to allow for any border or padding that may be added.
...And 3 more matches

break-after - CSS: Cascading Style Sheets
the break-after css property sets how page, column, or region breaks should behave after a generated box.
...pis leo, malesuada quis nisl nec, volutpat egestas tellus.
...cies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification.
...And 3 more matches

break-before - CSS: Cascading Style Sheets
the break-before css property sets how page, column, or region breaks should behave before a generated box.
...pis leo, malesuada quis nisl nec, volutpat egestas tellus.
...ies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification.
...And 3 more matches

break-inside - CSS: Cascading Style Sheets
the break-inside css property sets how page, column, or region breaks should behave inside a generated box.
...lum gravida.
...umn-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in that specification.
...And 3 more matches

color - CSS: Cascading Style Sheets
the color css property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
... on other properties and is the default for other color properties, such as border-color.
...owing are all ways to make a paragraph's text red: p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%, 50%); } /* 50% translucent */ p { color: #ff000080; } p { color: rgba(255, 0, 0, 0.5); } p { color: hsla(0, 100%, 50%, 0.5); } specifications specification status comment css color module level 4the definition of 'color' in that specification.
...And 3 more matches

counter() - CSS: Cascading Style Sheets
the counter() css function returns a string representing the current value of the named counter, if there is one.
...an be used, theoretically, anywhere a <string> value is supported.
...d east asian or ethiopic predefined counter style, or other predefined counter style.
...And 3 more matches

counters() - CSS: Cascading Style Sheets
the counters() css function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.
...to decimal if no style is specified.
...-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> ...
...And 3 more matches

<dimension> - CSS: Cascading Style Sheets
the <dimension> css data type represents a <number> with a unit attached to it, for example 10px.
... the <dimension> css data type represents a <number> with a unit attached to it, for example 10px.
...points 2200ms 2200 milliseconds 5s 5 seconds 200hz 200 hertz 200hz 200 hertz (values are case insensitive) invalid dimensions 12 px the unit must come immediately after the number.
...And 3 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
firefox 70 implemented the two-value syntax for the display property, which is part of the css display module level 3.
... firefox 70 implemented the two-value syntax for the display property, which is part of the css display module level 3.
...operty.
...And 3 more matches

font-size-adjust - CSS: Cascading Style Sheets
the font-size-adjust css property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).
...er formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.
...: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.
...And 3 more matches

font-variation-settings - CSS: Cascading Style Sheets
the font-variation-settings css property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.
...font-weight range.
...tom axes variable font axes come in two types: registered and custom.
...And 3 more matches

gap (grid-gap) - CSS: Cascading Style Sheets
the gap css property sets the gaps (gutters) between rows and columns.
... the gap css property sets the gaps (gutters) between rows and columns.
...de absolute, and normal computing to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>?
...And 3 more matches

height - CSS: Cascading Style Sheets
the height css property specifies the height of an element.
...rmal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
...ls tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
...And 3 more matches

linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.
...he gradient's axis).
...tops of lower value will override the value of the previous color stop creating a hard transition.
...And 3 more matches

<number> - CSS: Cascading Style Sheets
the <number> css data type represents a number, being either an integer or a number with a fractional component.
... the <number> css data type represents a number, being either an integer or a number with a fractional component.
... with a leading - .60 fractional number without a leading zero 10e3 scientific notation -3.4e-2 complicated scientific notation invalid numbers 12.
...And 3 more matches

padding - CSS: Cascading Style Sheets
the padding css shorthand property sets the padding area on all four sides of an element at once.
... to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...dding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and...
...And 3 more matches

<position> - CSS: Cascading Style Sheets
the <position> (or <bg-position>) css data type denotes a two-dimensional coordinate used to set a location relative to an element box.
...y.
...amples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification.
...And 3 more matches

resize - CSS: Cascading Style Sheets
the resize css property sets whether an element is resizable, and if so, in which directions.
... elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
...re.</textarea> css textarea { resize: none; /* disables resizability */ } result using resize with arbitrary elements you can use the resize property to make any element resizable.
...And 3 more matches

revert - CSS: Cascading Style Sheets
the revert css keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
...rd reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
...e of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
...And 3 more matches

text-decoration - CSS: Cascading Style Sheets
the text-decoration shorthand css property sets the appearance of decorative lines on text.
...p { text-decoration: underline; } would cause the entire paragraph to be underlined.
...e users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
...And 3 more matches

text-overflow - CSS: Cascading Style Sheets
the text-overflow css property sets how hidden overflow content is signaled to users.
...y an ellipsis ('…'), or display a custom string.
...t is applied.
...And 3 more matches

transition - CSS: Cascading Style Sheets
the transition css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
...ontribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...d as one or more single-property transitions, separated by commas.
...And 3 more matches

unset - CSS: Cascading Style Sheets
the unset css keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
... the unset css keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
...yword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
...And 3 more matches

Test your skills: CSS and JavaScript accessibility - Learn web development
this aim of this skill test is to assess whether you've understood our css and javascript accessibility best practices article.
...ther you've understood our css and javascript accessibility best practices article.
...uleset with the a selector is supplied by some cms, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the list.
...And 2 more matches

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... over an element in the html pane, you will see a tooltip that gives you more information about the element.
...in the html pane, you will see a tooltip that gives you more information about the element.
...And 2 more matches

CSS.paintWorklet (Static property) - Web APIs
paintworklet is a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
... paintworklet is a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
...a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
...And 2 more matches

CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
...he css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
...And 2 more matches

CSSMathProduct.values - Web APIs
the cssmathproduct.values read-only property of the cssmathproduct interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
... the cssmathproduct.values read-only property of the cssmathproduct interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
... the cssmathproduct.values read-only property of the cssmathproduct interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
...And 2 more matches

CSSMathSum.values - Web APIs
the cssmathsum.values read-only property of the cssmathsum interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
... the cssmathsum.values read-only property of the cssmathsum interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
... the cssmathsum.values read-only property of the cssmathsum interface returns a cssnumericarray object which contains one or more cssnumericvalue objects.
...And 2 more matches

CSSRule.parentStyleSheet - Web APIs
the parentstylesheet property of the cssrule interface returns the stylesheet object in which the current rule is defined.
... the parentstylesheet property of the cssrule interface returns the stylesheet object in which the current rule is defined.
... the parentstylesheet property of the cssrule interface returns the stylesheet object in which the current rule is defined.
...And 2 more matches

CSSUnparsedValue.entries() - Web APIs
the cssunparsedvalue.entries() method returns an array of a given object's own enumerable property [key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... the cssunparsedvalue.entries() method returns an array of a given object's own enumerable property [key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... the cssunparsedvalue.entries() method returns an array of a given object's own enumerable property [key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
...And 2 more matches

-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css background-image lets you use a portion of a larger image as a background.
...ercentage>, of the sub-image within the specified image.
...example, use different parts of one larger image as backgrounds in different parts of your content.
...And 2 more matches

::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder text in an <input> or <textarea> element.
... the ::placeholder css pseudo-element represents the placeholder text in an <input> or <textarea> element.
... a replacement for the <label> element.
...And 2 more matches

::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
... the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
...round-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored.
...And 2 more matches

:first - CSS: Cascading Style Sheets
the :first css pseudo-class, used with the @page at-rule, represents the first page of a printed document.
... the :first css pseudo-class, used with the @page at-rule, represents the first page of a printed document.
...-left: 50%; margin-top: 50%; } note: you can't change all css properties with this pseudo-class.
...And 2 more matches

:fullscreen - CSS: Cascading Style Sheets
the :fullscreen css pseudo-class matches every element which is currently in full-screen mode.
... whether or not the document is in full-screen mode.
...een pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...And 2 more matches

:host() - CSS: Cascading Style Sheets
the :host() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host.
...taken from our host-selectors example (see it live also).
...t { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.
...And 2 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
note: :matches() was renamed to :is() in csswg issue #3258.
... note: :matches() was renamed to :is() in csswg issue #3258.
...; } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
...And 2 more matches

font-stretch - CSS: Cascading Style Sheets
the font-stretch css descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face rule.
... the font-stretch css descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face rule.
...s the most condensed.
...And 2 more matches

aural - CSS: Cascading Style Sheets
the aural css media type is used for devices that have speech output capabilities.
... the aural css media type is used for devices that have speech output capabilities.
... the aural css media type is used for devices that have speech output capabilities.
...And 2 more matches

update - CSS: Cascading Style Sheets
the update css media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content.
...dia feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content.
... can no longer be updated.
...And 2 more matches

marks - CSS: Cascading Style Sheets
the marks css at-rule descriptor, used with the @page at-rule, adds crop and/or cross marks to the presentation of the document.
...cross; values crop crop marks will be displayed.
... formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
...And 2 more matches

@viewport - CSS: Cascading Style Sheets
note: see https://github.com/w3c/csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track.
... note: see https://github.com/w3c/csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track.
...system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).
...And 2 more matches

Attribute selectors - CSS: Cascading Style Sheets
the css attribute selector matches elements based on the presence or value of a given attribute.
... at least one occurrence of value within the string.
....org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold.
...And 2 more matches

Coordinate systems - CSS: Cascading Style Sheets
en specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in algebra), its position is defined relative to a fixed point in the context.
...e bottom-left corner, with positive y-coordinate values being above the origin.
...a third dimension to layer objects from front to back, the z-coordinate is also used.
...And 2 more matches

Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
... of column boxes much like columns in a newspaper.
...is space for more than two columns, we get two.
...And 2 more matches

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
...ersions of browsers, and in particular ie10 and 11, the flexbugs site is a helpful resource.
...ck once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.
...And 2 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
and powerful alignment capabilities.
...olumn-reverse then the cross axis runs along the rows.
...e of my main axis would be on the right and the end edge on the left.
...And 2 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
xbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once.
...ne up with items in the row above — each flex line acts like a new flex container.
...t deals with space distribution across the main axis.
...And 2 more matches

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-relative mappings for many of the properties and values in css.
... the logical properties and values specification introduces flow-relative mappings for many of the properties and values in css.
...p and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc.
...And 2 more matches

Basic Shapes - CSS: Cascading Style Sheets
css shapes can be defined using the <basic-shape> type, and in this guide i’ll explain how each of the different values accepted by this type work.
...asic-shape> type is used as the value for all of our basic shapes.
...to use the border.
...And 2 more matches

Shapes from box values - CSS: Cascading Style Sheets
a straightforward way to create a shape is to use a value from the css box model.
... a straightforward way to create a shape is to use a value from the css box model.
...e css box model.
...And 2 more matches

Descendant combinator - CSS: Cascading Style Sheets
ents matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
...y-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
... white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
...And 2 more matches

animation-delay - CSS: Cascading Style Sheets
the animation-delay css property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
...y, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are.
...epending on how many there are.
...And 2 more matches

animation-direction - CSS: Cascading Style Sheets
the animation-direction css property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
... on how many there are.
...definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples.
...And 2 more matches

animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-mode css property sets how a css animation applies styles to its target before and after its execution.
... /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing.
...fill-mode in the following example.
...And 2 more matches

background-color - CSS: Cascading Style Sheets
the background-color css property sets the background color of an element.
... / <alpha-value> ]?
...consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: #777799; color: #ffffff; } result specifications specification comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
...And 2 more matches

background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as color, image, origin and size, or repeat method.
...ts all background style properties at once, such as color, image, origin and size, or repeat method.
...or> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background' in that specification.
...And 2 more matches

border-bottom-color - CSS: Cascading Style Sheets
the border-bottom-color css property sets the color of an element's bottom border.
... the border-bottom-color css property sets the color of an element's bottom border.
...r.
...And 2 more matches

border-left-color - CSS: Cascading Style Sheets
the border-left-color css property sets the color of an element's left border.
... the border-left-color css property sets the color of an element's left border.
... )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]?
...And 2 more matches

border-left-width - CSS: Cascading Style Sheets
the border-left-width css property sets the width of the left border of an element.
... a single document.
...rmal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
...And 2 more matches

border-right-color - CSS: Cascading Style Sheets
the border-right-color css property sets the color of an element's right border.
... the border-right-color css property sets the color of an element's right border.
... )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]?
...And 2 more matches

border-right-width - CSS: Cascading Style Sheets
the border-right-width css property sets the width of the right border of an element.
...a single document.
...al syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
...And 2 more matches

border-top-color - CSS: Cascading Style Sheets
the border-top-color css property sets the color of an element's top border.
... the border-top-color css property sets the color of an element's top border.
... )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]?
...And 2 more matches

border-top-width - CSS: Cascading Style Sheets
the border-top-width css property sets the width of the top border of an element.
...values are constant within a single document.
...nanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
...And 2 more matches

box-direction - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... (the right or bottom edge).
...And 2 more matches

column-count - CSS: Cascading Style Sheets
the column-count css property breaks an element's content into the specified number of columns.
...epository.
... value, it merely indicates the maximum allowed number of columns.
...And 2 more matches

column-width - CSS: Cascading Style Sheets
the column-width css property sets the ideal column width in a multi-column layout.
...es listed below.
...on typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
...And 2 more matches

columns - CSS: Cascading Style Sheets
the columns css shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
...s the number of columns to use when drawing an element's contents, as well as those columns' widths.
... of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns using the css `columns` property.
...And 2 more matches

conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
... circumference axis).
...ts, but don't.
...And 2 more matches

element() - CSS: Cascading Style Sheets
the element() css function defines an <image> value generated from an arbitrary html element.
... the element() css function defines an <image> value generated from an arbitrary html element.
...eaning that if the html element is changed, the css properties using the resulting value are automatically updated.
...And 2 more matches

env() - CSS: Cascading Style Sheets
the env() css function can be used to insert the value of a user agent-defined environment variable into your css, in a similar fashion to the var() function and custom properties.
...ort, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display.
... the below example makes use of the optional second parameter of env(), which allows you to provide a fallback value in case the environment variable is not available.
...And 2 more matches

fit-content() - CSS: Cascading Style Sheets
the fit-content() css function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
... css function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
... relative to the available inline size or block size of the laid out box depending on the writing mode.
...And 2 more matches

font-family - CSS: Cascading Style Sheets
the font-family css property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
..."> this is an example of a cursive font.
...div class="fangsong"> this is an example of a fangsong font.
...And 2 more matches

font-variant-caps - CSS: Cascading Style Sheets
the font-variant-caps css property controls the use of alternate glyphs for capital letters.
...es toall elements.
...e | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specification.
...And 2 more matches

font-variant-position - CSS: Cascading Style Sheets
the font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.
...he run are rendered using synthesized glyphs.
... sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specification.
...And 2 more matches

image-orientation - CSS: Cascading Style Sheets
the image-orientation css property specifies a layout-independent correction to the orientation of an image.
...ntation: unset; /* obsolete values.
...ed.
...And 2 more matches

list-style-type - CSS: Cascading Style Sheets
the list-style-type css property sets the marker (such as a disc, character, or custom counter style) of a list item element.
...ion typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status comment css counter styles level 3the definition of 'list-style-type' in that specification.
... <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status comment css counter styles level 3the definition of 'list-style-type' in that specification.
...And 2 more matches

margin-bottom - CSS: Cascading Style Sheets
the margin-bottom css property sets the margin area on the bottom of an element.
...entagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px so...
....box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px solid black; } div { width:320px; background-color:gold; } result specifications specification status comment css basic box modelthe definition of 'margin-bottom' in that specification.
...And 2 more matches

margin-right - CSS: Cascading Style Sheets
the margin-right css property sets the margin area on the right side of an element.
...he width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification.
... syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification.
...And 2 more matches

margin - CSS: Cascading Style Sheets
the margin css property sets the margin area on all four sides of an element.
... relative to the width of the containing block.
...t support flexible box layout, these are not available.
...And 2 more matches

max-block-size - CSS: Cascading Style Sheets
the max-block-size css property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode.
...mode affect the mapping of max-block-size to max-width or max-height as follows: values of writing-mode max-block-size is equivalent to horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-mode values sideways-lr and sideways-rl were removed from the css writing modes level 3 specification late in its design process.
... mode <code>vertical-rl</code>:</p> <div class="standard-box vertical"> call me ishmael.
...And 2 more matches

minmax() - CSS: Cascading Style Sheets
the minmax() css function defines a size range greater than or equal to min and less than or equal to max.
... the minmax() css function defines a size range greater than or equal to min and less than or equal to max.
...ribution of the grid items occupying the grid track.
...And 2 more matches

object-fit - CSS: Cascading Style Sheets
the object-fit css property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
...48a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: conta...
...px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification.
...And 2 more matches

object-position - CSS: Cascading Style Sheets
the object-position css property specifies the alignment of the selected replaced element's contents within the element's box.
...e> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.
...re <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.
...And 2 more matches

offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or svg coordinate system.
...0 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain.
...radient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain.
...And 2 more matches

order - CSS: Cascading Style Sheets
the order css property sets the order to lay out an item in a flex or grid container.
...t be used on non-visual media such as speech.
...ters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
...And 2 more matches

overflow - CSS: Cascading Style Sheets
the overflow css shorthand property sets the desired behavior for an element's overflow — i.e.
... when an element's content is too big to fit in its block formatting context — in both directions.
...llbars-vertical [1] use overflow-x: hidden and overflow-y: scroll, or overflow: scroll hidden instead.
...And 2 more matches

paint() - CSS: Cascading Style Sheets
the paint() css function defines an <image> value generated with a paintworklet.
... the paint() css function defines an <image> value generated with a paintworklet.
... <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); ...
...And 2 more matches

quotes - CSS: Cascading Style Sheets
the quotes css property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the css content property.
...esents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.
...r otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
...And 2 more matches

right - CSS: Cascading Style Sheets
the right css property participates in specifying the horizontal position of a positioned element.
...g blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constr...
...shrink to meet meet both.
...And 2 more matches

shape-outside - CSS: Cascading Style Sheets
the shape-outside css property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
...ied using the values from the list below, which define the float area for float elements.
...or-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
...And 2 more matches

text-combine-upright - CSS: Cascading Style Sheets
the text-combine-upright css property sets the combination of characters into the space of a single character.
...aced inline elementsinheritedyescomputed valuespecified keyword, plus integer if 'digits'animation typediscrete formal syntax none | all | [ digits <integer>?
...etext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
...And 2 more matches

text-indent - CSS: Cascading Style Sheets
the text-indent css property sets the length of empty space (indentation) that is put before lines of text in a block.
...e?where <length-percentage> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p...
... { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 30%; background: plum; } result specifications specification status comment css text module level 3the definition of 'text-indent' in that specification.
...And 2 more matches

<transform-function> - CSS: Cascading Style Sheets
the <transform-function> css data type represents a transformation that affects an element's appearance.
...ze and shape, as well as any transformations applied to it.
...slate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position:...
...And 2 more matches

transition-timing-function - CSS: Cascading Style Sheets
the transition-timing-function css property sets how intermediate values are calculated for css properties being affected by a transition effect.
...ed by the transition-property property, which acts as a transition-property list.
....
...And 2 more matches

widows - CSS: Cascading Style Sheets
the widows css property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
... valueas specifiedanimation typediscrete formal syntax <integer> examples controlling column widows html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
...more text than the first one.
...And 2 more matches

width - CSS: Cascading Style Sheets
the width css property sets an element's width.
...<p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment css box sizing module level 4the definition of 'width' in that specification.
... background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment css box sizing module level 4the definition of 'width' in that specification.
...And 2 more matches

word-spacing - CSS: Cascading Style Sheets
the word-spacing css property sets the length of space between words and between tags.
...rmal the normal inter-word spacing, as defined by the current font and/or the browser.
...rst-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification.
...And 2 more matches

zoom - CSS: Cascading Style Sheets
the non-standard zoom css property can be used to control the magnification level of an element.
... the non-standard zoom css property can be used to control the magnification level of an element.
...onding percentage (1.0 = 100% = normal).
...And 2 more matches

Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine.
... in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine.
...at allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device.
...such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device.

CSS.registerProperty() - Web APIs
the css.registerproperty() method registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...s.registerproperty() method registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...en name has already been registered.
...egistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.

CSSNamespaceRule.namespaceURI - Web APIs
the cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace.
... the cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace.
... the cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace.
... the cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace.

CSSNamespaceRule.prefix - Web APIs
the cssnamespacerule.prefix read-only property returns a domstring with the name of the prefix associated to this namespace.
... the cssnamespacerule.prefix read-only property returns a domstring with the name of the prefix associated to this namespace.
... the cssnamespacerule.prefix read-only property returns a domstring with the name of the prefix associated to this namespace.
... the cssnamespacerule.prefix read-only property returns a domstring with the name of the prefix associated to this namespace.

CSSStyleDeclaration.length - Web APIs
the read-only property returns an integer that represents the number of style declarations in this css declaration block.
...e instance.
...le the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
...iv> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.

CSSStyleRule.style - Web APIs
the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule.
... the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule.
... the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule.
... the cssrule.style property is the cssstyledeclaration interface for the declaration block of the cssrule.

CSSUnparsedValue.forEach() - Web APIs
the cssunparsedvalue.foreach() method executes a provided function once for each element of the cssunparsedvalue.
... the cssunparsedvalue.foreach() method executes a provided function once for each element of the cssunparsedvalue.
...nt of the cssunparsedvalue.
...entvalue the value of the current element being processed.

CSSValueList.length - Web APIs
the length read-only property of the cssvaluelist interface represents the number of cssvalues in the list.
... the length read-only property of the cssvaluelist interface represents the number of cssvalues in the list.
... the length read-only property of the cssvaluelist interface represents the number of cssvalues in the list.
...y of the cssvaluelist interface represents the number of cssvalues in the list.

CSSVariableReferenceValue() - Web APIs
creates a new cssvariablereferencevalue.
... creates a new cssvariablereferencevalue.
... creates a new cssvariablereferencevalue.
... creates a new cssvariablereferencevalue.

CSSVariableReferenceValue.fallback - Web APIs
the fallback read-only property of the cssvariablereferencevalue interface returns the custom property fallback value of the cssvariablereferencevalue.
... the fallback read-only property of the cssvariablereferencevalue interface returns the custom property fallback value of the cssvariablereferencevalue.
... the fallback read-only property of the cssvariablereferencevalue interface returns the custom property fallback value of the cssvariablereferencevalue.
... the fallback read-only property of the cssvariablereferencevalue interface returns the custom property fallback value of the cssvariablereferencevalue.

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
...1>header</h1> <p> paragraph </p> </body> </html> the dom tree for this looks like so: conserving whitespace characters in the dom is useful in many ways, but there are certain places where this makes certain layouts more difficult to implement, and causes problems for developers who want to iterate through nodes in the dom.
...nd some solutions, later on.
...e?

-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomleft css property can be used to round the bottom-left corner of an element's outline.
... in mozilla applications, the -moz-outline-radius-bottomleft css property can be used to round the bottom-left corner of an element's outline.
...ft css property can be used to round the bottom-left corner of an element's outline.
... border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.

-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomright css property can be used to round the bottom-right corner of an element's outline.
... in mozilla applications, the -moz-outline-radius-bottomright css property can be used to round the bottom-right corner of an element's outline.
...css property can be used to round the bottom-right corner of an element's outline.
... bottom and right sides of the border box.

-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topleft css property can be used to round the top-left corner of an element's outline.
... in mozilla applications, the -moz-outline-radius-topleft css property can be used to round the top-left corner of an element's outline.
...ius-topleft css property can be used to round the top-left corner of an element's outline.
...dnopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.

-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topright css property can be used to round the top-right corner of an element's outline.
... in mozilla applications, the -moz-outline-radius-topright css property can be used to round the top-right corner of an element's outline.
...topright css property can be used to round the top-right corner of an element's outline.
...of the top and right sides of the border box.

-webkit-box-reflect - CSS: Cascading Style Sheets
the -webkit-box-reflect css property lets you reflect the content of an element in one specific direction.
...webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites.
...<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> specifications not part of any standard.
...> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> specifications not part of any standard.

-webkit-line-clamp - CSS: Cascading Style Sheets
the -webkit-line-clamp css property allows limiting of the contents of a block container to the specified number of lines.
...s you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.
...al valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax none | <integer> examples truncating a paragraph html <p> in this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
...e>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.

-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke css property specifies the width and color of strokes for text characters.
...nd properties -webkit-text-stroke-width and -webkit-text-stroke-color.
...ntage> <percentage> [ / <alpha-value> ]?
...s adding a red text stroke html <p id="example">the stroke of this text is red.</p> css #example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; } result specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke' in that specification.

::grammar-error - CSS: Cascading Style Sheets
the ::grammar-error css pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
... the ::grammar-error css pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
... color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
... syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

::spelling-error - CSS: Cascading Style Sheets
the ::spelling-error css pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.
... the ::spelling-error css pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.
...color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.
... examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.

:blank - CSS: Cascading Style Sheets
note: the :blank selector is considered at risk, as the csswg keeps changing it.
... note: the :blank selector is considered at risk, as the csswg keeps changing it.
... note: the :blank selector is considered at risk, as the csswg keeps changing it.
...g issue #1967.

:first-child - CSS: Cascading Style Sheets
the :first-child css pseudo-class represents the first element among a group of sibling elements.
...hild { color: lime; } note: as originally defined, the selected element had to have a parent.
...selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in that specification.
...t-child { color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in that specification.

:focus - CSS: Cascading Style Sheets
the :focus css pseudo-class represents an element (such as a form input) that has received focus.
...ard's tab key.
...trast requires that the visual focus indicator be at least 3 to 1.
... specification status comment html living standardthe definition of ':focus' in that specification.

:hover - CSS: Cascading Style Sheets
the :hover css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
...o-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element.
... (applied to hidden radioboxes), see this demo, taken from the :checked reference page.
...omment feedback html living standardthe definition of ':hover' in that specification.

:link - CSS: Cascading Style Sheets
the :link css pseudo-class represents an element that has not yet been visited.
... only before you visit them.
... result specifications specification status comment html living standardthe definition of ':link' in that specification.
...living standard selectors level 4the definition of ':link' in that specification.

:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
...s pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
...or: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
...e:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.

@charset - CSS: Cascading Style Sheets
the @charset css at-rule specifies the character encoding used in the style sheet.
...character; as it is not a nested statement, it cannot be used inside conditional group at-rules.
...o define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file.
...d invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification.

font-style - CSS: Cascading Style Sheets
the font-style css descriptor allows authors to specify font styles for the fonts specified in the @font-face rule.
... the font-style css descriptor allows authors to specify font styles for the fonts specified in the @font-face rule.
... and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality.
...e fonts are specially created by font designers and are not artificially sloped.

unicode-range - CSS: Cascading Style Sheets
the unicode-range css descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page.
...computed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
...es new roman, for the ampersand.
...and in a <span> and applying a different font just to that, but that is an extra element and rule set.

-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
... and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
...xt: controls the color of text content.
...ls the color of a <button> element's text.

-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
the -webkit-device-pixel-ratio is a non-standard boolean css media feature which is an alternative to the standard resolution media feature.
...ble, use the resolution media feature query instead.
...icit unit is dppx.
...-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } } result specifications specification status comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification.

color-index - CSS: Cascading Style Sheets
the color-index css media feature can be used to test the number of entries in the output device's color lookup table.
...ature is specified as an <integer> value representing the number of entries in the output device's color lookup table.
...ximum values, respectively.
... @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors.

color - CSS: Cascading Style Sheets
the color css media feature can be used to test the number of bits per color component (red, green, blue) of the output device.
...the various color components are represented by different numbers of bits, the smallest number is used.
...re represented by different numbers of bits, the smallest number is used.
...olor component.

Box alignment in grid layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
... the box alignment specification details how alignment works in various layout methods.
... them to be used for other layout methods where a gap between items makes sense.
....

Grid template areas - CSS: Cascading Style Sheets
in the previous guide we looked at grid lines, and how to position items against those lines.
...sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> in order to make the layout neater i can use multiple .
...must show a complete grid, otherwise it is invalid (and the property is ignored).
... we can use grid-template-areas to switch around the image and text part of the media object.

Subgrid - CSS: Cascading Style Sheets
level 2 of the css grid layout specification includes a subgrid value for grid-template-columns and grid-template-rows.
...grid has a gap of 20px for rows and columns.
...grid value acts in much the same way as a regular nested grid, it is easy to switch between the two.
...uto-rows to control the implicit track sizing.

Class selectors - CSS: Cascading Style Sheets
the css class selector matches elements based on the contents of their class attribute.
...ents with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifi...
...is paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class selectors' in that specification.
...ions specification status comment selectors level 4the definition of 'class selectors' in that specification.

ID selectors - CSS: Cascading Style Sheets
the css id selector matches an element based on the value of the element’s id attribute.
...lement’s id attribute.
... html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.
...esult specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.

Media queries - CSS: Cascading Style Sheets
media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.
...up the size of buttons on touchscreens.
...evice, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).
...accessibility learn how media queries can help users understand your website better.

Type selectors - CSS: Cascading Style Sheets
the css type selector matches elements by node name.
... the css type selector matches elements by node name.
...here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.
...ecification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.

Universal selectors - CSS: Cascading Style Sheets
the css universal selector (*) matches elements of any type.
... the css universal selector (*) matches elements of any type.
...cts all elements */ * { color: green; } beginning with css3, the asterisk may be used in combination with namespaces: ns|* - matches all elements in namespace ns *|* - matches all elements |* - matches all elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors.
... specification status comment selectors level 4the definition of 'universal selector' in that specification.

align-content - CSS: Cascading Style Sheets
the css align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
...uted valueas specifiedanimation typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>?
...'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.
...t.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.

align-items - CSS: Cascading Style Sheets
the css align-items property sets the align-self value on all direct children as a group.
...l definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>?
...es'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-items' in that specification.
... (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-items' in that specification.

align-self - CSS: Cascading Style Sheets
the align-self css property overrides a grid or flex item's align-items value.
...nimation typediscrete formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?
...es html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section> css section { display: flex; align-items: center; height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; } result specifications specification status comment css box alignment module level 3the definition of 'align-self' in that specification.
...height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; } result specifications specification status comment css box alignment module level 3the definition of 'align-self' in that specification.

<alpha-value> - CSS: Cascading Style Sheets
the <alpha-value> css data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.
...alues in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used.
...o set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification.
...threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification.

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
...ted elements that accept width and height attributes.
... for mapped valuesfirefox partial support 71notes partial support 71notes notes firefox 71 adds internal support only for mapped values no support 69 — 71notes disabled notes firefox 69 adds internal support only for mapped valuesdisabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
... full support 79edge full support 79firefox full support 71 full support 71 no support 69 — 71disabled disabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).

background-clip - CSS: Cascading Style Sheets
the background-clip css property sets whether an element's background extends underneath its border box, padding box, or content box.
...rmal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: te...
... red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-clip' in that specification.
...adding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-clip' in that specification.

border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
...etting the individual logical block-end border property values in a single place in the style sheet.
...> <percentage> [ / <alpha-value> ]?
...ue> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end' in that specification.

border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
...ting the individual logical block-start border property values in a single place in the style sheet.
...> <percentage> [ / <alpha-value> ]?
...pha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-block-start' in that specification.

border-block - CSS: Cascading Style Sheets
the border-block css property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
...lity, and text orientation.
...> <percentage> [ / <alpha-value> ]?
...-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block' in that specification.

border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius css property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... of the value is 0 no rounding is done and the corner is square.
...emi-major axis of the ellipse to use for the border in that corner.
...rc of ellipse is used as the border div { border-bottom-left-radius: 40%; } .

border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
...of the value is 0 no rounding is done and the corner is square.
...emi-major axis of the ellipse to use for the border in that corner.
... of ellipse is used as the border div { border-bottom-right-radius: 40%; } .

border-bottom-style - CSS: Cascading Style Sheets
the border-bottom-style css property sets the line style of an element's bottom border.
...ating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groo...
...;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
...double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.

border-image - CSS: Cascading Style Sheets
the border-image css property draws an image around a given element.
...te to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...idth'> | / <'border-image-width'>?
...ding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' in that specification.

border-inline-end - CSS: Cascading Style Sheets
the border-inline-end css property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
...tting the individual logical inline-end border property values in a single place in the style sheet.
...)> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]?
...>, <alpha-value>?

border-inline-start - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
...ing the individual logical inline-start border property values in a single place in the style sheet.
...)> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]?
... <alpha-value>?

border-inline - CSS: Cascading Style Sheets
the border-inline css property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
...der-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...> <percentage> [ / <alpha-value> ]?
...value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline' in that specification.

border-left-style - CSS: Cascading Style Sheets
the border-left-style css property sets the line style of an element's left border.
...nset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border...
...r-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
...ft-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.

border-right-style - CSS: Cascading Style Sheets
the border-right-style css property sets the line style of an element's right border.
...examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8...
...yle: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
...yle: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.

border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
...one of the value is 0,no rounding is done and the corner is square.
...emi-major axis of the ellipse to use for the border in that corner.
...ot a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.

border-top-right-radius - CSS: Cascading Style Sheets
the border-top-right-radius css property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
...ne of the value is 0 no rounding is done and the corner is square.
...emi-major axis of the ellipse to use for the border in that corner.
... a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.

border-top-style - CSS: Cascading Style Sheets
the border-top-style css property sets the line style of an element's top border.
...nset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-sty...
....b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
...der-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.

bottom - CSS: Cascading Style Sheets
the bottom css property participates in setting the vertical position of a positioned element.
...ercentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.
...<div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.
...gba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.

box-align - CSS: Cascading Style Sheets
warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
...xtra space in the box.
...signated the end.

box-flex - CSS: Cascading Style Sheets
this is a property for controlling parts of the xul box model.
... this is a property for controlling parts of the xul box model.
...ment has nonzero flex, then it grows to fill the available space.
...box's equalsize attribute to the value always.

box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame.
...le, we include three shadows: an inset shadow, a regular drop shadow, and a 2px shadow that creates a border effect (we could have used an outline instead for that third shadow).
...as is the default, the corners of the shadow will be, well, corners.
...idest box-shadow to ensure the shadow doesn't overlap adjacent elements or go beyond the border of the containing box.

clip-path - CSS: Cascading Style Sheets
the clip-path css property creates a clipping region that sets what part of an element should be shown.
...creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the size of the reference box is set to the width and height values of the viewbox attribute.
...="0" width="90" height="90"/> </clippath> </defs> </svg> <select id="clippath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition...
...ing module level 1the definition of 'clip-path' in that specification.

clip - CSS: Cascading Style Sheets
the clip css property defines a visible portion of an element.
...border edges.
...les/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
...iddle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.

column-fill - CSS: Cascading Style Sheets
the column-fill css property controls how an element's contents are balanced when broken into columns.
...ween columns.
...nition initial valuebalanceapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.
...ext evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.

counter-increment - CSS: Cascading Style Sheets
the counter-increment css property increases or decreases the value of a css counter by a given value.
...ent css property increases or decreases the value of a css counter by a given value.
...ies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <custom-ident> <integer>?
...| none examples incrementing named counters h1 { counter-increment: chapter section 2 page; /* increases the value of the chapter and page counters by 1, and the section counter by 2 */ } specifications specification status comment css lists module level 3the definition of 'counter-increment' in that specification.

counter-reset - CSS: Cascading Style Sheets
the counter-reset css property resets a css counter to a given value.
... the counter-reset css property resets a css counter to a given value.
...ion initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <custom-ident> <integer>?
... <custom-ident> <integer>?

cross-fade() - CSS: Cascading Style Sheets
the css cross-fade() function can be used to blend two or more images at a defined transparency.
...axes.
...h>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), ...
... url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); } result specifications specification status comment css images module level 4the definition of 'cross-fade()' in that specification.

cursor - CSS: Cascading Style Sheets
the cursor css property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.
...image types are not supported.
...resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment css basic user interface module level 3the definition of 'cursor' in that specification.
...ir; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment css basic user interface module level 3the definition of 'cursor' in that specification.

direction - CSS: Cascading Style Sheets
the direction css property sets the direction of text, table columns, and horizontal overflow.
... the direction property.
...have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.
...eltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.

<display-internal> - CSS: Cascading Style Sheets
ike <col> html elements.
...ments.
...by-text-container these elements behave like <rtc> html elements.
...<main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status css display module level 3the definition of 'display-internal' in that specification.

filter - CSS: Cascading Style Sheets
the filter css property applies graphical effects like blur or color shift to an element.
... the filter css property applies graphical effects like blur or color shift to an element.
...ternal xml file.
... text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } drop-shadow() the drop-shadow() function applies a drop shadow effect to the input image.

flex-direction - CSS: Cascading Style Sheets
the flex-direction css property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
...s the same as column but the main-start and main-end are permuted.
...ground-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </div> css #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status c...
...: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status comment css flexible box layout modulethe definition of 'flex-direction' in that specification.

flex-wrap - CSS: Cascading Style Sheets
the flex-wrap css property sets whether flex items are forced onto one line or can wrap onto multiple lines.
... property sets whether flex items are forced onto one line or can wrap onto multiple lines.
... <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex...
...px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-wrap' in that specification.

flex - CSS: Cascading Style Sheets
the flex css shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
... property sets how a flex item will grow or shrink to fit the space available in its flex container.
...ypeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
...istener("click", function() { raw.style.display = raw.style.display == "none" ?

font-variant-ligatures - CSS: Cascading Style Sheets
the font-variant-ligatures css property controls which ligatures and contextual forms are used in textual content of the elements it applies to.
...l-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligatures<br> if fi ff tf ft jf ...
...</p> <p class="historical-ligatures"> historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-historical-ligatures"> no-historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p> <p class="no-contextual"> no-contextual<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p> css p { font-family: lora, serif; } .normal { font-variant-ligatures: normal; } .none { font-variant-ligatures: none; } .common-ligatures { font-variant-ligatures: common-ligatures; } .no-common-ligatures { font-variant-ligatures: no-common-ligatures; } .discretionary-ligatures { font-variant-ligatures: discretionary-ligatures; } .no-discretionary-ligatures { font-variant-ligature...
...l-ligatures { font-variant-ligatures: historical-ligatures; } .no-historical-ligatures { font-variant-ligatures: no-historical-ligatures; } .contextual { font-variant-ligatures: contextual; } .no-contextual { font-variant-ligatures: no-contextual; } .contextual { font-variant-ligatures: contextual; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-ligatures' in that specification.

<frequency-percentage> - CSS: Cascading Style Sheets
the <frequency-percentage> css data type represents a value that can be either a <frequency> or a <percentage>.
... the <frequency-percentage> css data type represents a value that can be either a <frequency> or a <percentage>.
...with a leading + and a unit -0khz zero, with a leading - and a unit invalid frequency values 12.0 this is a <number>, not an <frequency>, because it is missing a unit.
...n <frequency>, because it is missing a unit.

<gradient> - CSS: Cascading Style Sheets
the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
...te 8px, white 16px); } conic gradient example a simple conic gradient example.
...browser as of yet.

grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
...t>; otherwise, it is set to auto.
...: as specifiedgrid-row-end: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
...1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.

grid-column - CSS: Cascading Style Sheets
the grid-column css shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
...ic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
...olumn-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
...<div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-column' in that specification.

grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
...y.
...nd:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
...iv> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-row' in that specification.

grid-template-columns - CSS: Cascading Style Sheets
the grid-template-columns css property defines the line names and track sizing functions of the grid columns.
...> ]+ <line-names>?
...ntage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
...>b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.

grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and track sizing functions of the grid rows.
...ize> ]+ <line-names>?
...ercentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
...eab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.

grid-template - CSS: Cascading Style Sheets
the grid-template css property is a shorthand property for defining grid columns, rows, and areas.
... the grid-template css property is a shorthand property for defining grid columns, rows, and areas.
...-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>?
...ad; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification status comment css grid layoutthe definition of 'grid-template' in that specification.

grid - CSS: Cascading Style Sheets
the grid css property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
.../github.com/mdn/interactive-examples and send us a pull request.
...lumn elementsanimation typediscrete formal syntax <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense?
...layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.

ident - CSS: Cascading Style Sheets
the <ident> css data type denotes an arbitrary string used as an identifier.
... the <ident> css data type denotes an arbitrary string used as an identifier.
...ters bili\.bob a correctly escaped period invalid identifiers 34rem it must not start with a decimal digit.
...-12rad it must not start with a dash followed by a decimal digit.

justify-content - CSS: Cascading Style Sheets
the css justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
...nersinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | <content-distribution> | <overflow-position>?
...pace-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
...document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.

left - CSS: Cascading Style Sheets
the left css property participates in specifying the horizontal position of a positioned element.
... <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; backgro...
... 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
...e; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.