PHP Script in CSS Files

Sarwan Soomro Feb 22, 2022

PHP PHP CSS

Using CSS in a PHP File
Use the Header() Function to Define CSS Properties in PHP

Using CSS in PHP files allows reusability since we can predefine style inside PHP variables and use them later anywhere in our PHP files. Here is how we can do that:

Using CSS in a PHP File

There are many ways to use PHP scripts in CSS files. We use the following method since it is simple and the most popular.

First, create two separate files:

The index.php: We are using header() function which is a built in function in PHP. Example: header('content-type:text/css; charset:UTF-8;'); in the index.php. Then, we used CSS styling inside this file using both .class and #id.
The style.php: This file contains our markup HTML that we linked using: <link rel="stylesheet" type="text/css" href="style.php">. It is an HTML element to link meta attributes in the markup.

index.php:

<!DOCTYPE html>
<html>
   <head>
      <title>How to Use CSS in PHP </title>
      <link rel="stylesheet" type="text/css" href="style.php">
   </head>
   <body>
      <div id="democss">
      </div>
      <h1 align="center">Applying style on image</h1>
      <img src="image.png" alt="demo" class="image">
   </body>
</html>

We use a simple href attribute of the HTML <link> element to include our style.php file in the header.

style.php:

<?php
//define header function
header('content-type:text/css; charset:UTF-8;');
//you can style PHP variable for reuse
$txt_color = "black";
$bg_color = "#6B5B95";
$alignment = "center";
$width = "200px";
$height = "200px";
?>

CSS code in the PHP file:

#democss{
width: <?php echo $width; ?>;
height: <?php echo $height; ?>;
background-color: <?php echo $bg_color; ?>;
margin: auto;
border: 3px solid black;
padding: 10px;
       }
.image{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    border-radius: 6px;
      }

Output:

Using PHP in CSS

When we load the index.php file, it can apply the style from the style.php files using our method.

Use the `Header()` Function to Define CSS Properties in PHP

The header() function is used to define CSS properties in the PHP file. We have shown some variables that we can use anywhere on our stylesheet.

For example, if you want to change the background color of any HTML elements, you only need to echo $bg_color after the HTML tag.

That is the only way to manipulate CSS in PHP, and it depends on your requirements to apply any CSS in PHP.

You can also use base_url(), PHP require() and other import file functions to do the similar tasks.

Author: Sarwan Soomro

Sarwan Soomro is a freelance software engineer and an expert technical writer who loves writing and coding. He has 5 years of web development and 3 years of professional writing experience, and an MSs in computer science. In addition, he has numerous professional qualifications in the cloud, database, desktop, and online technologies. And has developed multi-technology programming guides for beginners and published many tech articles.

Using CSS in a PHP File

Use the Header() Function to Define CSS Properties in PHP

Related Article - PHP CSS

Use the `Header()` Function to Define CSS Properties in PHP