recursal/MDN huggingface dataset:
@namespace
==========

**`@namespace`** is an at-rule that defines XML namespaces to be used in a CSS style sheet.

Try it
------

Syntax
------


```css
/\* Default namespace \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* Prefixed namespace \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

Description
-----------

The defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace. The `@namespace` rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

Any `@namespace` rules must follow all `@charset` and `@import` rules, and precede all other at-rules and style declarations in a style sheet.

`@namespace` can be used to define the **default namespace** for the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace.

The `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace *and* name of the element or attribute matches.

In HTML, known foreign elements will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the `<svg>` and `<math>` elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`, respectively).

**Note:** In XML, unless a prefix is defined directly on an attribute (*e.g.*, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.

Formal syntax
-------------
```

@namespace =   
  @namespace <namespace-prefix>? [ <string> | <url> ] ;    
  
<namespace-prefix> =   
  <ident>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Specifying default and prefixed namespaces


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace \*/
a {
}

/\* This matches all SVG <a> elements \*/
svg|a {
}

/\* This matches both XHTML and SVG <a> elements \*/
\*|a {
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Namespaces crash course
atan()
======

The **`atan()`** CSS function is a trigonometric function that returns the inverse tangent of a number between `-∞` and `+∞`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `-90deg` and `90deg`.

Syntax
------


```css
/\* Single <number> values \*/
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/\* Other values \*/
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));
```

### Parameter

The `atan(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-∞` and `+∞`.

### Return value

The inverse tangent of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

* If `number` is `0⁻`, the result is `0⁻`.
* If `number` is `+∞` the result is `90deg`.
* If `number` is `-∞` the result is `-90deg`.

That is:

* `atan(-infinity)` representing `-90deg`.
* `atan(-1)` representing `-45deg`
* `atan(0)` representing `0deg`
* `atan(1)` representing `45deg`
* `atan(infinity)` representing `90deg`.
### Formal syntax
```

<atan()> =   
  atan( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Examples
--------

### Rotate elements

The `atan()` function can be used to `rotate` elements as it return an `<angle>`.

#### HTML


```html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `sin()`
* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan2()`
scroll-snap-align
=================

The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* when two values set first is block, second inline \*/
scroll-snap-align: center;

/\* Global values \*/
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
```

### Values

`none`

The box does not define a snap position in that axis.

`start`

The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

`end`

The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

`center`

The center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

scroll-snap-align =   
  [ none | start | end | center ]{1,2}    
  
```

Specifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
<display-outside>
=================

The `<display-outside>` keywords specify the element's outer `display` type, which is essentially its role in flow layout. These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the `<display-inside>` keywords.

Syntax
------

Valid `<display-outside>` values:

`block`

The element generates a block element box, generating line breaks both before and after the element when in the normal flow.

`inline`

The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.



**Note:** When browsers encounter a display property with only an **outer** `display` value (e.g., `display: block` or `display: inline`), the inner value defaults to `flow` (e.g., `display: block flow` and `display: inline flow`).
 This is backwards-compatible with single-keyword syntax.


Formal syntax
-------------
```

<display-outside> =   
  block   |  
  inline  |  
  run-in    
  
```

Examples
--------

In the following example, span elements (normally displayed as inline elements) are set to `display: block` and so break onto new lines and expand to fill their container in the inline dimension.

### HTML


```html
<span>span 1</span> <span>span 2</span>
```

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-outside |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Block and Inline layout in Normal Flow
* Formatting Contexts explained
CSS text decoration
===================

The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.

Reference
---------

### Properties

* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-shadow`
* `text-underline-offset`
* `text-underline-position`
Examples
--------


```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```



```html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since 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 |
| --- |
| CSS Text Decoration Module Level 3  |
-webkit-mask-position-x
=======================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image.

Syntax
------


```css
/\* Keyword values \*/
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/\* <percentage> values \*/
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/\* <length> values \*/
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/\* Multiple values \*/
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

/\* Global values \*/
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: revert;
-webkit-mask-position-x: revert-layer;
-webkit-mask-position-x: unset;
```

### Values

`<length-percentage>`

A length indicating the position of the left edge of the image relative to the box's left padding edge. Percentages are calculated against the horizontal dimension of the box padding area. That means, a value of `0%` means the left edge of the image is aligned with the box's left padding edge and a value of `100%` means the right edge of the image is aligned with the box's right padding edge.

`left`

Equivalent to `0%`.

`center`

Equivalent to `50%`.

`right`

Equivalent to `100%`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements |
| Inherited | no |
| Percentages | refer to the size of the box itself |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | discrete |

Formal syntax
-------------
```

-webkit-mask-position-x =
  [ <length-percentage> | left | center | right ]#
```

Examples
--------

### Horizontally positioning a mask image


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

`-webkit-mask-position`, `-webkit-mask-position-y`, `-webkit-mask-origin`, `-webkit-mask-attachment`
::cue
=====

The **`::cue`** CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

Try it
------

The properties are applied to the entire set of cues as if they were a single unit. The only exception is that `background` and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

Syntax
------


```css
::cue | ::cue(<selector>) {
  /\* ... \*/
}
```

Permitted properties
--------------------

Rules whose selectors include this element may only use the following CSS properties:

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
Examples
--------

### Styling WebVTT cues as white-on-black

The following CSS sets the cue style so that the text is white and the background is a translucent black box.


```css
::cue {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
}
```

Specifications
--------------

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Video Tracks Format (WebVTT)
* `<track>`, `<video>`
padding-inline-end
==================

The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------


```css
/\* <length> values \*/
padding-inline-end: 10px; /\* An absolute length \*/
padding-inline-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;
```

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline-size (*width* in a horizontal language) of the containing block. Must be nonnegative.

Description
-----------

The `padding-inline-end` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-start`, `padding-block-end`, and `padding-inline-start`, which define the other paddings of the element.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

Formal syntax
-------------
```

padding-inline-end =   
  <'padding-top'>    
  
```

Examples
--------

### Setting inline end padding for vertical text

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-end: 20px;
  background-color: #c8c800;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`
<percentage>
============

The **`<percentage>`** CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as `width`, `height`, `margin`, `padding`, and `font-size`.

**Note:** Only calculated values can be inherited. Thus, even if a percentage 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.

Syntax
------

The `<percentage>` data type consists of a `<number>` followed by the percentage sign (`%`). Optionally, it may be preceded by a single `+` or `-` sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

Interpolation
-------------

When animated, values of the `<percentage>` data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Width and margin-left


```html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```


The above HTML will output:

### Font-size


```html
<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 |
| --- |
| CSS Values and Units Module Level 4 # percentages |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<length-percentage>`
* CSS Values and Units
CSS grid layout
===============

The **CSS grid layout** module 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.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Basic example
-------------

The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
```

### HTML


```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS


```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

Reference
---------

### Properties

* `display`
* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid-auto-flow`
* `grid`
* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
* `grid-row`
* `grid-column`
* `grid-area`
* `row-gap`
* `column-gap`
* `gap`
* `masonry-auto-flow` 
Experimental
* `align-tracks` 
Experimental
* `justify-tracks` 
Experimental
### Functions

* `repeat()`
* `minmax()`
* `fit-content()`
### Data types

* `<flex>`
Guides
------

* Basic concepts of grid layout
* Relationship of grid layout with other layout methods
* Grid template areas
* Grid layout using line-based placement
* Grid layout using named grid lines
* Auto-placement in grid layout
* Box alignment in grid layout
* Grids, logical values, and writing modes
* Grid layout and accessibility
* Realizing common layouts using grids
* Subgrid
* Masonry layout 
Experimental
Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

See also
--------

* Glossary terms:
    + Grid
    + Grid lines
    + Grid tracks
    + Grid cell
    + Grid area
    + Gutters
    + Grid axis
    + Grid row
    + Grid column
* CSS flexible box layout module
* CSS display module
* Grid by Example - A collection of usage examples and video tutorials
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - A game for learning CSS grid