font-size-adjust - CSS: Cascading Style Sheets

font-size-adjust
================

The **`font-size-adjust`** CSS property provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall `font-size`. This property is useful for situations where font fallback can occur.

Legibility can become an issue when the first-choice `font-family` is unavailable and its replacement fallback font has a significantly different aspect value (height of lowercase letters divided by font size). Legibility of fonts, especially at small font sizes, is determined more by the size of lowercase letters than by the size of uppercase letters. The `font-size-adjust` property is useful for adjusting the font size of fallback fonts to keep the aspect value across fonts consistent, ensuring that the text appears similar regardless of the font used.

Syntax
------

```css
/\* Keyword \*/
font-size-adjust: none;

/\* One value: <number> or from-font \*/
font-size-adjust: 0.5;
font-size-adjust: from-font;

/\* Two values \*/
font-size-adjust: ex-height 0.5;
font-size-adjust: ch-width from-font;

/\* Global values \*/
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: revert-layer;
font-size-adjust: unset;
```

### Values

The `font-size-adjust` property takes as its value the keyword `none`, one (`<number>` or `from-font`), or two (`<font-metric>` and either `<number>` or `from-font`) values.

`none`

No adjustment is applied to the `font-size` value for the fallback font.

`<font-metric>` Optional

Specifies the first-choice font metric to use for adjusting the font size of the fallback font. This parameter accepts one of the keywords listed below. It is an optional parameter, and `ex-height` is used if no `<font-metric>` is specified.

`ex-height`

Uses the ratio of x-height (height of lowercase "x" in a font) to font size (aspect value) to adjust the fallback font size. This keyword value is used to normalize lowercase letters across fonts.

`cap-height`

Uses the ratio of cap-height (height of uppercase letters) to font size to adjust fallback font size. This keyword value is used to normalize uppercase letters across fonts.

`ch-width`

Uses the ratio of the advance width (horizontal space taken up by a character in a font) of the character "0" (ZERO, U+0030) to font size. This keyword value is used to normalize horizontal narrow pitch of fonts.

`ic-width`

Uses the ratio of the advance width of the character "水" (CJK water ideograph, U+6C34) to font size. This keyword value is used to normalize horizontal wide pitch of fonts, particularly those that include CJK (Chinese, Japanese, Korean) characters.

`ic-height`

Uses the ratio of the advance height (vertical space taken up by a character in a font) of the character "水" (CJK water ideograph, U+6C34) to font size. This keyword value is used to normalize vertical wide pitch of fonts, particularly those that include CJK characters.

`<number>`

Adjusts the font size used depending on the specified `<font-metric>`. When no `<font-metric>` is specified (in which case the default value `ex-height` is used), the `<number>` value adjusts the font size of the fallback font so that its x-height is the specified multiple of the font size. This value should generally match the aspect value (ratio of x-height to font size) of the first-choice font. This means that the first-choice font, when available, will display consistently across browsers, regardless of their support for `font-size-adjust`.

When a `<font-metric>` value is specified, the `<number>` value adjusts the font size as per the chosen `<font-metric>` to maintain a consistent appearance for the specified font metric across different fonts.

The `<number>` value accepts any number from `0` to infinity. `0` yields text of zero height (that is, the text is hidden). Negative values are invalid.

`from-font`

Uses the `<number>` value for the specified `<font-metric>` from the first available font.

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

To ensure compatibility with browsers that don't support `font-size-adjust`, this property is specified as a numeric multiplier of the `font-size` property. This number should generally match the aspect value of the first-choice font.

**Note:** If the specified `<font-metric>` has been overridden in `@font-face`, e.g., by using the `size-adjust` descriptor, then the overridden metric will be used in the `font-size-adjust` calculation. This means that when `font-size-adjust` and `size-adjust` are applied together, `size-adjust` does not have any effect.

The adjusted font size is calculated using the formula `u = ( m / m′ ) s`, where:

* `m` is the ratio of the specified `<font-metric>` to the first-choice font size.
* `m′` is the ratio of the corresponding `<font-metric>` to the fallback font size.
* `s` is the value of the `font-size` property.
* `u` is the new, adjusted font size for the fallback font.

Consider this example to see how the adjusted font size is calculated. A first-choice font has a `font-size` of `12px` (`s`), and the ratio of `cap-height` to font size is `0.20` (`m`). The `cap-height` to font size ratio in the fallback font is `0.15` (`m′`). The `font-size-adjust` value has been specified as `cap-height 0.20`. If the primary font is unavailable, the adjusted font size of the fallback font will be calculated to be `16px` (`(0.20 / 0.15) * 12`). This will ensure that the `cap-height` of the fallback font is similar to that of the first-choice font when displayed.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | a number |

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

font-size-adjust =
  none            |
  <number [0,∞]>

```

Examples
--------

### Normalizing font size by lowercase and uppercase letters

This example demonstrates how the `font-size-adjust` property can be used to retain the same aspect value across fonts. The Verdana font has a relatively high aspect value of `0.545`, which means that the lowercase letters are relatively tall compared to uppercase letters. This makes the text in small font sizes appear legible. However, the Times font has a lower aspect value of `0.447`, so the text is less legible at small sizes. If Verdana is the first-choice font and Times is the fallback font, specifying the `font-size-adjust` property can help to retain the same aspect value in Times. So if the font falls back to Times, the text will maintain a similar level of legibility as it would have with Verdana.

Similarly, the cap-height to font size ratio in Verdana is `0.73` and that in Times is `0.66`. When `font-size-adjust` property is applied to Times to adjust its uppercase letters to match the ratio in Verdana, the Times font displays in adjusted font size ((0.73 / 0.66) \* 14) `15.48px`.

```html
<p class="verdana">
  A: This text uses the Verdana font (14px), which has relatively large
  lowercase letters.
</p>
<p class="times">
  B: This text uses the Times font (14px), which is hard to read in small sizes.
