CSS <string> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <string> CSS data type represents a sequence of characters used in CSS values, typically enclosed in either single or double quotes. It allows authors to specify textual content or identifiers in a flexible way, enabling the assignment of meaningful labels, custom messages, or other string-based information within CSS properties. Unlike numeric types such as <number> or length types like <length>, the <string> type is purely textual and does not participate in mathematical operations or calculations.

One of the primary use cases for <string> is the content property, which can insert textual content before or after an element using pseudo-elements. This allows developers to add stylistic annotations, icons (via text), or other labels without altering the HTML structure. Strings can include plain text, escaped characters, or even Unicode symbols, giving designers wide flexibility in presentation.

Another important aspect of <string> is that it can be combined with functions such as attr() to dynamically display attribute values, or with counters for numbering lists. Strings are sensitive to quotation marks; mismatched or missing quotes can lead to invalid declarations. They are also commonly used in properties like font-family, where quoted names are required for multi-word font names.

Example usage in CSS:

/* Using <string> with content property */
h1::before {
  content: "Chapter: ";
}

p::after {
  content: "  -  Read more";
}

/* Using <string> with font-family */
body {
  font-family: "Open Sans", Arial, sans-serif;
}

In these examples, the strings "Chapter: " and " - Read more" are inserted as textual content, while "Open Sans" specifies a font family name that contains a space and must therefore be quoted. The <string> type thus serves as a versatile tool for including textual information directly in CSS.

Syntax

property: <string>;

Values

<string>Defines the characters used in the string.

Example

HTML

<section class="demo">

  <h2 class="demo__title">CSS &lt;string&gt; data type  -  demo</h2>



  <div class="item" data-name="Alpha" data-extra="Client">

    <span class="item__label" aria-hidden="true"></span>

    <span class="item__desc">Primary item</span>

  </div>



  <div class="item" data-name="Beta" data-extra="Server">

    <span class="item__label" aria-hidden="true"></span>

    <span class="item__desc">Secondary item</span>

  </div>



  <p class="note" aria-hidden="true"></p>

</section>

CSS

.demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 680px;
  margin: 32px auto;
  padding: 20px;
  color: #222;
  background: #fbfbff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(12, 20, 40, 0.04);
}

.demo__title {
  font-size: 18px;
  margin: 0 0 12px 0;
  color: #0b3d91;
}

.item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fff;
}

/* Insert the data-name attribute value (CSS ) before each item */
.item::before {
  content: attr(data-name string) "  -  ";
  font-weight: 700;
  color: #111;
}

/* Insert the data-extra attribute value (CSS ) after each item */
.item::after {
  content: " (" attr(data-extra string) ")";
  color: #6b7280;
  font-size: 13px;
}

/* A literal quoted string used with content */
.note::before {
  content: "Literal string example: "This is a quoted CSS string."";
  color: #374151;
  font-size: 13px;
}

.item__desc {
  color: #374151;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS string data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.