Most CSS changes, especially changing colors, you want to accomplish can be handled through the Page customizations in Design / Blocks. See Page customizations for more information. Color changes specifically can be handled through the General design, Header, Navigation, and Footer panels in Page customizations.
If you need to edit CSS on specific pages, you will place the CSS changes in Design / Templates / Flex (or Site templates if you are using the Site templates library) / Components / _Site / macros / css.utl
New code should be added at the bottom of the css.utl file, ABOVE the closing [% end; %] tag.
Using else it allows you to create changes on specific pages. In the example below...
[% else if skin == 'josephine_expo'; %]
If the URL has this value josephine_expo applied to the “Custom CSS instance” then the CSS listed below will be applied...
#site-top-nav-container {
background-color: #32bdb9!important;
background-color: #86d0cc !important;
If the URL does not have this value josephine_expo applied to the “Custom CSS instance” then the CSS is ignored and the next else if statement is processed to determine if it is a match...
[% else if skin == 'josephine'; %]
If the URL includes josephine then the CSS listed below will be applied...
#site-top-nav-container {background-color: #bb1628 !important;}
#site-header-container {background-color: #e31932 !important;}
#site-navbar-container {background-color: #bb1628 !important;}
#staticpage .mobile-options-holder .mobile-badges a {
Then close the else if statements with end.