</p>
<p class="times adjtimesexheight">
  C: This text in 14px Times font is adjusted to the same aspect value as the
  Verdana font, so lowercase letters are normalized across the two fonts.
</p>
<p class="times adjtimescapheight">
  D: This text in 14px Times font is adjusted to the same cap-height to font
  size ratio as the Verdana font, so uppercase letters are normalized across the
  two fonts.
</p>
```

```css
.times {
  font-family: Times, serif;
  font-size: 14px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

.adjtimesexheight {
  font-size-adjust: 0.545;
}

.adjtimescapheight {
  font-size-adjust: cap-height 0.73;
}
```

 Without `font-size-adjust` in `B`, the switch from Verdana font to Times font could result in a noticeable decrease in legibility due to its lower aspect value.
 In `C`, notice that only one value is specified for the `font-size-adjust` property, so the default `<font-metric>` value `ex-height` is used. `D` shows how the font would look compared to `A` if its uppercase letter height is adjusted.

### Determining the aspect value of a font

For a given font, the same content in two side-by-side `<span>` elements can be used to determine the font's aspect value. If the same font size is used for content in both spans, the spans will match when the `font-size-adjust` value in one span is accurate for the given font.

In the example below, there are three pairs of side-by-side `<span>` elements, each containing the letter "b". The goal is to adjust the `font-size-adjust` property for the right `<span>` in each pair until the borders around the two letters align. The resulting `font-size-adjust` value can be considered the aspect value for the font.

Starting at `0.6` in the first pair and adjusting to `0.5` in the second, we continue adjusting the `font-size-adjust` property value until the borders around the "b" letters align perfectly in the third pair. In this example, the aspect value is determined to be `0.482`.

```html
<div>
  <p><span>b</span><span class="adjust1">b</span></p>
  0.6
</div>

<div>
  <p><span>b</span><span class="adjust2">b</span></p>
  0.5
</div>

<div>
  <p><span>b</span><span class="adjust3">b</span></p>
  0.482
</div>
```

```
body {
  display: flex;
}

div {
  text-align: center;
}

p {
  margin: 0 30px 10px 30px;
}
```

```css
body {
  display: flex;
}

div {
  text-align: center;
}

p {
  font-family: Futura;
  font-size: 50px;
}

span {
  border: solid 1px red;
}

.adjust1 {
  font-size-adjust: 0.6;
}

.adjust2 {
  font-size-adjust: 0.5;
}

.adjust3 {
  font-size-adjust: 0.482;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 5 # font-size-adjust-prop |

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

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

See also
--------

* `font-size`
* `font-weight`
* `size-adjust` `@font-face` descriptor
* Learn: Fundamental text and font styling


grid-column - CSS: Cascading Style Sheets

grid-column
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
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.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `grid-column-end`
* `grid-column-start`
Syntax
------

```css
/\* Keyword values \*/
grid-column: auto;
grid-column: auto / auto;

/\* <custom-ident> values \*/
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> values \*/
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> values \*/
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

/\* Global values \*/
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;
```

This property is specified as one or two `<grid-line>` values.

 If two `<grid-line>` values are given, they are separated by `/`.
 The `grid-column-start` longhand is set to the value before the slash, and the `grid-column-end` longhand is set to the value after the slash.

Each `<grid-line>` value can be specified as:

* either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.
### Values

`auto`

Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

`<custom-ident>`

If there is a named line with the name `<custom-ident>-start`/`<custom-ident>-end`, it contributes the first such line to the grid item's placement.

**Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

`<integer> && <custom-ident>?`

Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

An `<integer>` value of `0` is invalid.

`span && [ <integer> || <custom-ident> ]`

Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.

If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-column-start`: `auto`
* `grid-column-end`: `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `grid-column-start`: as specified
* `grid-column-end`: as specified
 |
| Animation type | discrete |

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

grid-column =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

Examples
--------

### Setting grid column size and location

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```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 |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

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

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

See also
--------

* Related CSS properties: `grid-row`, `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*


padding-block-end - CSS: Cascading Style Sheets

padding-block-end
=================

The **`padding-block-end`** CSS property defines the logical block 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-block-end: 10px; /\* An absolute length \*/
padding-block-end: 1em; /\* A length relative to the text size \*/

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

/\* Global values \*/
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: revert;
padding-block-end: revert-layer;
padding-block-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, defined by `writing-mode`) of the containing block. Must be nonnegative.

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

The `padding-block-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-inline-start`, and `padding-inline-end`, 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-block-end =
  <'padding-top'>

```

Examples
--------

### Setting block 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-block-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`


::cue-region - CSS: Cascading Style Sheets

::cue-region
============

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`::cue-region`** 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.

```css
::cue-region {
  color: yellow;
  font-weight: bold;
}
```

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-region | ::cue-region(<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`
Specifications
--------------

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

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

There is no browser implementing this feature.

See also
--------

* Other WebVTT selectors:
    + `::cue`
    + `:past`
    + `:future`


<display-box> - CSS: Cascading Style Sheets

<display-box>
=============

These keywords define whether an element generates display boxes at all.

Syntax
------

Valid `<display-box>` values:

`contents`

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the `contents` value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.

*Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.*

`none`

 Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
 To have an element take up the space that it would normally take, but without actually rendering anything, use the `visibility` property instead.

Accessibility concerns
----------------------

Current implementations in most browsers will remove from the accessibility tree any element with a `display` value of `contents`. This will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. This is incorrect behavior according to the CSSWG specification.

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
Formal syntax
-------------
```

<display-box> =
  contents  |
  none

```

Examples
--------

In this first example, the paragraph with a class of secret is set to `display: none`; the box and any content is now not rendered.

### display: none

#### HTML

```html
<p>Visible text</p>
<p class="secret">Invisible text</p>
```

#### CSS

```css
p.secret {
  display: none;
}
```

#### Result

### display: contents

In this example the outer `<div>` has a 2-pixel red border and a width of 300px. However it also has `display: contents` specified therefore this `<div>` will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed.

#### HTML

```html
<div class="outer">
  <div>Inner div.</div>
</div>
```

#### CSS

```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```

#### Result

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

#### No specification found

No specification data found for `css.properties.display.contents`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-legacy>`
* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl


<string> - CSS: Cascading Style Sheets

<string>
========

The **`<string>`** CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as `content`, `font-family`, and `quotes`.

Syntax
------

The `<string>` data type is composed of any number of Unicode characters surrounded by either double (`"`) or single (`'`) quotes.

Most characters can be represented literally. All characters can also be represented with their respective Unicode code points in hexadecimal, in which case they are preceded by a backslash (`\`). For example, `\22` represents a double quote, `\27` a single quote (`'`), and `\A9` the copyright symbol (`©`).

Importantly, certain characters which would otherwise be invalid can be escaped with a backslash. These include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the backslash itself. For example, `\\` will create a single backslash.

To output new lines, you must escape them with a line feed character such as `\A` or `\00000A`. In your code, however, strings can span multiple lines, in which case each new line must be escaped with a `\` as the last character of the line.

However, to get new lines, you must also set the `white-space` property to appropriate value.

**Note:** HTML entities (such as ` ` or `—`) cannot be used in a CSS `<string>`.

Examples
--------

### Examples of valid strings

```css
/\* Simple strings \*/
"This string is demarcated by double quotes."
'This string is demarcated by single quotes.'

/\* Character escaping \*/
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/\* New line in a string \*/
"This string has a \Aline break in it."

/\* String spanning two lines of code (these two strings will have identical output) \*/
"A really long \
awesome string"
"A really long awesome string"
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # strings |

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

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

See also
--------

* CSS Units and Values
* CSS Basic Data Types
* Introduction to CSS: Values and Units


Layout and the containing block - CSS: Cascading Style Sheets

Layout and the containing block
===============================

The size and position of an element are often impacted by its **containing block**. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.

When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:

1. Content area
2. Padding area
3. Border area
4. Margin area

![Diagram of the box model](/en-US/docs/Web/CSS/Containing_block/box-model.png)

Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.

Effects of the containing block
-------------------------------

Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.

The size and position of an element are often impacted by its containing block. Percentage values that are applied to the `width`, `height`, `padding`, `margin`, and offset properties of an absolutely positioned element (i.e., which has its `position` set to `absolute` or `fixed`) are computed from the element's containing block.

Identifying the containing block
--------------------------------

The process for identifying the containing block depends entirely on the value of the element's `position` property:

1. If the `position` property is **`static`**, **`relative`**, or **`sticky`**, the containing block is formed by the edge of the *content box* of the nearest ancestor element that is either **a block container** (such as an inline-block, block, or list-item element) or **establishes a formatting context** (such as a table container, flex container, grid container, or the block container itself).
2. If the `position` property is **`absolute`**, the containing block is formed by the edge of the *padding box* of the nearest ancestor element that has a `position` value other than `static` (`fixed`, `absolute`, `relative`, or `sticky`).
3. If the `position` property is **`fixed`**, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).
4. If the `position` property is **`absolute`** or **`fixed`**, the containing block may also be formed by the edge of the *padding box* of the nearest ancestor element that has the following:
    1. A `transform` or `perspective` value other than `none`
    2. A `will-change` value of `transform` or `perspective`
    3. A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)
    4. A `contain` value of `layout`, `paint`, `strict` or `content` (e.g. `contain: paint;`)
    5. A `container-type` value other than `normal`
    6. A `backdrop-filter` other than `none` (e.g. `backdrop-filter: blur(10px);`)

**Note:** The containing block in which the root element (`<html>`) resides is a rectangle called the **initial containing block**. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

**Note:** There are browser inconsistencies with `perspective` and `filter` contributing to containing block formation.

Calculating percentage values from the containing block
-------------------------------------------------------

As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are **box model properties** and **offset properties**:

1. The `height`, `top`, and `bottom` properties compute percentage values from the `height` of the containing block.
2. The `width`, `left`, `right`, `padding`, and `margin` properties compute percentage values from the `width` of the containing block.

**Note:** A **block container** (such as an inline-block, block, or list-item element) either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. An element is a block container only if it contains block-level or inline-level boxes.

Some examples
-------------

The HTML code for all our examples is:

```html
<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

Only the CSS is altered in each instance below.

### Example 1

In this example, the paragraph is statically positioned, so its containing block is `<section>` because it's the nearest ancestor that is a block container (because of `display: block`).
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}
```

### Example 2

In this example, the paragraph's containing block is the `<body>` element, because `<section>` is not a block container (because of `display: inline`) and doesn't establish a formatting context.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == half the body's width \*/
  height: 200px; /\* Note: a percentage would be 0 \*/
  background: cyan;
}
```

### Example 3

In this example, the paragraph's containing block is `<section>` because the latter's `position` is `absolute`. The paragraph's percentage values are affected by the `padding` of its containing block, though if the containing block's `box-sizing` value were `border-box` this would not be the case.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}
```

