On websites powered by PHP, the HTML markup, CSS style sheets, and JavaScript scripts are stored in PHP files.
Any code that’s not enclosed in a PHP tag (that is, <?php ?>) doesn’t have to follow PHP syntax and will be outputted as static code to the HTML document that the server generates in response to the browser’s request.
Code that’s enclosed in a PHP tag, on the other hand, has to follow the PHP language syntax and will be outputted dynamically to the HTML file loaded by the user’s browser.
In other words, there’s a static and a dynamic way to add CSS with PHP—and we will go through both of them in the rest of this article.
Adding CSS With PHP the Static Way
In your PHP file, you can inline your CSS code in the style="" attribute of HTML elements, embed it in a <style type="text/css"> tag in the header, or link to it in a <link rel="stylesheet"> tag, and it will be outputted as it is.
The following PHP file:
<!doctype html>
<html>
<head>
<style>
font-size: 42px;
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:blue">Hello, world!</h1>
</body>
</html>Will result in the following HTML markup:
<!doctype html>
<html>
<head>
<style>
font-size: 42px;
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:blue">Hello, world!</h1>
</body>
</html>However, this assumes that you’re only writing HTML/CSS code and storing it in a PHP file, in which case you aren’t taking advantage of the PHP scripting language’s ability to make your website dynamic.
Adding CSS With PHP the Dynamic Way
Now that we’ve covered the static way of doing things, let’s take a minute or two to talk about how to add CSS code to your HTML document dynamically.
One of the many things that you can do with PHP is to declare variables and store information in them. You can then reference these variables in your echo PHP statements to output the information stored in them to the screen.
For example, you can store the values for your CSS properties in PHP variables, then output them to the client-side HTML files to dynamically generate your CSS code on every request:
<?php
$h1_size = "42px";
$h1_color = "blue";
$stylesheet_url = "style.css";
?>
<!doctype html>
<html>
<head>
<?php
echo "<style>
font-size: {$h1_size}};
</style>"
?>
<?php
$url = "style.css";
echo "<link rel='stylesheet' href='{$stylesheet_url}'>";
?>
</head>
<body>
<h1 <?php echo "style='color:blue'" ?>>Hello, world!</h1>
</body>
</html>The result is the same as the static example a few paragraphs above. But the difference is that you can define the values of the CSS code—and reuse them across CSS rules.
<!doctype html>
<html>
<head>
<style>
font-size: 42px;
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:blue">Hello, world!</h1>
</body>
</html>So far, so good.
But the real power of PHP, as W3Schools explains in this tutorial, comes from its functions.
For example, you can create a function to generate a <link> element with the rel=”” and href=”” attributes stored in variables:
<?php
// Define the linkResource() function
function linkResource($rel, $href) {
echo "<link rel='{$rel}' href='{$href}'>";
}
?>Using this function, you can link any external CSS style sheet or JS script.
Note the use of single and double quotation marks. If you’re using double quotation marks in your PHP code, you need to use single quotation marks for the HTML code in your echo statements, and vice versa.
If you call the linkResource() function anywhere in your PHP file with the following parameters:
// Call the linkResource() function
<?php linkResource("stylesheet", "/css/style.css"); ?>It will output a <link> DOM element with those parameters to the client-side HTML file:
<link rel="stylesheet" href="/css/style.css">Here’s what this looks like in practice. The server-side PHP file below:
<?php
function linkResource($rel, $href) {
echo "<link rel='{$rel}' href='{$href}'>";
}
?>
<!doctype html>
<html>
<head>
<?php linkResource("stylesheet", "/css/normalize.css"); ?>
<?php linkResource("stylesheet", "/css/style.css"); ?>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Will output the client-side HTML file below:
<!doctype html>
<html>
<head>
<link rel='stylesheet' href='/css/normalize.css'>
<link rel='stylesheet' href='/css/style.css'>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Note: You can give all of the PHP code a test by executing it in one of my favorite tools, the browser-based PHP sandbox at onlinephp.io.
In Conclusion
There are two ways to add CSS code with PHP. One is the static way, or two hardcode it into your PHP files, and the other is the dynamic way, or to generate with functions and variables.
Now that you know how to use both, you can choose the one that’s right for your project depending on the needs and requirements at hand.
Thank you for reading this far and, if you have any questions or want to share tips of your own with the rest of this post’s readers, don’t forget to leave a reply below!
