Hi,
If you have a look at these two files, you will understand that each have specific purpose.
– The layout.css is only for margins, paddings, width, height, floating, overflow and positioning. The very basic layout arrangement for the main HTML block elements (header, spotlights, left + right columns, modules, footer) if you want. This is to make sure that the above mentioned CSS instructions will not break the layout. That is why it is a separate file.
– The template.css is to really style, I mean really set font families, font sizes, colors and background images, and override the basic styling of layout.css for specific cases (EG left1+left2 to form a column, the margins will be different).
Hope this makes clear enough.
Regards,
Danny