### Example 4

In this example, the paragraph's `position` is `fixed`, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (width of vertical scrollbar)) \*/
  height: 50%; /\* == (50vh - (height of horizontal scrollbar)) \*/
  margin: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  padding: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  background: cyan;
}
```

### Example 5

In this example, the paragraph's `position` is `absolute`, so its containing block is `<section>`, which is the nearest ancestor with a `transform` property that isn't `none`.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}
```

See also
--------

* The `all` property resets all CSS declarations to a given known state
* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


border-right-color - CSS: Cascading Style Sheets

border-right-color
==================

The **`border-right-color`** CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties `border-color` or `border-right`.

Try it
------

Syntax
------

```css
/\* <color> values \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255 0 0);
border-right-color: hsl(100deg 50% 25% / 75%);
border-right-color: currentcolor;
border-right-color: transparent;

/\* Global values \*/
border-right-color: inherit;
border-right-color: initial;
border-right-color: revert;
border-right-color: revert-layer;
border-right-color: unset;
```

The `border-right-color` property is specified as a single value.

### Values

`<color>`

The color of the right border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

border-right-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### A simple div with a border

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-right`, and `border-color`.
* The color-related CSS properties for the other borders: `border-left-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-right-style` and `border-right-width`.
* The default `currentcolor` color value.


Scaling of SVG backgrounds - CSS: Cascading Style Sheets

Scaling of SVG backgrounds
==========================

Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the `background-image` property, and even more to keep in mind when also scaling them using the `background-size` property. This article describes how scaling of SVG images is handled when using these properties.

The algorithm, in summary
-------------------------

The algorithm can for the most part be summarized by these four rules. There are some edge cases that aren't covered by these rules, but this covers the majority of cases.

1. If `background-size` specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins.
2. If the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
3. If the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins.
4. If none of the above cases are met, the image is rendered at the same size as the background area.

It's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. An SVG image with fixed dimensions will be treated just like a raster image of the same size.

**Note:** If you are trying to stretch your SVG to a different aspect ratio with CSS—for example in order to stretch it over the page background—make sure your SVG includes `preserveAspectRatio="none"`. Find out more about `preserveAspectRatio`.

Source image examples
---------------------

Before diving in to look at the results of using different kinds of source images and seeing how they look when used with `background-size`, it would be helpful to look at a few example source images that have different dimensions and sizing settings.

In each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the SVG source.

### Dimensionless and proportionless

This image is both dimensionless and proportionless. It doesn't care what size it is, nor does it care about remaining at a particular aspect ratio. This would make a good gradient desktop background that would work regardless of your screen size and its aspect ratio.

![no-dimensions-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio.png)

SVG source

### One specified dimension and proportionless

This image specifies a width of 100 pixels but no height or intrinsic ratio. This is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block.

![100px-wide-no-height-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio.png)

SVG source

### One specified dimension with intrinsic ratio

This image specifies a 100 pixel height but no width. It also specifies an intrinsic aspect ratio of 3:4. This ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio).

This is very much like specifying a specific width and height, since once you have one dimension and a ratio, the other dimension is implied, but it's still a useful example.

![100px-height-3x4-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio.png)

SVG source

### No width or height with intrinsic ratio

This image doesn't specify either a width or a height; instead, it specifies an intrinsic ratio of 1:1. Think of this like a program icon. It's always square, and is usable at any size, such as 32x32, 128x128, or 512x512, for example.

![no-dimensions-1x1-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio.png)

SVG source

Scaling examples
----------------

Now let's see some examples of what happens as we apply different scaling to these images. In each of the examples below, the enclosing rectangles are 300 pixels wide and 200 pixels tall. In addition, the backgrounds have `background-repeat` set to no-repeat for clarity.

**Note:** The screenshots below show the **expected** rendering. Not all browsers currently render these correctly.

### Specifying 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. In other words, the image 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.

#### Source: No dimensions or intrinsic ratio

Given this CSS:

```css
background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;
```

The rendered output would look like this:

![fixed-no-dimensions-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-or-ratio.png)

#### Source: One specified dimension, no intrinsic ratio

Given this CSS:

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;
```

