how can I use of a php variable into a .css file


Tags: php,html,css

Problem :

I have a css file named test.css and I want to use into it of $var.$var is at test.php. test.css is attached in test.php. My structure is something like this:

//test.php

<html>
<head>
<?php $var = 'anything';?>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>

and this is test.css:

// test.css

.<?php echo $var> { // css property }

Currently test.css does not work. In fact, I want to knoe how can I use of a php variable as a class name into a css file ?



Solution :

Actually you can.

1st Solution

Instead of using the .css file extension, use .php

Set up variables

<?php

   header("Content-type: text/css; charset: UTF-8"); //look carefully to this line

   $brandColor = "#990000";
   $linkColor  = "#555555";
?>

Use variables

#header {
   background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a {
  color: <?php echo $linkColor; ?>;
}

...

ul#main-nav li a {
  color: <?php echo $linkColor; ?>;
}

2nd and short solution

Create a file and name it like style.php, then in your style.php set your styles in tags like below

style.php

<style>
.blabla{
   ....
}

#heeeHoo{
   ...
}
</style>

then include style.php to your file (test.php) like

<html>
<head>
    <?php include 'style.php'; ?>
</head>
<body>

</body>
</html>

That is the correct answer. Think like inline css but that is actually in external file


    CSS Howto..

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    CSS: how to remove the indent of list items shown in Firefox

    How to style a list so that it looks like a table, with various line height?

    how do I add equal gap on each side of the text with css?

    How can I change using jekyll bootstrap navbar colour?

    How to place two labels around an image (dynamically); right and bottom?

    How can one change the background image of a label using css with javascript

    How to create smooth headlines with HTML and CSS?

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    How to style a single QToolButton using qss/css

    How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js

    How do you Add an image to the left side of a div

    How to show an image on html page using only css?

    How to write Text in css like show in images?

    How to create this material design background (see image below) with CSS?

    How to determine if CSS has been loaded?

    How to control the speed of a SVG line animation with CSS

    showing
    inside :before element

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How can I force my table width into the width of my container?

    How to add css loading animation in ajax beforeopen page

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    How to layout images in a grid? [closed]

    Parallax image shows at top of page on load

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    how to DRY up (remove redundancy) from this css class selector declaration?

    how to scale an image disproportionally via css?

    How do I use a gradient as a font color in CSS?

    How would I do a two finger drag with javascript/jquery?

    How hard is it to master semantic markup and good CSS?