Tool to define stylesheet colors only once

HTML & CSS
1

I’ve read (I don’t remember where) that there’s a tool or method that will let you define your stylesheet’s color hex codes just once, and then refer to them throughout the rest of the stylesheet as a keyword. For isntance, my site will use a particular shade of orange, #cc3f27, and my theory is there’s a way to make “orange” = #cc3f27 so later on I can write:

h1 { color:orange; }

and it will be read as:

h1 { color:#cc3f27; }

Does anyone know how to do this or have a link?

Mucho Gracias,
Kim

2

Try http://disruptive-innovations.com/zoo/cssvariables/#mozTocId267003

3

Wow, awesome. If it’s that easy, my whole CSS life just changed.

Thanks!

4

I didn’t try it, so i can’t give feedback. Please let us know.

5

If and only if you use PHP then try this:


<link type='text/css' href='<?php echo 'my_stylesheet.php'; ?>' rel='stylesheet' />



<?php 
  // my_stylesheet.php'

  header("Content-type: text/css;charset:UTF-8");
	
  $bg1='#800';
  $bg3='#ffdcdc';
  $bg4='#f5e6e6';
  $cg1= $bg1;
  $cg5='fff';
?>

strong,a:link,a:visited,a:hover{color:<?php echo $cg1;?>}
#box_comments,
.calendar td:hover, 
a:hover{background-color:<?php echo $bg3;?>}
a:active{background-color:transparent;color:<?php echo $cg1;?>}
body,#box_styles{background-color:<?php echo $bg1;?>;color:<?php echo $cg5;?>}
#new_left,#box_smiling{border-right:solid 18px <?php echo $bg1;?>}
.box_menu{border:solid 2px <?php echo $bg1;?>}
hr,
.btn a,
input:focus,
textarea:focus,
h1,h2,h4,h5,h6,
#footer,
.box_menu,
.hvr:hover,.alternator_1{background-color:<?php echo $bg2;?>}
.alternator_2{background-color:<?php echo $bg4;?>}
.hvr:hover{outline:inset 8px <?php echo $bg1;?>}

<?php include 'style_layout.php';?>