Question

Why can’t any browser apply this color rgb rule?

HTML

<header>
    <h1>Header</h1>
</header>

CSS

header h1 {
    background-color: red;
    color: rgb (224, 226, 213);
}

Chrome Web Developer tools is telling me that it’s an invalid property value, but I can’t understand why. You can see the result in JSFiddle.

Answer 1

You have a space between the rgb and the (, which is not allowed:

header h1 {
    background-color: red;
    color: rgb(224, 226, 213);
}

No, I’m serious, it’s not.

Unlike many programming languages, CSS expressly forbids having whitespace between a function name and the opening parenthesis. This applies not only to rgb() and rgba(), but also to other functional values such as url() and attr(), as well as functional pseudo-classes such as :nth-child(), :lang() and :not().

Refer to section 4.3.6 of CSS2.1, which states:

The format of an RGB value in the functional notation is ‘rgb(‘ followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ‘)’. […] White space characters are allowed around the numerical values.

and also refer to Appendix G for the grammar, precisely the following tokenization, which clearly shows that whitespace is not expected between the identifier and the opening parenthesis:

{ident}"("      {return FUNCTION;}