recursal/MDN huggingface dataset:
list-style-position
===================

The **`list-style-position`** CSS property sets the position of the `::marker` relative to a list item.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
list-style-position: inside;
list-style-position: outside;

/\* Global values \*/
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
```


The `list-style-position` property is specified as one of the keyword values listed below.

### Values

`inside`

The `::marker` is the first element among the list item's contents.

`outside`

The `::marker` is outside the principal block box. This is the default value for `list-style`.

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

This property is applied to list items, i.e., elements with ``display`: list-item;`. By default this includes `<li>` elements. Because this property is inherited, it can be set on the parent element (normally `<ol>` or `<ul>`) to let it apply to all list items.

If a block element is the first child of a list element declared as `list-style-position: inside`, then the block element is placed on the line after the marker-box.

It is often more convenient to use the shorthand `list-style`.

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

|  |  |
| --- | --- |
| Initial value | `outside` |
| Applies to | list items |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

list-style-position =   
  inside   |  
  outside    
  
```

Examples
--------

### Setting list item position

#### HTML


```html
<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```


#### CSS


```css
.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}
```


#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

See also
--------

* `list-style` shorthand
* `list-style-type` property
* `list-style-image` property
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module
font-synthesis-weight
=====================

The **`font-synthesis-weight`** CSS property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------


```css
/\* Keyword values \*/
font-synthesis-weight: auto;
font-synthesis-weight: none;

/\* Global values \*/
font-synthesis-weight: inherit;
font-synthesis-weight: initial;
font-synthesis-weight: revert;
font-synthesis-weight: revert-layer;
font-synthesis-weight: unset;
```

### Values

`auto`

Indicates that the missing bold typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of the missing bold typeface by the browser is not allowed.

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

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

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

font-synthesis-weight =   
  auto  |  
  none    
  
```

Examples
--------

### Disabling synthesis of bold typeface

This example shows turning off synthesis of the bold typeface by the browser in the `Montserrat` font.

#### HTML


```html
<p class="english">
  This is the default <strong>bold typeface</strong> and
  <em>oblique typeface</em>.
</p>

<p class="english no-syn">
  The <strong>bold typeface</strong> is turned off here but not the
  <em>oblique typeface</em>.
</p>
```


#### CSS


```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-weight: none;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-weight |

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-small-caps, font-synthesis-style
* `font-style`, `font-variant`, `font-weight`
text-decoration-skip
====================

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

The **`text-decoration-skip`** CSS property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

**Note:** Most other browsers are converging on supporting the simpler `text-decoration-skip-ink` property.

Syntax
------


```css
/\* Keyword values \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* Multiple keywords \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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

### Values

`none`

Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.

`objects`

The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

`spaces`

All spacing is skipped: all Unicode white space characters and all word separators, plus any adjacent `letter-spacing` or `word-spacing`.

`leading-spaces`

The same as `spaces`, except that only leading spaces are skipped.

`trailing-spaces`

The same as `spaces`, except that only trailing spaces are skipped.

`edges`

The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)

![An example of "text-decoration-skip: edges;".](/en-US/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a *decorating box* never draws over its own box decoration.

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

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

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

text-decoration-skip =   
  none  |  
  auto    
  
```

Examples
--------

### Skipping edges

#### HTML


```html
<p>Hey, grab a cup of <em>coffee!</em></p>
```


#### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}
```


#### Result

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

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

See also
--------

* `text-decoration-skip-ink`
border-inline-start-width
=========================

The **`border-inline-start-width`** CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------


```css
/\* <'border-width'> values \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;

/\* Global values \*/
border-inline-start-width: inherit;
border-inline-start-width: initial;
border-inline-start-width: revert;
border-inline-start-width: revert-layer;
border-inline-start-width: unset;
```


Related properties are `border-block-start-width`, `border-block-end-width`, and `border-inline-end-width`, which define the other border widths of the element.

### Values

`<'border-width'>`

The width of the border. See `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

border-inline-start-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Examples
--------

### 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;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
symbols()
=========

