Text values in CSS properties

Summary

Various CSS data types are expressed using character text, however the meaning and syntax of each type differs.

Text-like CSS data-types include:

• <string>s

• <custom-ident> (custom identifier) values

• keywords

In addition, various CSS functions can be used to generate values of these or other data types.

Examples

a[href$=".pdf"]::after {
    /* literal string marks links to PDF files */
    content: " (PDF)";
}

.pulse {
    /* identifier for keyframe animation defined below */
    animation-name: pulse
    animation-duration: 1s;
    /* property values are built-in keywords */
    animation-direction: alternate;
    animation-iteration-count: infinite;
    /* The url() function accepts a string value */
    background-image: url(img/icon.png);
}

/* "pulse" is referenced above by animation-name property */
@keyframes pulse {
    from { opacity: 1   }
    to   { opacity: 0.5 }
}

Related specifications

CSS Values and Units Module Level 3

Candidate Recommendation