I am still new to CSS/Javascript/JQuery. I am defining a couple of colors as classes in a css file. Then, I want to use one of them as the background color of a HTML page:
.wf_blue { color:rgb(2, 12, 40); }
.wf_white { color:rgb(255, 252, 247); }
body{background-color: wf_blue;}
The above does not work. I tried with JQuery, but unsuccessfully. I have seen other questions on SO, but could not figure out the solution. What am I doing wrong?
your classes can only be used in the HTML markup like this
<body class="wf_blue">....
Alternative you can set this class with jQuery
$('body').addClass('wf_blue');
If you would like to use variables in CSS, you can take a look at SASS or LESS, which are CSS preprocessors
If you want to use variables in CSS, then you have to use an intermediate language, like less or Sass.
First, the CSS should be:
.wf_blue { background-color: rgb(2, 12, 40); }
.wf_white { background-color: rgb(255, 252, 247); }
In plain HTML
<body class="wf_blue">
With jQuery:
$(document).ready(function() {
$("body").addClass("wf_blue");
});
color and background-color are separate. As topek says, look into SASS or LESS for reusable variables in CSSIf you do not want to use a javascript library (such as jquery or prototype), you can write directly: A. HTML:
<body class="wf_blue">
B. javascript:
document.getElementsByTagName ('body') [0]. addClass ('wf_blue');
thanks
