One of the issues with having special CSS for each section is that it stops the content author from creating new top-level sections. You might want to consider attaching an ImageField to each page, which lets the users upload an image that is used in a special place in the template.
However, you can of course do what you originally suggested. Here are a few options:
1) Put something like this in your template:
<body class="section-$Level(1).URLSegment">
This will create a class on the body tag based on the URLSegment of the top-level page: for example, section-home, section-about-us, section-contact-us, section-products.
You will need to ensure that the user doesn't go and change the URLs, however.
2) Create a different sub-class of page for each top-level section. Apply styles/templates/etc to each of those subclasses. This is quite heavy, however - you have to create a lot of classes.
3) Create an Enum field on your page class:
static $db = array(
"PageStyle" => "Enum('Red,Green,Blue')",
);
function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Content.Main", new DropdownField("PageStyle", "Style", array(
"Red" => "Red",
"Green" => "Green"
"Blue" => "Blue",
)));
return $fields;
}
You can then put something like this into your template
<body class="style-$PageType">
OR
<body class="style-$Level(1).PageType">
And have different CSS for .style-red, .style-green, .style-blue
This final option is a lot lighter than creating whole extra page classes, but still gives the user the flexibility to change URLs and create new top-level sections - they just need to choose which style their new section should appear in.