The rendered output would look like this:

![fixed-100px-wide-no-height-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-wide-no-height-or-ratio.png)

#### Source: One specified dimension with intrinsic ratio

Given this CSS:

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;
```

The rendered output would look like this:

![fixed-100px-height-3x4-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-100px-height-3x4-ratio.png)

#### Source: No specified width or height with intrinsic ratio

Given this CSS:

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;
```

The rendered output would look like this:

![fixed-no-dimensions-1x1-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/fixed-no-dimensions-1x1-ratio.png)

### Using contain or cover

Specifying `cover` for `background-size` makes the picture as small as possible while still covering the entire background area. `contain`, on the other hand, makes the image as large as possible while not being clipped by the background area.

For an image with an intrinsic ratio, exactly one size matches the `cover`/fit criteria alone. But if there is no intrinsic ratio specified, `cover`/fit isn't sufficient, so the large/small constraints choose the resulting size.

#### Source: No dimensions or intrinsic ratio

If an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![no-dimensions-or-ratio-contain.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-or-ratio-contain.png)

#### Source: One specified dimension, no intrinsic ratio

Similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![100px-wide-no-height-or-ratio-contain.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-contain.png)

#### Source: One specified dimension with intrinsic ratio

Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting `contain` or `cover`). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with `contain` means drawing a 150x200 background.

##### contain case

```css
background: url(100px-height-3x4-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![100px-height-3x4-ratio-contain.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-contain.png)

Notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.

##### cover case

```css
background: url(100px-height-3x4-ratio.svg);
background-size: cover;
```

The rendered output looks like this:

![100px-height-3x4-ratio-cover.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-height-3x4-ratio-cover.png)

Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

#### Source: No dimensions with intrinsic ratio

When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.

##### contain case

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;
```

The rendered output looks like this:

![no-dimensions-1x1-ratio-contain.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-contain.png)

Notice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.

##### cover case

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;
```

The rendered output looks like this:

![no-dimensions-1x1-ratio-cover.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/no-dimensions-1x1-ratio-cover.png)

Here, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.

### Automatic sizing using "auto" for both dimensions

If `background-size` is set to `auto` or `auto auto`, rule 2 says that rendering must preserve any intrinsic ratio that's provided.

#### Source: No dimensions or intrinsic ratio

When no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-no-dimensions-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-or-ratio.png)

#### Source: One dimension and no intrinsic ratio

If no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-100px-wide-no-height-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-wide-no-height-or-ratio.png)

Note here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).

#### Source: One dimension and an intrinsic ratio

If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.

```css
background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-100px-height-3x4-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-100px-height-3x4-ratio.png)

Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the `auto` case.

#### Source: No fixed dimensions with intrinsic ratio

