The <string> data type is used to represent a string in CSS.
A string is a sequence of Unicode characters delimited by double quotes (” “) or single quotes (‘ ‘).
Double quotes cannot occur inside double quotes, unless escaped (e.g., as ‘\”‘ or as ‘\22’). Analogously, this holds for single quotes (e.g., “\'” or “\27”). For example, if you want to write a double quote character (“) in a string contained inside double quotes, you’d have to escape the inner double quote, either by adding a backslash (\) character before it, or by replacing it with \22 which represents an escaped double quote character.
Examples on escaping quotes inside quotes:
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
When using a backslash character inside a string to escape other characters, the backslash character itself will not be displayed as part of the string. If you do want to display a backslash character as part of the string, you have to escape the backslash character too.
You may also want to include a new line character inside a string as part of the string, i.e as one of the characters making the string up. You can do that, but a string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as “\A” or “0000a”. This character represents the generic notion of “newline” in CSS.
If you have a fairly long string and you want to have it span on two lines in your editor for aesthetic reasons, but you don’t want the newline character to be considered as part of the string itself, instead of using an escape that will represent a newline character, just add the backslash character (\) where you want to break the line inside your editor. The newline is subsequently removed from the string and doesn’t count as one of its characters. For instance, the following selector that contains a long string:
/* backslash character added as the last character where you want the line to break */
a[title="a not s\
o very long title"] {
/*...*/
}
is exactly the same as..
a[title="a not so very long title"] {
/*...*/
}
Examples
This example shows the use of a string data type in the content property.
content: "this is a 'string'."; /* single quotes inside double quotes don't need to be escaped */
content: "this is a \"string\"."; /* double quotes inside double quotes need to be escaped */
content: 'this is a "string".'; /* double quotes inside single quotes don't need to be escaped */
content: 'this is a \'string\'.'; /* single quotes inside single quotes need to be escaped */
The following examples represent using a newline character inside a string in two cases: to span the string on two lines without counting the newline character as part of the string, and to add a newline character as a character of the string.
/* Newline character as part of string */
"A string with \Aa line break"
/* newline character used to span the string on two lines,
without including it in the string, the backslash is added
where the line is "cut" */
"A string that can span \
on two lines"
/* the above string is exactly the same as the following: */
"A string that can span on two lines"
Browser Support
String values are supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.
