CSS <string> Data Type

The CSS <string> data type represents a sequence of characters enclosed in single or double quotation marks. Strings are used by CSS properties and functions that accept text values, generated content, font family names, URLs, and other character sequences.

Syntax

A <string> is enclosed in either single or double quotation marks:

"Hello, World!"
'Hello, World!'
"CSS Reference"
'Example text'

The opening and closing quotation marks must match.

Quotation Marks

Single and double quotation marks have the same basic purpose in a CSS string. Using one type makes it possible to include the other type inside the string without escaping it.

"It's a CSS string"
'The word "CSS" is quoted'

If the same type of quotation mark used to delimit the string must appear within the string, it needs to be escaped.

Escaping Characters

A backslash (\) can escape characters that would otherwise have a special meaning within a CSS string. This allows quotation marks and other characters to appear without ending the string.

"She said \"Hello\""
'It\'s a CSS string'

CSS escape sequences can also represent characters using hexadecimal Unicode code points.

"Copyright \00A9"
"Arrow \2192"

Whitespace can be used after a hexadecimal escape to separate the escape sequence from characters that follow it.

Line Breaks

A CSS string cannot contain an unescaped newline directly. A backslash placed immediately before a line break escapes the newline, allowing the source string to continue on the next line.

"This string continues \
on the next source line"

The escaped source line break does not become a newline character in the resulting string. When an actual line break character is needed, it can be represented with an escape such as \A.

content: "First line\A Second line";

Using String Values

String values appear in several CSS features. One common use is generated content with the content property:

.note::before {
  content: "Note: ";
}

Strings can also be used where a CSS feature specifically accepts quoted text, such as quoted font family names and function arguments.

font-family: "Times New Roman", serif;

<string> Example

The following example uses a <string> with the content property to insert text before an element:

.string-example::before {
  content: "CSS: ";
  font-weight: bold;
  color: #0088cc;
}

Browser Result

CSS: This text follows the generated string.

The text "CSS: " is a string value supplied to the content property.

The <string> data type is used by several CSS properties and features that accept textual values, including:

Specifications

The <string> data type is defined in the CSS Values and Units Module Level 4 .

CSS <string> Data Type