I have an PHP/HTML main page, in which I include different other PHP files (I include them within the body of the main page).
What if I want to include a CSS stylesheet into only ONE of the included file?
What if that included file is a PHP-only file? (that is, it doesn't have those <head> tags, where the stylesheet reference is supposed to be)
What happens if I put "head" tags into a PHP file that is included in the body of the main page? I am wondering if putting head tags in the middle of the HTML body tags could cause problems at all, or at least with certain browsers.
Think of it this way, after all of you includes you still get one html file at the end of it. If you are including files in the body of your document, it should only contain tags that fit within the body, not html, head, title, body, etc. Your css file should be loaded in the of the main doc. Something like this
<html>
<head>
<title>Title</title>
<!--
css and js here
-->
</head>
<body>
<!-- php include here ---->
<div>content</div>
</body>
</html>
So after your includes the html should still be valid. you can check that here http://validator.w3.org/
EDIT:
You can included as many css files as you want anywhere in the document but the overall structure should still be as above. But try to consolidate your css files as much as possible. Every external file is one more request the browser has to make, and can slow the load time if you have a lot.
You can add style tags in the middle of your html, it's bad behaviour, but you can and it'll work. So, you can only import css you need depending on what you include to your main php. But, you don't have to put head tags for that.
It is ok if you will put you link your css file in any of your files, also if your file is php, you can put your css before or after the php tag. But for me its better to include your css file on your main page as long as you have a unique design or style for a unique element or id on the file that you want to design.
<link href="style.css" type="text/css" rel="stylesheet">
<?php
Content of your php file here
?>
Related
I'm recently doing a website for a school project. In order to organize my work, I create a tree folder that keeps all the work organized. It is similar like this:
Back-Office
Pages
Home
home_test1.php
home_test2.php
home_test3.php
Login
Folder_Login
login.php
logout.php
Resources
CSS
style_home.css
style_navbar.css
style_footer.css
JS
script_home.css
script_navbar.css
Sections
navbar.php
footer.php
After all, with the require() method available in PHP, I want to call the "navbar.php" file to the "home_test1.php", "home_test2.php" and "home_test3.php", but the CSS style that is connected with the file "navbar.php" ("style_navbar.php"), doesn't display.
I've tried to change the path of the CSS style in the file "navbar.php" when I require() to the other file ("home_test1.php") and the CSS style shows up, but wont display in other file with a different path. How can I make this work dynamically? Sorry for long post and bad English grammar.
Thank you in advance.
You need to set your css and js files with absolute path instead of relative path
$dir = realpath($_SERVER["DOCUMENT_ROOT"]);
<link rel="stylesheet" href="<?php echo $dir.'/resources/css/style_home.css'; ?>" >
Without physically seeing you code it is quite hard to debug however there is an "obvious" answer that I'll suggest as a starting point.
The important thing to remember is that PHP and HTML are processed in completely different places. PHP executes on the server and should be used to build a full HTML "document" which it gives to the client/browser. The client/browser then reads the document provided and renders it according to HTML standards.
Calling require() will tell PHP to get the file and slot its contents directly where it was called and as it is a CSS file it will need to sit within the style tags. With a lot of modern browsers, if you use require on a file outside of the html tags, the content will be dumped at the top of the screen or simply ignored due to invalid syntax.
Alternatively if you would like to simply use tell the browser to include the CSS file, you could use the good old method of using <link rel="stylesheet" href="/path/to/file">. It's good to know when and when not to use PHP.
PS: You have .css files in your JS directory.
In PHP, there is a global variable containing various details related to the server. It's called $_SERVER. It contains also the root:-
$_SERVER['DOCUMENT_ROOT']
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
<link rel="stylesheet" href="<?php echo $path.= '/Resources/CSS/style_navbar.css';?>" />
?>
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.
I have a stylesheet link that looks like below:
<link rel="stylesheet" href="/example/get_page.php?location=bla.css" id="main_ss" />
get_page.php just gets a URL using file_get_contents():
if (isset($_GET['location'])) {
echo file_get_contents('/example/styles/' . $_GET['location']);
}
I can see that the stylesheet file is being fetched properly (for example the text of the file is showing in firebug when I expend the link tag) but for some reason it is ignored by the browser. If I just fetch the CSS file directly of course everything works.
The code can be seen here: www.specman-verification.com/example/bla.html
Any leads? I'm at loss here.
Add the Content-type header like this (do this before you output anything):
header("Content-type: text/css");
Your code is just trying to load the script get_page.php. To load the CSS file you need:
<link rel="stylesheet" type="text/css" href="/example/bla.css" />
(or similar depending on the actual path to your CSS file). In other words the href attribute needs to specify the path to your spreadsheet file, not the HTML page file.
You need to do it the right way. I understand what you're doing here. You need a good mechanism to dynamically load external CSS and have the result display normal html in the browser output.
Follow the instructions on this url: http://www.warpconduit.net/2009/05/12/dynamically-load-css-and-js-files-using-php/
This will at least get you to have a mechanism to load external css file with php dynamically. You're definitely missing steps in your code.
I need one advice from you. I am working on a website, which uses PHP and HTML. As the biggest part of the header and footer code will be same for many pages, I am thinking of using PHP's include to avoid code duplication. But, each of those pages requires different stylesheets and JS files included. What do you think how could I let the other file know what scripts and stylesheet to import?
Our company does this:
The header reads the filename of the page calling it when it's included.
Then, it changes the extension to '.js' and outputs that if it exists. Same for CSS.
So if I have a page "register.php", it will auto-include "register.js" and "register.css" if they exist.
Here's what I do:
<?php include("includes/headContent.php"); ?>
<title>Page title goes here!</title>
<script src="script_only_used_on_this_page"></script>
<?php
require_once("includes/siteHeader.php");
?>
Site Content Goes Here!!
<?php
require_once("includes/siteFooter.php");
?>
Head Content includes any PHP I want included in every page, as well as the opening html and head tag, and any Javascript libraries and css stylesheets I want on every page. Site header closes the /head tag, and opens the body as well as printing out my site header and some other markup that goes on every page. Finally Site Footer closes out my template. Everything in between is my content area!
There are lots of different ways you can do templating, if you wanted to create a simple include and an echoHeader() and an echoFooter() function... just have the echoHeader function accept a parameter which you would pass your javascript and CSS lines to.
you can use MVC coding pattern
is there a way to style a php file with css so I can use border,padding, align and teother various
will this work or not if i added to the php or will i need functions for using this
<link rel="stylesheet" type="text/css" href="style.css" />
You cannot and probably will never be able to style a PHP file using css. What you want to style using css is the html content created using PHP and/or javascript! That is because styling takes place on the client machine in order to show things to the user while php gets executed on the server machine in orderf to produce code which will be readable by a browser.
<link rel="stylesheet" type="text/css" href="style.css" /> will work if the file style.css is found at that location (i assume your are using valid css definitions in your file)
You can use css to style HTML files. PHP generates HTML (or not) and you cannot style PHP files.
PHP doesn't know or care about CSS, and neither does it need to.
PHP runs on the server and does whatever it does, which should result in an HTML document.
This HTML document is send to the browser.
Only the browser cares about CSS, and it doesn't care whether an HTML document was just a file on the server's hard disk or whether it was created by PHP or magic fairies.
If the document the browser receives is an HTML document, you can use CSS with it. PHP has absolutely zero influence on this.
You don't style PHP with CSS. What's there to style? It's all just server-side code that generates HTML. You style HTML with CSS, not PHP.
If you are looking for a way to define styles in variables i.e. colour etc and make it easier to generate css try http://lesscss.org/
It's what I use to make css edits faster instead of copying and pasting.