{"id":34261,"date":"2017-11-12T03:01:34","date_gmt":"2017-11-11T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34261"},"modified":"2017-11-11T13:53:48","modified_gmt":"2017-11-11T03:53:48","slug":"css-variables-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-variables-primer-tutorial\/","title":{"rendered":"CSS Variables Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Variables Primer Tutorial<\/p><\/div>\n

If you are a regular reader of this blog, I hope by now you would have gleaned that a big takeaway<\/i> we would have you learn here is that, very often, in programming, in Information Technology generally, there can be a myriad of ways to solve any one type of problem. In terms of this, we are not suggesting today’s “CSS Variables” is a must know<\/i> topic, rather a “that fits in with how I see the programming style I want to adopt” if this concept is new to you.<\/p>\n

So, CSS can use variables<\/font> and into “that bargain” goes that same syntax as variables<\/font> in Javascript, as per the CSS below …<\/p>\n


\n<style>
\nbody {
\n --main-bg-color: brown;
\n}
\n<\/b>
\nbody {
\n background-color: var(--main-bg-color);
\n}
\n<\/style>
\n<\/code><\/p>\n

… and the thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables<\/a> are so profound we let the “color” ugh!! feeling go through to the keeper … which works on the two basic syntax principles …<\/p>\n

    \n
  1. CSS variables<\/font> start with —<\/b> (eg. –main-bg-color<\/b>)<\/li>\n
  2. The use of CSS variables<\/font> is via (for the example above) var(<\/b>–main-bg-color)<\/b><\/li>\n<\/ol>\n

    Lately we’ve been enjoying the dynamic way CSS can (but not always without repercussions) be appended dynamically to (Javascript DOM) document.body.innerHTML<\/i> to dynamically change CSS styling during webpage execution. In today’s case the user clicks a link and a Javascript window.prompt<\/a> window’s response from the user can be used to change that webpage’s background colour, and this principle is called into play.<\/p>\n

    Either link to today’s HTML and CSS and Javascript css_variable.html<\/a>‘s live run<\/a> or see it in its entirety below …<\/p>\n


    \n<!doctype html>
    \n<html>
    \n<head>
    \n<title>CSS Variables - RJM Programming - November, 2017<\/title>
    \n<style>
    \nbody {
    \n --main-bg-color: brown;
    \n}
    \n<\/b>
    \nbody {
    \n background-color: var(--main-bg-color);
    \n}
    \n<\/style>
    \n<script type='text\/javascript'>
    \n var mybodyc='', mybodyi='';
    \n<\/b>
    \n function changethings() {
    \n var newc=null;
    \n if (mybodyc == '') {
    \n newc=prompt('Describe a colour as the background colour eg. red or #ff0000', 'red');
    \n if (newc != null) {
    \n if (newc != '') {
    \n mybodyc=newc;
    \n document.getElementById('mya').innerHTML=newc;
    \n document.body.innerHTML+=' <style> .mybodyc { --main-bg-color: ' + newc + '; } <\/style> ';
    \n }
    \n }
    \n } else {
    \n newc=prompt('Describe a colour as the background colour eg. green or #00ff00', 'green');
    \n if (newc != null) {
    \n if (newc != '') {
    \n document.getElementById('mya').innerHTML=newc;
    \n document.body.innerHTML+=' <style> #mybodyi { --main-bg-color: ' + newc + '; } <\/style> ';
    \n }
    \n }
    \n }
    \n }
    \n<\/script>
    \n<\/head>
    \n<body id='mybodyi' class='mybodyc'>
    \n<h1>CSS Variables<\/h1>
    \n<h3>RJM Programming - November, 2017 ... click\/touch colour description to allow for change<\/h3>
    \n<h4>Thanks to <a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables'>https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables<\/a><\/h4>
    \n<div style=\"width:100%;margin-top:20%;text-align:center;\">
    \n<font size=20<b><i>I'm <a id='mya' onclick='changethings();' style='cursor:pointer;text-decoration:none;'>brown<\/a><\/i><\/b><\/font>
    \n<\/div>
    \n<\/body>
    \n<\/html>
    \n<\/code><\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n