When an intrinsic ratio is specified, but no dimensions, rule 4 is applied — except that rule 2 also applies. The image is therefore rendered just like for the `contain` case.

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;
```

The rendered output looks like this:

![auto-no-dimensions-1x1-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/auto-no-dimensions-1x1-ratio.png)

### Using "auto" and one specific length

Given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.

#### Source: No dimensions or intrinsic ratio

If the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the `auto` dimension.

```css
background: url(no-dimensions-or-ratio.svg);
background-size: auto 150px;
```

![1auto-no-dimensions-or-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-or-ratio.png)

Here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.

#### Source: One specified dimension with no intrinsic ratio

If the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to `auto` in the CSS.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;
```

![100px-wide-no-height-or-ratio-length-auto.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-length-auto.png)

Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, `auto` selects the height of the background area as the height for the rendered image.

```css
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;
```

![100px-wide-no-height-or-ratio-auto-length.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/100px-wide-no-height-or-ratio-auto-length.png)

In this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.

#### Source: One specified dimension with intrinsic ratio

When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.

```css
background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;
```

![1auto-100px-height-3x4-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-100px-height-3x4-ratio.png)

In this case, we use the width of the image specified in the CSS set at 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the height for the `auto` case.

#### Source: No specified dimensions with intrinsic ratio

If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.

```css
background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;
```

![1auto-no-dimensions-1x1-ratio.png](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds/1auto-no-dimensions-1x1-ratio.png)

The width is set by the CSS to 150px. The `auto` value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.

See also
--------

* `background-size`
* Blog post: Properly resizing vector image backgrounds


text-decoration - CSS: Cascading Style Sheets

text-decoration
===============

The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.

Try it
------

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. For example, in the markup `<p>This text has <em>some emphasized words</em> in it.</p>`, the style rule `p { text-decoration: underline; }` would cause the entire paragraph to be underlined. The style rule `em { text-decoration: none; }` would not cause any change; the entire paragraph would still be underlined. However, the rule `em { text-decoration: overline; }` would cause a second decoration to appear on "some emphasized words".

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
Syntax
------

```css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/\* Global values \*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;
```

The `text-decoration` property is specified as one or more space-separated values representing the various longhand text-decoration properties.

### Values

`text-decoration-line`

Sets the kind of decoration used, such as `underline` or `line-through`.

`text-decoration-color`

Sets the color of the decoration.

`text-decoration-style`

Sets the style of the line used for the decoration, such as `solid`, `wavy`, or `dashed`.

`text-decoration-thickness`

Sets the thickness of the line used for the decoration.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `text-decoration-color`: `currentcolor`
* `text-decoration-style`: `solid`
* `text-decoration-line`: `none`
 |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `text-decoration-line`: as specified
* `text-decoration-style`: as specified
* `text-decoration-color`: computed color
* `text-decoration-thickness`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `text-decoration-color`: a color
* `text-decoration-style`: discrete
* `text-decoration-line`: discrete
* `text-decoration-thickness`: by computed value type
 |

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

text-decoration =
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>

```

Examples
--------

### Demonstration of text-decoration values

```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>
```

#### Result

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |

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

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

See also
--------

* The individual text-decoration properties are `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and `text-decoration-thickness`.
* The `text-decoration-skip-ink`, `text-underline-offset`, and `text-underline-position` properties also affect text-decoration, but are not included in the shorthand.
* The `list-style` attribute controls the appearance of items in HTML `<ol>` and `<ul>` lists.


box-align - CSS: Cascading Style Sheets

box-align
=========

**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.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard.

The **`box-align`** CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.

See flexbox for information about the current standard.

The direction of layout depends on the element's orientation: horizontal or vertical.

Syntax
------

```css
/\* Keyword values \*/
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/\* Global values \*/
box-lines: inherit;
box-lines: initial;
box-lines: unset;
```

The `box-align` property is specified as one of the keyword values listed below.

### Values

`start`

The box aligns contents at the start, leaving any extra space at the end.

`center`

The box aligns contents in the center, dividing any extra space equally between the start and the end.

`end`

The box aligns contents at the end, leaving any extra space at the start.

`baseline`

The box aligns the baselines of the contents (lining up the text). This only applies if the box's orientation is horizontal.

`stretch`

The box stretches the contents so that there is no extra space in the box.

Notes
-----

The edge of the box designated the *start* for alignment purposes depends on the box's orientation:

* For horizontal elements, the *start* is the top edge.
* For vertical elements, the *start* is the left edge.

The edge opposite to the start is designated the *end*.

If the alignment is set using the element's `align` attribute, then the style is ignored.

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

|  |  |
| --- | --- |
| Initial value | `stretch` |
| Applies to | elements with a CSS `display` value of `box` or `inline-box` |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-align =
  start | center | end | baseline | stretch
```

Examples
--------

### Setting box alignment

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
 div.example {
 display: box; /\* As specified \*/
 display: -moz-box; /\* Mozilla \*/
 display: -webkit-box; /\* WebKit \*/

 /\* Make this box taller than the children,
 so there is room for the box-pack \*/
 height: 400px;

 /\* Make this box wider than the children
 so there is room for the box-align \*/
 width: 300px;

 /\* Children should be oriented vertically \*/
 box-orient: vertical; /\* As specified \*/
 -moz-box-orient: vertical; /\* Mozilla \*/
 -webkit-box-orient: vertical; /\* WebKit \*/

 /\* Align children to the horizontal center of this box \*/
 box-align: center; /\* As specified \*/
 -moz-box-align: center; /\* Mozilla \*/
 -webkit-box-align: center; /\* WebKit \*/

 /\* Pack children to the bottom of this box \*/
 box-pack: end; /\* As specified \*/
 -moz-box-pack: end; /\* Mozilla \*/
 -webkit-box-pack: end; /\* WebKit \*/
 }

 div.example > p {
 /\* Make children narrower than their parent,
 so there is room for the box-align \*/
 width: 200px;
 }
 </style>
  </head>
  <body>
    <div class="example">
      <p>
        I will be second from the bottom of div.example, centered horizontally.
      </p>
      <p>I will be on the bottom of div.example, centered horizontally.</p>
    </div>
  </body>
</html>
```

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
--------

