Inline CSS formatting best practices - Two questions

Question #1 - When specifying an inline style in an HTML element, is it necessary to include a trailing semi-colon? For example ...

<div style="padding:10px;">content</div>

Question #2 - When specifying an inline style should a space be inserted a开发者_开发知识库fter the colon separating attribute name from attribute value?

<div style="padding: 10px;">content</div>

vs.

<div style="padding:10px;">content</div>

Answer #1: No.

Semi-colons are required only between declarations.

A declaration-block (also called a {}-block in the following text) starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.

Source: http://www.w3.org/TR/css3-syntax/#rule-sets

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)

Source: http://www.w3.org/TR/css-style-attr/#syntax

Since you have only one declaration, there is nothing to separate, so no semicolons are needed.

However, the CSS syntax allows for empty declarations, which means that you can add leading and trailing semicolons as you like. For instance, this is valid CSS:

.foo { ;;;display:none;;;color:black;;; }

and is equivalent to this:

.foo { display:none;color:black }

Answer #2: No.

A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace.

Source: http://www.w3.org/TR/css3-syntax/#declarations

You can add spaces in order to improve readability, but they have no relevance.

Q1: No, but I always include a trailing semicolon. Some years ago that semicolon could be a reason to a wrong render (or lack of) by some browsers. I guess nowadays is not a problem.

Q2: No, both ways means the same. Your election to include an space after the colon should be based on personal preferences for legibility.

Question 1: Yes (if you have more than one inline-style specified. Even it's not required for the last one, it's a good practice to append ; after each one).

Quote:

The normal rules of CSS apply inside the style attribute. Each CSS statement must be separated with a semicolon ";" and colons appear between the CSS property and its value.

Question 2: No, but you can add it to be easier to read. For instance, Eclipse formatting automatically adds this space.

Question 1: Not required for your first question as written, but you would need to have the semi-colon if multiple definitions were present.

Question 2: Spaces are not required unless you are separating values in a specific property, such as: box-shadow:0 0 5px 0 #000;

One reason that you may want to add them in anyway, at least in a CSS-file context, would be that if you ever needed to run the CSS through a post-processor, like Sass, not having the semi-colons at the end of the line will cause the compiler to fail.

In summary, then: For inline styles, the above answers apply, but for CSS in separate files on the file system, I would always add the extra semi-colons and spaces to make it easier to read. You can always run your CSS through a compressor when you are ready for production.