Should properties with space be quoted in CSS

Question

I am learning HTML and CSS from W3schools. I came across a confusing instruction. HTML5 Style Guide of W3schools says "Only use quotes around values if the value contains spaces" in the Style sheets section. And it gave an example that looks like this:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Where the font-family property has a quoted value of Arial Black. But when I was doing the W3schools CSS background Exercise, the following code doesn't place the background image at the right top position

<head>
  <style>
    body {
      background-image: url("img_tree.png");
      background-position: "right top";
      background-repeat: no-repeat;
    }
  </style>
</head>

After I removed the quotes around "right top", the background image was placed at the right top position. After some research, I read from this post that CSS properties generally cannot be quoted.

Now I am confused. From the W3schools style guide, it seems that it is a recommended standard to quote CSS properties with spaces. But then it doesn't work! When must I quote and when should I quote (in terms of the recommended standard)?

I think you are correct to be dubious of this supposed rule of "Only use quotes around values if the value contains spaces". I can definitely think of scenarios in CSS where quotes are called for and spaces don't exist, as well scenarios in which you wouldn't and _couldn't_ use quotes despite the presence of spaces. My best recommendation: take this cheat sheet with a few grains of salt. When in doubt for a specific CSS property and how it should be formed, I'd recommend searching on [MDN](https://developer.mozilla.org/) for the correct syntax. — Alexander Nied, Feb 05 '20 at 03:41
I'd recommend taking *anything* on W3schools with a few grains of salt. It's notoriously not-entirely-reliable. MDN is definitely a better choice. — CertainPerformance, Feb 05 '20 at 03:42

Temani Afif · Answer 1 · 2020-02-05T09:15:35.557

When must I quote and when should I quote (in terms of the recommended standard)?

There is no standard and no recommendation. Each propery has its own syntax that you need to follow. As simple as that.

For background-position and as defined in the specification¹:

<bg-position> =  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]

You can follow the syntax to understand the meaning of |, &&, etc and you will see that <string> (quoted value) is not allowed as value of background-position

Related: Why are CSS named grid areas not in quotes?

You should also note that some properties are called shorthand so they can accept multiple values and the should never be quoted.

Trivial examples:

border:2px solid red;
padding: 20px 10px;
margin:0 auto;
background:url(...) top/cover no-repeat fixed;

Again, the syntax of each property is clearly defined and you simply need to follow it without much thinking.

¹ It can be hard to navigate and search the official specification so I recommend using MDN to find the property and its syntax.

score 0 · Answer 2 · answered Feb 05 '20 at 09:29

0

Do not confuse font-family property with other properties

We can add and use any new custom font-family with our own custom name!

Some css properties required to be quoted some predefined values need not to be quoted in CSS

answered Feb 05 '20 at 09:29

chandirasekaranid

64
1
6

Should properties with space be quoted in CSS

2 Answers2