Local Styles and Quotation Marks

The use of quotation marks with local CSS styles can be confusing. Here is a guide to using quotes with local styles.

In this tutorial, CSS declarations (which become the HTML values in local styles) are shown in red and bold.

Basic CSS syntax

Here's basic CSS syntax:
selector { property: value; }

The "property: value" pair is called a CSS declaration.
Example (with the declaration in red):
p { color: #080000; }

And here's CSS syntax with more than one declaration (property:value pair). Multiple declarations in one CSS rule are called a declaration block. (Note that semicolons are used to separate declarations, and the last semicolon, while usually included, is optional):
selector { property: value; property: value; }
Example:
p { color: #080000; font-weight: bold; }

Note that there are no quotes used here. Quotation marks are rarely used in CSS rules, an exception being in the case of a font name that contains spaces (as we will see later).

Basic HTML syntax

Now let's look at basic HTML syntax:
<element attribute="value"> ... </element>
Example:
<a href="index.html">Go home</a>

Local style syntax

In the case of a local style, the HTML attribute is always the word "style."
Example:
<element style="value"> ... </element>

But in a local style, it's the HTML value that's the tricky part. In a nutshell, the HTML value in a local style is simply what would be the CSS declaration or declaration block (entirely enclosed in the quotes) as in this example:
 ...

Note that the only place quotes are used is to flank the value (now the CSS declaration block).

The font-family property

Where it gets a little trickier is when you use the font-family property, and in the cascade of font names you have a font name with spaces in it. This makes the quote part more complex, because a font name with spaces must be enclosed in quotes.

Forgetting about local styles for a moment, let's look at a CSS rule using a font-family cascade. The font-family property is a special one, because it allows for multiple font names, each separated by a comma. We'll keep showing the declaration in red:
p { font-family: Times, Bookman, Palatino, serif; }

Now let's add a font name that has spaces in it. Note that the font name that contains spaces must be enclosed in quotes:
p { font-family: Times, "Times New Roman", Bookman, Palatino, serif; }

But if we want to use this declaration in a local style, we have a problem, because we will have to enclose the whole declaration in quotes:
 ... 
The above line is not the correct way to do this, however, because the two sets of quotes can confuse browsers.

So here's the solution: you alternate using single and double quotes, either by using single quotes around the font name and double quotes around the entire declaration, or by using double quotes around the font name and single quotes around the entire declaration. Either way is correct.

Examples:
 ... 
or
 ...

And if you had a local style with multiple delarations (a declaration block) it would look like this:
 ... 
or this:
 ...