path: root/files/de/web/css/css_values_and_units/index.html

---
title: CSS values and units
slug: Web/CSS/CSS_Values_and_Units
translation_of: Web/CSS/CSS_Values_and_Units
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary">Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p>

<h2 id="Textual_data_types">Textual data types</h2>

<ul>
 <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
 <li>Pre-defined keywords as an <code>&lt;ident&gt;</code></li>
 <li>{{cssxref("&lt;string&gt;")}}</li>
 <li>{{cssxref("&lt;url&gt;")}}</li>
</ul>

<p>Text data types are either <code>&lt;string&gt;</code>, a quoted series of characters, or an <code>&lt;ident&gt;</code>, a "CSS Identifier" which is an unquoted string. A <code>&lt;string&gt;</code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code>&lt;ident&gt;</code> or <code>&lt;custom-ident&gt;</code>, must be unquoted.</p>

<p>In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a  {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}}, or both.</p>

<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code>&lt;custom-ident&gt; | &lt;string&gt;</code>, meaning quotes are optional, such as is the case with animation names:</p>

<pre class="brush: css notranslate">@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}</pre>

<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code>&lt;custom-ident&gt;</code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p>

<pre class="brush: css notranslate">.item {
  grid-area: content;
}
</pre>

<p>In comparison, a data type that is a {{cssxref("&lt;string&gt;")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p>

<pre class="brush: css notranslate">.item::after {
    content: "This is my content.";
}
</pre>

<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("&lt;custom-ident&gt;")}} and {{cssxref("&lt;string&gt;")}} reference pages for more details.</p>

<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3>

<p>Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.</p>

<p>When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.</p>

<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>

<p>Such values are used without quotes:</p>

<pre class="brush: css notranslate"><code>.box {
    float: left;
}
</code></pre>

<h3 id="CSS-wide_values">CSS-wide values</h3>

<p>In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.</p>

<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p>

<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p>

<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p>

<h3 id="URLs">URLs</h3>

<p>A {{cssxref("&lt;url&gt;")}} type uses functional notation, which accepts a <code>&lt;string&gt;</code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p>

<pre class="brush: css notranslate"><code>.box {
  background-image: url("images/my-background.png");
}</code>

<code>.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}</code>
</pre>

<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code>&lt;url-token&gt;</code>, which has extra requirements including the escaping of certain characters. See {{cssxref("&lt;url&gt;")}}  for more information.</p>

<h2 id="Numeric_data_types">Numeric data types</h2>

<ul>
 <li>{{cssxref("&lt;integer&gt;")}}</li>
 <li>{{cssxref("&lt;number&gt;")}}</li>
 <li>{{cssxref("&lt;dimension&gt;")}}</li>
 <li>{{cssxref("&lt;percentage&gt;")}}</li>
</ul>

<h3 id="Integers">Integers</h3>

<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p>

<h3 id="Numbers">Numbers</h3>

<p>A {{cssxref("&lt;number&gt;")}} represents a real number, which may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code> or <code>-1.2</code>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p>

<h3 id="Dimensions">Dimensions</h3>

<p>A {{cssxref("&lt;dimension&gt;")}} is a <code>&lt;number&gt;</code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. <code>1 cm</code> is not valid.</p>

<p>CSS uses dimensions to specify:</p>

<ul>
 <li>{{cssxref("&lt;length&gt;")}} (Distance units)</li>
 <li>{{cssxref("&lt;angle&gt;")}}</li>
 <li>{{cssxref("&lt;time&gt;")}}</li>
 <li>{{cssxref("&lt;frequency&gt;")}}</li>
 <li>{{cssxref("&lt;resolution&gt;")}}</li>
</ul>

<p>These are all covered in subsections below.</p>

<h4 id="Distance_units">Distance units</h4>

<p>Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("&lt;length&gt;")}} type. There are two types of lengths in CSS: relative and absolute.</p>

<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p>

<table class="standard-table">
 <caption>
 <h4 id="Relative_length_units">Relative length units</h4>
 </caption>
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Relative to</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>em</code></td>
   <td>Font size of the element.</td>
  </tr>
  <tr>
   <td><code>ex</code></td>
   <td>x-height of the element's font.</td>
  </tr>
  <tr>
   <td><code>cap</code></td>
   <td>Cap height (the nominal height of capital letters) of the element's font.</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td>
  </tr>
  <tr>
   <td><code>ic</code></td>
   <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>Font size of the root element.</td>
  </tr>
  <tr>
   <td><code>lh</code></td>
   <td>Line height of the element.</td>
  </tr>
  <tr>
   <td><code>rlh</code></td>
   <td>Line height of the root element.</td>
  </tr>
  <tr>
   <td><code>vw</code></td>
   <td>1% of viewport's width.</td>
  </tr>
  <tr>
   <td><code>vh</code></td>
   <td>1% of viewport's height.</td>
  </tr>
  <tr>
   <td><code>vi</code></td>
   <td>1% of viewport's size in the root element's inline axis.</td>
  </tr>
  <tr>
   <td><code>vb</code></td>
   <td>1% of viewport's size in the root element's block axis.</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>1% of viewport's smaller dimension.</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>1% of viewport's larger dimension.</td>
  </tr>
 </tbody>
</table>

<p>Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p>