* `align-items`, `box-orient`, `box-direction`, `box-pack`


contain-intrinsic-size - CSS: Cascading Style Sheets

contain-intrinsic-size
======================

The **`contain-intrinsic-size`** CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `contain-intrinsic-width`
* `contain-intrinsic-height`
Syntax
------

```css
/\* Keyword values \*/
contain-intrinsic-width: none;

/\* <length> values \*/
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/\* width | height \*/
contain-intrinsic-size: 1000px 1.5em;

/\* auto <length> \*/
contain-intrinsic-size: auto 300px;
contain-intrinsic-size: auto none;

/\* auto width | auto height \*/
contain-intrinsic-size: auto 300px auto 4rem;

/\* Global values \*/
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: revert-layer;
contain-intrinsic-size: unset;
```

### Values

The following values may be specified for the `contain-intrinsic-size` property:

`none`

The element has no intrinsic size in the given dimension(s).

`<length>`

The element has the specified `<length>` in the given dimension(s).

`auto [<length> | none]`

 A remembered value of the "normally rendered" element size if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.
 The `none` keyword may be used in place of `<length>` where `0px` fixed lengths behave differently than `none` (such as in multi column, or grid layouts).

If one value is provided as a keyword, a length or an `auto [<length> | none]` pair, it applies to both width and height.

 Two length values may be specified, which apply to the width and height in that order.
 If two `auto [<length> | none]` pairs are specified, the first pair applies to the width, and the second to the height.

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

The property is commonly applied alongside elements that can trigger size containment, such as `contain: size` and `content-visibility`.

 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
 The `contain-intrinsic-size` property allows authors to specify an appropriate value to be used as the size for layout.

 The `auto <length>` value allows the size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified length when the element is skipping its contents.
 This allows offscreen elements with `content-visibility: auto` to benefit from size containment without developers having to be as precise in their estimates of element size.
 The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).

 In grid and multi column layouts, an explicit size is treated differently than implicit content-based height.
 Elements might lay out substantially differently than it would have were it simply filled with content up to that height.
 The `auto none` value allows the element to fallback to `contain-intrinsic-size: none` if no remembered value exists, which will allow the element to be laid out as though it had no contents. This is almost always preferred to setting 0px as the intrinsic size in grid and multi column layouts, where contained elements may overflow their parents and can result in unexpected page layout.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `contain-intrinsic-width`: `none`
* `contain-intrinsic-height`: `none`
 |
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `contain-intrinsic-width`: no
* `contain-intrinsic-height`: no
 |
| Computed value | as each of the properties of the shorthand:* `contain-intrinsic-width`: as specified, with <length>s values computed
* `contain-intrinsic-height`: as specified, with <length>s values computed
 |
| Animation type | as each of the properties of the shorthand:* `contain-intrinsic-width`: by computed value type
* `contain-intrinsic-height`: by computed value type
 |

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

contain-intrinsic-size =
  [ auto? [ none | <length> ] ]{1,2}

```

Examples
--------

### Using auto value pairs for intrinsic size

 This example demonstrates `contain-intrinsic-size: auto <length>` and `contain-intrinsic-size: auto none`, using a layout where there are many elements displayed vertically that have both accurate and incorrect intrinsic size estimations.
 Using `content-visibility: auto` skips rendering elements when they are offscreen, so this property is a good candidate to combine with `contain-intrinsic-size` to improve rendering performance and minimize reflows.

 The `contain-intrinsic-size: auto 500px` value pair tells the browser to use 500px as a kind of 'placeholder' size (width and height) for the element when it is offscreen and the page is being laid out.
 When the user scrolls to the element and it needs to be displayed, the browser will calculate the actual size of the element and its contents.
 If there is a difference between the placeholder and calculated size this might force a new layout, with accompanying changes to the sidebar position.

 Once the browser has actual size information for the element, it will remember this size when the element scrolls offscreen again, and use the remembered size for layout calculations instead of the placeholder value.
 The benefit is that the browser does not need to repeatedly render the element contents to calculate its size and is especially useful when the contents are complex or depend on network resources or JavaScript.

#### HTML

```html
<div id="container">
  <div id="auto-length-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto <length></code>.
    </p>
  </div>
  <div class="auto-length">
    <p>Item one</p>
  </div>
  <div class="auto-length">
    <p>Item two</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item three</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item four</p>
  </div>
  <div id="auto-none-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto none</code>.
    </p>
  </div>
  <div class="auto-length none">
    <p>Item five</p>
  </div>
  <div class="auto-length none">
    <p>Item six</p>
  </div>
</div>
```

#### CSS
```

div,
p {
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-family: sans-serif;
}

code {
  background-color: lightgray;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

#container {
  width: 90%;
  height: 80%;
}

.auto-length,
.auto-length.none {
  display: none;
}

#auto-length-note,
#auto-none-note {
  display: block;
  padding: 0;
}

#auto-length-note p,
#auto-none-note p {
  padding: 0.5rem;
  width: 100%;
  height: max-content;
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: tomato;
}

@supports (contain-intrinsic-size: auto none) {
  .auto-length.none {
    display: block;
  }
  #auto-none-note {
    display: none;
  }
}
@supports (contain-intrinsic-size: auto 500px) {
  .auto-length {
    display: block;
  }
  #auto-length-note {
    display: none;
  }
}
```

```css
p {
  height: 500px;
  width: 500px;
  border: 4px dotted;
  background: lightblue;
}

.auto-length {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  background-color: linen;
  outline: 4px dotted blue;
}

.large-intrinsic-size {
  /\* Setting an inaccurate intrinsic size for the element \*/
  contain-intrinsic-size: auto 5000px;
  background-color: lightgray;
  outline: 4px dotted red;
}

.small {
  /\* This element is a lot smaller than expected \*/
  height: 100px;
  width: 100px;
}

