You can use preprocess page in your theme template.php
<?php
function template_preprocess_page(&$variables) {
$front_style = path_to_theme() .'/front-page.css';
$path_style = path_to_theme() .'/path-'. arg(0) .'.css';
if (file_exists($front_style) && $variables['is_front']) {
$include_style = $front_style;
}
elseif (file_exists($path_style)) {
$include_style = $path_style;
}
if (isset($include_style)) {
drupal_add_css($include_style, 'theme', 'all', FALSE);
$variables['styles'] = drupal_get_css();
}
}
?>
Or use attach method in module code and so forth:
<?php
function foo_block_view($delta = '')
{
if($delta == 'foo_delta')
{
$block = array
(
'subject' => t('Foo title'),
'content' => array
(
'#markup' => '<p>' . t('Lorem ipsum text.') . '</p>',
'#attached' => array
(
'css' => array('path/to/my.css'),
),
),
);
return $block;
}
}
?>
Attached will only get loaded if that element is loaded on the page, so from above only if that block is shown on the page.
These examples were taken from drupal docs (see below for more info):
https://www.drupal.org/node/2278795
https://www.drupal.org/node/225868
You can also target that content on this specific page with CSS by using the body classes added by your theme, most have either the content type or some other information in there you can use (e.g. node-type-article
or page-node-5
)
So your CSS could be:
/* Original Color */
.original-color {
color: green;
}
/* Original Color for content type article */
.node-type-article .original-color {
color: red;
}
/* Original Color for node 5 */
.page-node-5 .original-color {
color: yellow;
}
That's just as example but should help when setting up pieces like this.
You can also use CSS injector
It has block like settings to only load the CSS on certain pages.