blog icon

PHP variables inside external CSS

There’s a way of using php variables inside your css external file.
First, you have to rename your css file to “mycssfile.php”.
Then, insert the following line of code on top of the file:

  1. <?php header("Content-type: text/css"); ?>

Finally, don’t forget that the reference to the css file in your HTML is “mycssfile.php”.

Inside “mycssfile.php” you can define variables like colors, typography, measures, etc…

  1.  
  2. <?php
  3. $color1 = "#CCCCCC";
  4. $color2 = "#FFFFFF";
  5. $type1 = "Helvetica";
  6. etc…
  7. ?>
  8.  

Then, use them with a normal echo statement:

  1.  
  2. h1 {
  3. color: <?php echo $color1 ?>;
  4. font-family: <?php echo $type1 ?>;
  5. }
  6.  
Filed under: Blog, Tutorials

3 Responses to “PHP variables inside external CSS”

  1. Sérgio Soares Says:

    Boas
    Fui seu aluno este ano no Ismai, e venho ver o seu blog/portfolio frequentemente.

    Em relação a este post gostaria de saber qual a utilidade de usar código php em css? Se calhar é uma pergunta não muito inteligente mas fiquei curioso :)

    Cumprimentos
    bom blog

  2. admin Says:

    Olá Sérgio,

    Uma das vantagens é precisamente poderes definir variáveis. Imagina um ficheiro css com muitas linhas de código e, de repende, queres mudar uma cor… Em vez de estares a percorrer o código todo à procura de referências a essa cor e fazer a alteração, se essa cor estiver definida dentro de uma variável, podes simplesmente alterar o valor da variável e… voilá!

    No entanto, php dentro de css tem desvantagens. Uma delas é que é mais uma coisa para ser resolvida do lado do servidor e dessa forma pode “pesar” mais um bocado. Uma outra é que nunca se deve misturar lógica com apresentação… nem variáveis e muito menos “ifs”, ciclos “for”, etc…

    Em última análise, ser vantajoso ou não, irá depender sempre da natureza do projecto.

    Cumprimentos!

  3. Sérgio Soares Says:

    ok entendi, em projectos maiores pode funcionar bem :)

    Obrigado