The **`symbols()`** CSS function enables defining counter styles inline, directly as a value of properties such as `list-style`, providing a less powerful but simpler alternative to the `@counter-style` method of defining a counter style.

Unlike `@counter-style`, which defines a reusable counter style, `symbols()` is *anonymous* (i.e., it can only be used once). This function accepts strings and images as values. In comparison, the `@counter-style`'s `symbols` descriptor also accepts identifiers.

Syntax
------


```css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
```


`<symbols-type>` can be one of the following:

* `cyclic`: The system cycles through the given values in the order of their definition, and returns to the start when it reaches the end.
* `numeric`: The system interprets the given values as the successive units of a place-value numbering system.
* `alphabetic`: The system interprets the given values as the digits of an alphabetic numbering system, like a place-value numbering system but without `0`.
* `symbolic`: The system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.).
* `fixed`: The system cycles through the given values once, then falls back to Arabic numerals.
Examples
--------

### HTML


```html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```

### CSS


```css
ol {
  list-style: symbols(cyclic "\*" "†" "‡");
}
```

### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # symbols-function |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-type`
* CSS counter styles module
* CSS lists and counters module
inset-inline
============

The **`inset-inline`** CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top` and `bottom`, or `right` and `left` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `inset-inline-end`
* `inset-inline-start`
Syntax
------


```css
/\* <length> values \*/
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-inline: 10% 5%;

/\* Keyword value \*/
inset-inline: auto;

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

### Values

The `inset-inline` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `inset-inline-start`: `auto`
* `inset-inline-end`: `auto`
 |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as each of the properties of the shorthand:* `inset-inline-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-inline-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

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

inset-inline =   
  <'top'>{1,2}    
  
```

Examples
--------

### Setting inline start and end offsets

#### 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;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-inline |

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

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

See also
--------

* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* The mapped physical shortcut: `inset`
* The mapped block shortcut: `inset-block`
* `writing-mode`, `direction`, `text-orientation`
border-right-style
==================

The **`border-right-style`** CSS property sets the line style of an element's right `border`.

Try it
------

**Note:** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------


```css
/\* Keyword values \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

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


The `border-right-style` property is specified as a single `<line-style>` keyword value.

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

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

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

border-right-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Border styles

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style example classes \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```


#### Result

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

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

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

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

See also
--------

* The other style-related border properties: `border-bottom-style`, `border-left-style`, `border-top-style`, and `border-style`.
* The other right-border-related properties: `border-right`, `border-right-color`, and `border-right-width`.
border-left-width
=================

The **`border-left-width`** CSS property sets the width of the left border of an element.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* <length> values \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/\* Global keywords \*/
border-left-width: inherit;
border-left-width: initial;
border-left-width: revert;
border-left-width: revert-layer;
border-left-width: unset;
```

### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`


**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | the absolute length or `0` if `border-left-style` is `none` or `hidden` |
| Animation type | a length |

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

border-left-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Examples
--------

### Comparing border widths

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```


#### Result

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

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

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

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

See also
--------

* The other border-width-related CSS properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* The other border-left-related CSS properties: `border`, `border-left`, `border-left-style`, and `border-left-color`.
column-count
============

The **`column-count`** CSS property breaks an element's content into the specified number of columns.

Try it
------

Syntax
------


```css
/\* Keyword value \*/
column-count: auto;

/\* <integer> value \*/
column-count: 3;

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

### Values

`auto`

The number of columns is determined by other CSS properties, such as `column-width`.

`<integer>`

Is a strictly positive `<integer>` describing the ideal number of columns into which the content of the element will be flowed. If the `column-width` is also set to a non-`auto` value, it merely indicates the maximum allowed number of columns.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |

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

column-count =   
  auto             |  
  <integer [1,∞]>    
  
```

Examples
--------

### Splitting a paragraph across three columns

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `column-count`
  property. The text is equally distributed over the columns.
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
}
```


#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cc |

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

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

See also
--------

* `column-width`, `columns` shorthand
* `column-rule-color`, `column-rule-style`, `column-rule-width`, `column-rule` shorthand
* Multiple-column Layout (Learn Layout)
* Basic Concepts of Multicol