I want to include header.php
file into to one of my pages. Is it possible somehow to have separate header_style.css
file for the included file? I mean, I have also included footer.php
and noticed that it will inherit all stylings from header_style.css
even thought I did not linked it to it. In short, is it possible to have separate CSS files so styles will not be inherited by other included files?
There seems to be a bit of a misunderstanding of what PHP and CSS files do, and how they contribute to the final look of the page in the browser.
PHP files generate the HTML which is sent to the browser. CSS files tell the browser how style the HTML once it has it. If you view the raw HTML of a web page, (in Firefox, for example, right-click on a web page and select "View Page Source") you can see what all the php files have generated, no matter how they were included. The browser never sees the php files themselves, only what the server generated after running the php files.
To see the CSS file(s) in the browser you have to enter the full URL of the style sheet into the browser's address bar. For example the one of the style sheets for this web page has a URL of https://cdn.sstatic.net/Sites/stackoverflow/primary-unified.css?v=6f059d938c2b.
To control what parts of the page's HTML are controlled by which CSS files, or parts of one CSS file, you need to use "CSS selectors" to connect the HTML and the CSS. A fast explanation of CSS selectors can be found on the w3schools.com website.
The comments by rickdenhaan and jeff above help to point you in the right direction.
There is no significance to the browser which included php file actually made the HTML, because it never knows. All the browser knows is that the server sent all the HTML from one URL. To make the header_style.css
file only apply to the HTML created by the header.php
file, you need to wrap the HTML from header.php
in some HTML element that you can then "select" with the header_style.css
such as <div id="header"> .... </div>
with a rule like div#header { color: red; ...}
or maybe <header> ... </header>
with a CSS rule like header { color: green; ...}
.
You can do the same kind of selection process in you footer.php
file, with other id="..."
attributes, of using the <footer>
HTML tag and changing the CSS to only select that part by id
. The CSS selectors can be used to "select" a lot, body { color: gray; ...}
for example will apply the color gray to everything inside the <body> ... </body>
tag (everything on the page) that is not changed by some other rule that is more specific. The CSS selectors can be also used to select very little, img#special { border-color: purple; ... }
will only affect the one <img id="special" ...>
element on the page, no matter how big the page is.
Anything that the CSS selects will have the style applied to that element, and every element inside that one, unless the CSS selects, and changes the style on some element inside it. Then that style applies to everything inside the more specific element, until some other selector, even more specific, selects an element in there. That process "cascades" until either the browser runs out of elements to move inside of, or runs out of CSS rules to apply.