kjodle/css-variables
kjodle/css-variables
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added instructional text

Browse Source
This commit is contained in:
Kenneth John Odle 2021-07-24 18:37:05 -04:00
parent db4f32c79f
commit 26f7757760
1 changed files with 147 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
index.htm
View File

@ -10,12 +10,132 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Reset */
html, body, div, span, applet, object, iframe, img, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-family: Garamond, monospace;
}
#main {
max-width: 900px;
margin: 0 auto;
padding: 0 2em;
border-left: solid 1px grey;
border-right: solid 1px grey;
}
.reset {
max-height: 0;
}
pre {
background: #efefef;
padding: 0.5em;
}
code {
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="main">
<div class="reset">&nbsp;</div>
<h1>The Before Times…</h1>
<p>
Before CSS was a thing, the only way to style HTML was to add styling information to each and every HTML element that you wanted to style. If you decided that you wanted all your H1 headings to be blue and all your H2 headings to be green, you had to add that information to each and every <code>h1</code> and <code>h2</code> element in your page. If you later decided to change your H1 headings to dark blue and your H2 headings to medium blue, you had to go through your code, line by line, and change each and every <code>h1</code> and <code>h2</code> element.
</p>
<p>
CSS changed all that. Now it was possible to add a simple <code>&lt;style&gt;</code> element to your document's head and declare all your style choices there. By putting this information in a separate stylesheet, you could easily ensure that all the pages across a website would have identical styling.
</p>
<p>
CSS is amazingly powerful. You can group selectors together, and you can use CSS classes to style multiple selectors or multiple elements, and use CSS ids to style a single element. However, it can still be difficult to change a group of elements.
</p>
<p>
That's where CSS variables come into play.
</p>
<h1>Basic Usage</h1>
<p>
A css variable can be declared in either a page's <code>&lt;style&gt;</code> element, or in an external stylesheet. Its scope will extend to wherever that stylesheet is referenced. A basic definition looks like this:
</p>
<pre>
element {
--variable-name: value;
}
</pre>
<p>
A real-life defintion might look like this in the css for the definition:
</p>
<pre>
ul {
--bg-color: #000000;
}
</pre>
<p>
…and like this in the use of that variable:
</p>
<pre>
.main {
background-color: var(--bg-color);
}
</pre>
<p>
And like this in the html:
</p>
<pre>
&lt;ul class="main"&gt;
&lt;li&gt;First list item&lt;/li&gt;
&lt;li&gt;Second list item&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>
The above variable works because we defined the <code>--bg-color</code> variable to operate under the scope of the <code>&lt;ul&gt;</code> element. To make a variable avaialable to <em>all</em> elements, define it under the <code>root</code> element:
</p>
<pre>
:root {
--bg-color: #000000;
}
</pre>
<h2>What use is this?</h2>
<p>
While CSS classes make it easy to change the style of a number of different elements at once, CSS variables make it easy to change the style of a number of different selectors at once. This is valuable if you are still developing the overall appearance of a website, or if you know that the appearance will change later, and you want certain elements to share a particular style.
</p>
<h2>A Few Important Things to Note:</h2>
<ol>
<li>Variable names <strong>must</strong> be prefaced by two hyphens (<code>--</code>).</li>
<li>Varialbe names are case-sensive. <code>--bg-Color</code> is not the same as <code>--bg-color</code>.</li>
<li>Variables are invoked using the <code>var(--variable-name)</code> construct.</li>
<li>Variables must be defined for a given element, which is then their scope.</li>
<li>To make a variable available to multiple elements, define it under the <code>root</code> element (:root). Note the leading colon.</li>
</ol>
<hr />
<h1>This is an H1 Element</h1>
<h2>This is an H2 Element</h2>
@ -47,6 +167,9 @@
<li>kittens</li>
<li>bunnies</li>
</ul>
</div>
</body>
</html>