Hi all
Is a semicolon required at the end of a css statement? It works fine and doesn’t throw an html error:
.nav li li {background: #e4e4e4}
Can I get rid of all spaces within { } brackets? Thank you
A trailing semi-colon is not needed on the last rule.
e.g.
.test{
background:red;
color:blue
}
However, personally I only ever omit the semi colon when I use a single rule.
e.g.
.test{background:red}
On multiple property/values I like to leave the semi-colons in place.
Can I get rid of all spaces within { } brackets? Thank you
It depends where you mean? You onviouslay can#'t remove the spces between values.
e.g.
.test{margin:0000}
It needs to be:
.test{margin:0 0 0 0}
But there doesn’t need to be a space between the opening bracket and the first property and the closing bracket and the last value.
In that case it’s legal since you only have one declaration not multiple: http://www.w3.org/TR/CSS2/syndata.html#declaration
Thanks Paul and Rob. Rob that link you kindly sent seems to show that it isn’t required as Paul says (it has both examples). Cheers
Paul explained this very good. I myself do not use semicolons where it is not necessary and I remove all the unnecessary spaces. I use one line for each element like the sample code below:
body{margin:0;background:#d5dade;font-family:verdana}
body a{color:#0080b0;text-decoration:none}
h1{margin:6px 0;font-size:1.25em}
h1 a:hover{color:#439fc2}
h2{margin:8px 0;font-size:1.1em}
h2 a:hover{color:#439fc2}
img{border-style:none}
table{margin:0 15px;font-size:0.8em}
table td{padding:5px}
I know it makes it a bit less readable (not with custom styled Notepad++ though) but I do work like this faster and I am used to it.
Like Paul I still declare it when there’s more than one property – the only real reason I do that though is it makes it simpler to cut and paste between elements if need be or to simply re-arrange.
It depends. Inside, I think yes, outside at least IE7- needs some breathing space for pseudo-elements, cf.:
Thanks for the input, what about font-family:Arial, Helvetica, Sans-Serif does that have to have spaces? I know I should be using font: just investigating it. I think I can get rid of a load of these font-family attributes in my css and just put one on the body tag which will work for them all 
If you mean the spaces after the comma then no you don’t need them but you will need spaces inside quoted values or font names that are more than one word. A lot of shorthand rules will need spaces in IE7 and under as it will get things wrong. For example when using the background shorthand there must be a space after the bracket that surrounds the url or IE7 will not read the rule correctly.
You should only need to declared the font family on the body for most elements. There are odd exceptions in various browsers and some odd tags like pre will have a more specific default font applied but they are few and far between. In old IE tables wouldn’t inherit the font family or size either.
However, I don’t think you are going to save much space by removing the spaces and if that was what you wanted then you could just use one of the minifying scripts to do it for you and then keep a copy of a readable stylesheet for working on. In the end the savings you make could most likely be offset by optimising one of your images better.
OR by using simpler code, condensing like properties, removing redundancies, etc, etc…
Which is why as a rule I consider minification (also known as white space stripping) to be in most every case I’ve seen it used being little more than trying to hide bad code instead of fixing it.
Especially if you bother having your server set to mod_deflate/gzip anyways!
Thanks for the replies Paul and deathshadow on the font question, very interesting info, I have learnt a lot and now I am going to implement it all