loading a specific css file for a specific page?

Question

Ok, I was doing this website. Its mostly powered by PHP. I have a header.php and footer.php file that will be included, to get a more cleaner working area. Problem is, my main page (home page) uses a main.css file. And the news page has many similar features so it also uses the main.css file but some specific settings are overridden by a news.css file. When it was all HTML it was easy for me to make it work (just call main.css first and then call news.css). But now since the stylesheet calls are in a common header file, I am getting some unexpected and unwanted CSS effects on my home page.

Is there any way, some kinda if statement, in PHP that I could use to tell my browser to load the news.css file only when news.php is loaded?

Thanks!!!

Optimally, you would correct the CSS to be accurate on the entire site. The additional HTTP request and load time of an additional stylesheet may not be ideal. — Scott
– Scott, Commented Aug 31, 2013 at 21:25

Josh Crozier · Accepted Answer · 2013-11-29 19:34:46Z

3

In header.php, make an if statement like:

if ($current_page == "join") {
  echo "stylesheet..";
} else {
  echo "another stylesheet..";
}

When including header.php, set a variable that will satisfy the if statement.

$current_page = "join";
include '../header.php';

edited Nov 29, 2013 at 19:34

answered Aug 31, 2013 at 21:21

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rauli Rajande · Accepted Answer · 2013-08-31 21:25:33Z

2

You can do something along these lines:

<?php 
if (stristr($_SERVER['SCRIPT_NAME'], 'news.php')) {
   print('<link rel="stylesheet" type="text/css" href="/news.css">'); 
} 
?>

answered Aug 31, 2013 at 21:25

Rauli Rajande

2,0201 gold badge21 silver badges26 bronze badges

Comments

ehp · Accepted Answer · 2013-08-31 21:24:38Z

0

You could do something like:

if ($_SERVER['PHP_SELF'] == 'http://url-to-news-page')
    echo '<link rel="stylesheet" href="path-to-stylesheet">';

or somethign like this if you don't want to specify the url, and just want to specify the path (better):

if ($_SERVER['SCRIPT_NAME'] == '/path/to/news.php')
    echo '<link rel="stylesheet" href="path-to-stylesheet">';

answered Aug 31, 2013 at 21:24

ehp

1,6993 gold badges14 silver badges20 bronze badges

Comments

Alfonso · Accepted Answer · 2013-09-02 03:17:17Z

I'm not a big fan of using separated CSS files for each section. I prefer to keep http requests as low as possible. Also, having one single css file makes future maintenance easier in my opinion.

For future projects, you could also try declaring specific body classes or IDs for each site section.

<body class="news">
<div id="header"....

this way, you could use the same CSS files, overriding specific parts of the CSS when needed.

For example, if you need to style differently the div #header for the news section, in your CSS you could do:

#header {
height: 120px;
background-color: #CCC;
}

.news #header {
height: 40px;
background-color: #000;
}

If the body tag is declared in the header.php include, you can use any of the suggested methods to add the body classes dynamically:

if ($_SERVER['PHP_SELF'] == 'http://url-to-news-page') {
$body_class="news";
}

and then:

<body class="<?php echo $body_class;?>">

for more information: http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

Collectives™ on Stack Overflow

loading a specific css file for a specific page?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related