Let's say I have:
css/style1.css
css/style2.css...
etc
and the html is like this:
<html>
<head>
<link ... src="css/style1.css">
<link ... src="css/style2.css">
</head>
<body>...</body>
</html>
I would like to read all the contents of css and make it like this:
<html>
<head>
<style>...(all css styles go here)</style>
</head>
<body>...</body>
</html>
reading css and put it into is easy (ie. using php's file_get_contents) but if the css contains url (url(../images/something.png)) or #import then it would be difficult.
I know there are some tools like minify css (https://github.com/mrclay/minify) to read multiple css and combine them into a big one, but still, it's not exactly what I want (what I want is all styles have to be inside
so is there any tool / script that can do this easily?
This should work:
<html>
<head>
<style>
#import url('css/style1.css');
#import url('css/style2.css');
</style>
</head>
<body>...</body>
</html>
please try this
<style type="text/css">
#import url("style1.css");
#import url "style2.css";
</style>
OR
<style type="text/css">
#import url("style1.css");
p { color : #f00; }
</style>
http://webdesign.about.com/cs/css/qt/tipcssatimport.htm
OR
make main CSS File and paste below code in main css file
#import url('style1.css');
#import url('style2.css');
#import url('style3.css');
#import url('style4.css');
add in head below source code
<link rel="stylesheet" type="text/css" src="main.css"></link>
You are using php so you can do something like this to get your css.
<html>
<head>
<style type='text/css'>
<?php
$css = file_get_contents('path/to/style1.css'); //get your css contents
echo $css; //paste your css
?>
</style>
</head>
</html>
Related
So lately I've realized I want to make my sites as simple as possible in certain ways, one of them is having as few files as possible. I've looked into linking for CSS-PHP files using query strings, similar to how XenForo does it.
<link rel="stylesheet" href="css.php?css=xenforo,form,public">
Now linking for a file is easy, but how would I add the CSS inside a PHP file without using the style tag? Can I just do something like the block below?
<?php
if(isset($_GET['form'])) {
?>
CSS HERE
<?php
}
?>
Add
<?php
header(Content-type: text/css");
?>
to the top of your php stylesheet.
eg:
<?php
header("Content-type: text/css");
?>
h1 {
color: blue;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="test.php">
</head>
<body>
<h1>test</h1>
</body>
</html>
I wonderring that how to load a html page in PHP with all the css and bootstrap. I have used the "include(file.html)" but it just show the plain html without any css. Is there any way to also load the css that is linked in the html file ? Thanks
Make sure you have a <link> tag as shown below in your HTML. The CSS will not be included until you send the your HTML to the browser, though. Otherwise, you will have to use the <style></style> tag in the header of your HTML (also, inline styles are a possibility). Note: The link tag assumes you have a directory named CSS in your webroot.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link type="text/css" rel="stylesheet" href="css/styles.css"> <!-- Right here.-->
</head>
<body>
The content of the document......
</body>
</html>
CSS in the header might look like ...
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style><!-- Right here.-->
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
The content of the document......
</body>
</html>
If you change the name of your file to file.php, you might be able to simple use include/require styles.css inside of file.php like so:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<?= include 'styles.css'; ?>
</head>
<body>
The content of the document......
</body>
</html>
However, be sure your include_path is set appropriately. Additionally, doing this would mean putting the various selectors and rules within a <style></style> tag like in the previous example.
In base.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<style>
body {
background: blue;
}
</style>
</head>
<body>
<h1>Base</h1>
</body>
</html>
the background of <body> is blue.
But if the CSS is linked, like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
with CSS in http://localhost/exp/mysite/css/style.css
body {
background: blue;
}
it doesn't work. Why?
Can you check error and write text of error for your post? To do that, open Developer Tools, reload page, and when style.css will be red, copy and paste code of Error and text of answer from the server.
I think here may be few common problems:
localhost follows to your computer/server, but web server (Apache / Nginx) doesn't know where your link (http://localhost) should follows. I mean to which directory where css file located.
Second common problem is permissions. For example directory with your CSS or css file has not readable permissions.
There can be few more problems, like CSP or something more complicated, but i need more information from you.
Try to use a relative filepath, this will also make the transfer to a production server easier:
<link rel="stylesheet" href="css/style.css" type="text/css">
instead of
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
(of course it depends where your html or php document is placed in the file system – if that's in a folder, it will be something like href="../css/style.css"
You should link the css this way
<link rel="stylesheet" href="css/style.css" type="text/css">
or link the css file the exact folder name
Set your folder is:
mysite/index.html
mysite/css/style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
The problem was
SetHandler application/x-httpd-php
in the .htaccess file.
As the question suggests I have an index.php file with html in it and when I try to style it using external or internal css, it doesn't work. But inline css works. By the way I am using xampp on win7 to test the website. And the file structure looks like this c:/xampp/htdocs/test/index.php
Relevant html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--This css file contains the css shown below as internal css-->
<style>
body{
background-color: blue;
color: white;
}
.header{
color: white;
}
</style>
<?php
function somefuntion(){
/*I will be adding this function later once the html skeleton
is done.
This function will be calculating some numbers based on the
current date and echoing it.*/
}
?>
</head>
<body>
<section class="header">
<p>Spring</p>
</section>
<section class="body">
<p>Hello world</p>
</section>
</body>
</html>
Can someone also explain why internal css is not working?
Solution found by hRdCoder: missing " mark in the content attribute of meta tag.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Only things to check for are that you add the closing tag and that the style.css file is in the same directory as your index.php.
Edit:
I just noticed that in your that you're missing the last set of quotation marks (") in the content attribute. Could that be affecting the rest of the page?
Also make sure you don't include the <style></style> tags in your external css file
Do one thing. open css file through xampp or wampp.. like
open browser -> search localhost/your folder and then open css or js file ,now copy that address and paste in href or src. hope this will help
the answer could be as simple as adding a class or id to the html tag like lets say there is a button tag like this..
<button>open</button>
and the code you wrote on external css is not working but inline does cuz there might be a class or id or the selector itself imposing the code without you knowing it so that's why it might not be working .That's why try adding a class or id to it like this..
<button class="btn">open</button>
<style>
.btn {
background-color:red;
}
</style>
it might just work..
there is something wrong with your path when linking your external css
is your index.php is in the same folder as your style.css?
<link rel="stylesheet" type="text/css" href="style.css">
try to put it in a separate folder named css
then link it as
<link rel="stylesheet" type="text/css" href="css/style.css">
you can also use firebug plugins for firefox or firebug lite plugin for chrome to check the errors
This question already has answers here:
I want to add CSS to my my PHP index file [closed]
(2 answers)
Closed 9 years ago.
Hello my Code here is very simple. For some reason it is not picking up anything from the CSS file and adding it to the php file in the body section. If I make changes for the p tag in CSS it does not display the changes when I use P in php and go into the website here is my code.
PHP CODE
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created by: Sivaram Penumarty [skpenuma] -->
<?php
include("style.css");
?>
<head>
<title>WireLess Networking Group US PDE</title>
</head>
<body>
<h3>Ye Olde Storye</h3>
<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
</body>
</html>
STYLE.CSS
p {
font-family:Garamond;
font-size:16px;
}
h3 {
font-family:cursive;
color:#36648b;
text-align:center;
}
span {
color:#cc0000;
font-size:24px;
}
This is the output onto the webpage after I try running it.
p { font-family:Garamond; font-size:16px; } h3 { font-family: cursive; color: blue; text-align: center; } span { color:green; font-size:24px; }
Ye Olde Storye
A long time ago there was an intrepid young student who wanted to learn CSS...
As you can see the text is not aligned to the center for Ye Olde Storye and the span doesn't work for A as well as nothing for the p tag changes either. Also it reprints all the code from the style.css file in the beginning. Why is this happening?
You probably just want to do this instead of the include
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created by: Sivaram Penumarty [skpenuma] -->
<head>
<title>WireLess Networking Group US PDE</title>
<link rel='stylesheet' href="style.css"/>
</head>
<body>
<h3>Ye Olde Storye</h3>
<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
</body>
</html>
You are using a PHP include to dump the CSS file as text into the HTML document … where it will be treated as HTML.
If you really want to include it that way, then you need to put it inside a <style> element.
That method, however, means that the CSS will have to be downloaded every time the HTML document is downloaded (and can't be reused between pages).
Tell the browser to load the CSS instead:
<link type="text/css" rel="stylesheet" href="style.css">
You need to put a <style> container around your css file, because css is no html!
<style type="text/css">
<?php
include("style.css");
?>
</style>
As others proposed: Include the external file using the proper syntax.
First open notepad, put all your html code in it, then save it as index.html(don't forget the .html extension)
Then make a new notepad file and add all your css to to it. and save it as style.css, make sure they are in same directory.
and Finally, add this code anywhere in your html file:
<link rel="stylesheet" type="text/css" href="/style.css">
You don't need PHP to just load the stylesheet. If style.css is in the same directory, you could use the following line of code to reference the stylesheet:
<link rel="stylesheet" type="text/css" href="style.css"/>
If
include() just fetches the CSS file and dumps the whole code in your document. So, if you want that instead, you could do something like this:
<head>
<style>
<?php include("style.css"); ?>
</style>
<head>
Hope this helps!
Take a look here and see if it helps.
Of taken from that page by Stefan:
<?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = 'style.css'; //css item to display
?>
<html>
<head>
<title>Including css</title>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>