Learn Javascript Tutorials, CSS Tutorials, HTML Tutorials and jQuery Tutorials

Learn CSS, HTML, JavaScript, jQuery and Ajax step by step from beginning to advance with examples and references. Apart from that, beginners can learn tricks and tips.more>>

Wednesday, August 6, 2008

Use of CSS Properties with Variables

Advanced CSS with Variables:
CSS Level 2 Recommendation effects the Web authors' community that has been requesting a way of defining variables in CSS.

Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.

If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

Example:


#
@variables {
#
CorporateLogoBGColor: #fe8d12;
#
}
#
#
div.logoContainer {
#
background-color: var(CorporateLogoBGColor);
#
}


The Same thing we can define in PHP also. For that thing firstly, you need to create php page for the content. Following example shows how:

Example:


<?php
header("Content-type: text/css");
$color = "green"; // <--- define the variable
echo <<<CSS
/* --- start of css --- */
h2
{
color: $color; /* <--- use the variable */
font-weight: bold;
font-size: 1.2em;
text-align: left;
}
/* --- end of css --- */
CSS;
?>


For more information regarding this, visit:
CSS Variables
How to create CSS Variables?

1 comment:

jimmi said...

I found a boulder web design it is totally based on customer satisfaction. They are very much professional and master in their work.