33

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 after the colon separating attribute name from attribute value?

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

vs.

<div style="padding:10px;">content</div>
webworm
  • 10,587
  • 33
  • 120
  • 217
  • 2
    #1 yes you need to. #2 its only coding practice. – Anji Apr 20 '11 at 15:09
  • 1
    @anji, you only need semicolons to separate two styles. The last style does not need one. – DA. Apr 20 '11 at 15:18
  • Perhaps to clarify question/answer (Šime Vidas) for future visitors, it would be better to rephrase the second question: "should a space be insert" => "it's necessary to add a space" . It not the same to say "You should not" that to say "You don't need to". – leonbloy Apr 20 '11 at 15:38

4 Answers4

45

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.

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • 12
    I'm blaming you when the next stylesheet I work with looks like `body { ;;;margin:0;;;padding:0;;; }` :) – thirtydot Apr 20 '11 at 15:28
  • 1
    @thirtydot Don't worry, writing such code would be senseless. It's a nice party trick though. – Šime Vidas Apr 20 '11 at 15:32
  • In fact you don't even need quotes on the style attribute if there's no spaces or certain other punctuation.
    works fine. Doesn't pass xml, though, and nobody does it.
     – OsamaBinLogin Sep 24 '18 at 00:08
1

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.

Community
  • 1
  • 1
Cristian Boariu
  • 9,603
  • 14
  • 91
  • 162
1

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.

JuanZe
  • 8,007
  • 44
  • 58
0

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.

Neil Monroe
  • 1,201
  • 1
  • 15
  • 20