.none {
  background-color: papayawhip;
  contain-intrinsic-size: auto none;
  outline: 4px dotted red;
}
```

#### Result

* The first two boxes have an intrinsic size that matches their actual size, so as they flow into view, the layout is recalculated but we see no change in the scrollbar or the scroll position.
* The third and fourth boxes have a huge intrinsic size, so the initial layout that the browser calculated is far too big, and we've made these boxes smaller so that it's obvious when you've reached a point that forces a drastic layout change.
 When the third and fourth boxes scroll into view, the size is recalculated, making the box and its parent less tall.
 The effect is that the scroller jumps down the page (we've effectively scrolled further through the box than we'd estimated) and the scroller is longer, because the entire page is less tall than we'd estimated.
* The last boxes have `auto none`, so they have zero estimated size.
 When they scroll into view the size of the element and its parent are recalculated to be much larger, so the scroller decreases in size and moves up the bar.

After scrolling all the way to the bottom you can subsequently scroll up and down smoothly, because using `content-visibility: auto` saves the actual rendered size of the element for next time it is displayed.

### Setting the intrinsic size

This example provides selection lists that can be used to modify `contain-intrinsic-size`, `content-visibility` and `contain` on an element in order to observe the effect of the different settings.

#### CSS

```css
#contained\_element {
  border: 2px solid green;
  width: 120px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

#### JavaScript

The code below adds styles to, and removes styles from, the containing element based on the selected options.

```js
const containedElement = document.querySelector("#contained\_element");
const intrinsicSizeSelector = document.querySelector(
  "#contain\_intrinsic\_size\_selector",
);
const containSelector = document.querySelector("#contain\_selector");
const contentVisibilitySelector = document.querySelector(
  "#content\_visibility\_selector",
);

containedElement.style["contain-intrinsic-size"] =
  intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
  containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
  contentVisibilitySelector.options[
    contentVisibilitySelector.selectedIndex
  ].text;

intrinsicSizeSelector.addEventListener("change", () => {
  containedElement.style["contain-intrinsic-size"] =
    intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});

containSelector.addEventListener("change", () => {
  containedElement.style["contain"] =
    containSelector.options[containSelector.selectedIndex].text;
});

contentVisibilitySelector.addEventListener("change", () => {
  containedElement.style["content-visibility"] =
    contentVisibilitySelector.options[
      contentVisibilitySelector.selectedIndex
    ].text;
});
```

#### HTML

The HTML defines two buttons, a container element that is subject to containment via the `content-visibility` property.

```html
<p>
  <label for="contain\_intrinsic\_size\_selector">contain-intrinsic-size:</label>
  <select id="contain\_intrinsic\_size\_selector">
    <option>none</option>
    <option>40px 130px</option>
    <option>auto 40px auto 130px</option></select
 >;<br />

  <label for="contain\_selector">contain:</label>
  <select id="contain\_selector">
    <option>none</option>
    <option>size</option>
    <option>strict</option></select
 >;<br />

  <label for="content\_visibility\_selector">content-visibility:</label>
  <select id="content\_visibility\_selector">
    <option>visible</option>
    <option>auto</option>
    <option>hidden</option></select
 >;
</p>

<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

#### Result

 Use the selectors to apply the given styles to the containing `div` element.
 Note that when `content-visibility` is `visible` or `auto`, changing `contain-intrinsic-size` makes no difference.
 However if the content is hidden, having a `contain-intrinsic-size` of `none` collapses the parent element as though its child element had no size.

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size |

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

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

See also
--------

* content-visibility: the new CSS property that boosts your rendering performance (web.dev)
* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`


font - CSS: Cascading Style Sheets

font
====

The **`font`** CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

Try it
------

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by `font`, the longhands `font-size-adjust` and `font-kerning` are also reset to their initial values.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
Syntax
------

```css
/\* font-size font-family \*/
font: 1.2em "Fira Sans", sans-serif;

/\* font-size/line height font-family \*/
font: 1.2em/2 "Fira Sans", sans-serif;

/\* font-style font-weight font-size font-family \*/
font: italic bold 1.2em "Fira Sans", sans-serif;

/\* font-stretch font-variant font-size font-family \*/
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/\* system font \*/
font: caption;
```

The `font` property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

If `font` is specified as a system keyword, it must be one of: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`.

If `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.
* `line-height` must immediately follow `font-size`, preceded by "/", like this: "`16px/3`"
* `font-family` must be the last value specified.
### Values

`<'font-style'>`

See the `font-style` CSS property.

`<'font-variant'>`

See the `font-variant` CSS property.

`<'font-weight'>`

See the `font-weight` CSS property.

`<'font-stretch'>`

See the `font-stretch` CSS property.

`<'font-size'>`

See the `font-size` CSS property.

`<'line-height'>`

See the `line-height` CSS property.

`<'font-family'>`

See the `font-family` CSS property.

#### System font values

`caption`

The system font used for captioned controls (e.g., buttons, drop-downs, etc.).

`icon`

The system font used to label icons.

`menu`

The system font used in menus (e.g., dropdown menus and menu lists).

`message-box`

The system font used in dialog boxes.

`small-caption`

The system font used for labeling small controls.

`status-bar`

The system font used in window status bars.

Prefixed system font keywords

Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `font-style`: `normal`
* `font-variant`: `normal`
* `font-weight`: `normal`
* `font-stretch`: `normal`
* `font-size`: `medium`
* `line-height`: `normal`
* `font-family`: depends on user agent
 |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | as each of the properties of the shorthand:* `font-size`: refer to the parent element's font size
* `line-height`: refer to the font size of the element itself
 |
| Computed value | as each of the properties of the shorthand:* `font-style`: as specified
* `font-variant`: as specified
* `font-weight`: the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value
* `font-stretch`: as specified
* `font-size`: as specified, but with relative lengths converted into absolute lengths
* `line-height`: for percentage and length values, the absolute length, otherwise as specified
* `font-family`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `font-style`: by computed value type; `normal` animates as `oblique 0deg`
* `font-variant`: discrete
* `font-weight`: a font weight
* `font-stretch`: a font stretch
* `font-size`: a length
* `line-height`: either number or length
* `font-family`: discrete
 |

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