<table class="standard-table">
 <caption>
 <h4 id="Absolute_length_units">Absolute length units</h4>
 </caption>
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Equivalent to</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>cm</code></td>
   <td>Centimeters</td>
   <td>1cm = 96px/2.54</td>
  </tr>
  <tr>
   <td><code>mm</code></td>
   <td>Millimeters</td>
   <td>1mm = 1/10th of 1cm</td>
  </tr>
  <tr>
   <td><code>Q</code></td>
   <td>Quarter-millimeters</td>
   <td>1Q = 1/40th of 1cm</td>
  </tr>
  <tr>
   <td><code>in</code></td>
   <td>Inches</td>
   <td>1in = 2.54cm = 96px</td>
  </tr>
  <tr>
   <td><code>pc</code></td>
   <td>Picas</td>
   <td>1pc = 1/16th of 1in</td>
  </tr>
  <tr>
   <td><code>pt</code></td>
   <td>Points</td>
   <td>1pt = 1/72th of 1in</td>
  </tr>
  <tr>
   <td><code>px</code></td>
   <td>Pixels</td>
   <td>1px = 1/96th of 1in</td>
  </tr>
 </tbody>
</table>

<p>When including a length value, if the length is <code>0</code>, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.</p>

<h4 id="Angle_units">Angle units</h4>

<p>Angle values are represented by the type {{cssxref("&lt;angle&gt;")}} and accept the following values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>deg</code></td>
   <td>Degrees</td>
   <td>There are 360 degrees in a full circle.</td>
  </tr>
  <tr>
   <td><code>grad</code></td>
   <td>Gradians</td>
   <td>There are 400 gradians in a full circle.</td>
  </tr>
  <tr>
   <td><code>rad</code></td>
   <td>Radians</td>
   <td>There are 2π radians in a full circle.</td>
  </tr>
  <tr>
   <td><code>turn</code></td>
   <td>Turns</td>
   <td>There is 1 turn in a full circle.</td>
  </tr>
 </tbody>
</table>

<h4 id="Time_units">Time units</h4>

<p>Time values are represented by the type {{cssxref("&lt;time&gt;")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>s</code></td>
   <td>Seconds</td>
   <td></td>
  </tr>
  <tr>
   <td><code>ms</code></td>
   <td>Milliseconds</td>
   <td>There are 1,000 milliseconds in a second.</td>
  </tr>
 </tbody>
</table>

<h4 id="Frequency_units">Frequency units</h4>

<p>Frequency values are represented by the type {{cssxref("&lt;frequency&gt;")}}. It accepts the following values.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>Hz</code></td>
   <td>Hertz</td>
   <td>Represents the number of occurrences per second.</td>
  </tr>
  <tr>
   <td><code>kHz</code></td>
   <td>KiloHertz</td>
   <td>A kiloHertz is 1000 Hertz.</td>
  </tr>
 </tbody>
</table>

<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p>

<h4 id="Resolution_unit">Resolution unit</h4>

<p>Resolution units are represented by the type {{cssxref("&lt;resolution&gt;")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>dpi</code></td>
   <td>Dots per inch.</td>
  </tr>
  <tr>
   <td><code>dpcm</code></td>
   <td>Dots per centimetre.</td>
  </tr>
  <tr>
   <td><code>dppx</code>, <code>x</code></td>
   <td>Dots per px unit.</td>
  </tr>
 </tbody>
</table>

<h3 id="Percentages">Percentages</h3>

<p>A {{cssxref("&lt;percentage&gt;")}} is a type that represents a fraction of some other value.</p>

<p>Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.</p>

<p>As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:</p>

<pre class="brush: css notranslate">.box {
  width: 50%;
}</pre>

<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3>

<p>Some properties accept a dimension that could be either one of two types, for example a <code>&lt;length&gt;</code> <strong>or</strong> a <code>&lt;percentage&gt;</code>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("&lt;length-percentage&gt;")}}. Other possible combinations are as follows:</p>

<ul>
 <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
 <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
 <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
</ul>

<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3>

<ul>
 <li>{{cssxref("&lt;color&gt;")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
 <li>{{cssxref("&lt;position&gt;")}}</li>
</ul>

<h4 id="Color">Color</h4>

<p>The {{cssxref("&lt;color&gt;")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p>

<h4 id="Image">Image</h4>

<p>The {{cssxref("&lt;image&gt;")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p>

<h4 id="Position">Position</h4>

<p>The {{cssxref("&lt;position&gt;")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p>

<h3 id="Functional_notation">Functional notation</h3>

<ul>
 <li>{{cssxref("calc()")}}</li>
 <li>{{cssxref("min", "min()")}}</li>
 <li>{{cssxref("max", "max()")}}</li>
 <li>{{cssxref("clamp", "clamp()")}}</li>
 <li>{{cssxref("toggle", "toggle()")}}</li>
 <li>{{cssxref("attr", "attr()")}}</li>
</ul>

<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p>

<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p>

<p>Some legacy functional notations such as <code>rgba()</code> use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Values")}}</td>
   <td>{{Spec2("CSS4 Values")}}</td>
   <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br>
    Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br>
    Adds <code>toggle()</code></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Colors")}}</td>
   <td>{{Spec2("CSS4 Colors")}}</td>
   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
    Adds color keyword <code>rebeccapurple</code>.<br>
    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Colors")}}</td>
   <td>{{Spec2("CSS3 Colors")}}</td>
   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Images")}}</td>
   <td>{{Spec2("CSS4 Images")}}</td>
   <td>
    <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Images")}}</td>
   <td>{{Spec2("CSS3 Images")}}</td>
   <td>Initial definition of image.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li>
</ul>