font =
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  <system-family-name>

<font-variant-css2> =
  normal      |
  small-caps

<font-stretch-css3> =
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded

<system-family-name> =
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar

```

Examples
--------

### Setting font properties

```css
/\* Set the font size to 12px and the line height to 14px.
 Set the font family to sans-serif \*/
p {
  font: 12px/14px sans-serif;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 Set the font family to sans-serif \*/
p {
  font: 80% sans-serif;
}

/\* Set the font weight to bold,
 the font-style to italic,
 the font size to large,
 and the font family to serif. \*/
p {
  font: bold italic large serif;
}

/\* Use the same font as the status bar of the window \*/
p {
  font: status-bar;
}
```

### Live sample
```

<p>
  Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```

```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```

```
const textAreas = document.getElementsByClassName("curCss");

function getProperties() {
  return (
    `${getCheckedValue("font\_style")} ` +
    `${getCheckedValue("font\_variant")} ` +
    `${getCheckedValue("font\_weight")} ` +
    `${getCheckedValue("font\_size")}` +
    `${getCheckedValue("line\_height")} ` +
    `${getCheckedValue("font\_family")}`
  );
}

function getCheckedValue(radioName) {
  const radios = document.forms[0].elements[radioName];
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      const curElemName = `input\_${radioName}`;
      const curElem = document.getElementById(curElemName);
      curElem.value = radios[i].value;

      return radios[i].value;
    }
  }
}

function setCss() {
  injectCss(getProperties());
}

function injectCss(cssFragment) {
  const old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.textContent = `.fontShortHand{font: ${cssFragment}}`;
  document.body.appendChild(css);
}

setCss();
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop |

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

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

See also
--------

* `font-style`
* `font-weight`
* Fundamental text and font styling


Descendant combinator - CSS: Cascading Style Sheets

Descendant combinator
=====================

The **descendant combinator** — typically represented by a single space (" ") character — combines two selectors such that elements 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. Selectors that utilize a descendant combinator are called *descendant selectors*.

```css
/\* List items that are descendants of the "my-things" list \*/
ul.my-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. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.

Syntax
------

```css
selector1 selector2 {
  /\* property declarations \*/
}
```

Examples
--------

### CSS

```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML

```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

See also
--------

* Child combinator


path() - CSS: Cascading Style Sheets

path()
======

The **`path()`** CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.

Try it
------

Syntax
------

When used in `offset-path` or `d`:

```css
path(<string>)
```

When used in `clip-path`:

```css
path([<'fill-rule'>,]?<string>)
```

### Parameters

`<fill-rule>` Optional

An optional value of `nonzero` (the default when omitted) or `evenodd`, which specifies the filling rule.

`<string>`

A data string for defining an SVG path. The syntax for the contents of this `<string>` is identical to SVG.

### Return value

Returns a `<basic-shape>` value.

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

<path()> =
  path( <'fill-rule'>? , <string> )

```

Examples
--------

### Examples of correct values for path()

```css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
```

### Use as the value of offset-path

The `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.

### Modify the value of the SVG path d attribute

The `path()` can be used to modify the value of the SVG `d` attribute, which can also be set to `none` in your CSS.

The "V" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property.

#### CSS

```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}
```

#### HTML

```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
```

#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |

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

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

See also
--------

* `<shape-outside>`
* CSS Shapes
* Overview of CSS Shapes
* SVG Path Syntax Illustrated Guide


::spelling-error - CSS: Cascading Style Sheets

::spelling-error
================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`::spelling-error`** CSS pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.

Allowable properties
--------------------

Only a small subset of CSS properties can be used in a rule with `::spelling-error` in its selector:

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color`
* `text-shadow`
Syntax
------

```css
::spelling-error {
  /\* ... \*/
}
```

Examples
--------

### Simple document spell check

In this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.

#### HTML

```html
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>
```

#### CSS

```css
::spelling-error {
  text-decoration: wavy red;
}
```

#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

See also
--------

* `::grammar-error`


text-decoration-line - CSS: Cascading Style Sheets

text-decoration-line
====================

The **`text-decoration-line`** CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.

Try it
------

When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead.

Syntax
------

```css
/\* Single keyword \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* Multiple keywords \*/
text-decoration-line: underline overline; /\* Two decoration lines \*/
text-decoration-line: overline underline line-through; /\* Multiple decoration lines \*/

/\* Global values \*/
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
```

The `text-decoration-line` property is specified as `none`, or **one or more** space-separated values from the list below.

### Values

`none`

Produces no text decoration.

`underline`

Each line of text has a decorative line beneath it.

`overline`

Each line of text has a decorative line above it.

`line-through`

Each line of text has a decorative line going through its middle.

`blink`
Deprecated

The text blinks (alternates between visible and invisible). Conforming user agents may not blink the text. This value is **deprecated** in favor of CSS animations.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

text-decoration-line =
  none                                                |
  [ underline || overline || line-through || blink ]

```

Examples
--------

### Basic example

```html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
```

```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-property |

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

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

See also
--------

* When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead, which also includes:
    + `text-decoration-style`
    + `text-decoration-color`
    + `text-decoration-thickness`
* `text-underline-offset`


widows - CSS: Cascading Style Sheets

widows
======

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.

In typography, a *widow* is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)

Syntax
------

```css
/\* <integer> values \*/
widows: 2;
widows: 3;

/\* Global values \*/
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
```

### Values

`<integer>`

The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

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

|  |  |
| --- | --- |
| Initial value | `2` |
| Applies to | block container elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

widows =
  <integer [1,∞]>

```

Examples
--------

### Controlling column widows

#### HTML

```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.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```

#### CSS

```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

See also
--------

* `orphans`
* Paged media