DEV Community: Trevor Bruner

What are CSS Variables?

Trevor Bruner — Thu, 06 Jan 2022 01:27:08 +0000

CSS variables, also known as custom properties(official name) or cascading variables, are a useful CSS feature that allows you to set a value once and reference it many times throughout an HTML document. As with other programming languages, variables are a valuable tool that helps reduce redundant tasks and hold values that can be used or changed later. CSS variables were introduced in 2016 with the release of Chrome 49, and are now supported across all modern web browsers with the exception of Internet Explorer.

Why use CSS Variables?

It will make writing and maintaining your CSS easier. Most websites have a color palette that is repeated throughout. Now imagine you have a website and want to change the color palette. In a complex website you'd have to update the colors in the many places it's used. That is a tedious task that no one wants to do. With CSS variables you'd only have to update the colors in once. It doesn't just have to be colors either, any CSS style that is repeated can take advantage of this. Not only that but variables make your CSS easier to read. It's much easier to understand CSS that has descriptive variable names than one with values set individually.

How to use CSS Variables

Setting a variable is just like setting a CSS property. The only difference is you use a custom variable name which must be prefixed with double hyphens (--). Note that CSS variables are case sensitive meaning --main is not the same as --MAIN.

--name: value

To reference a variable use the var() function.

var(--name, fallback)

Here name is the variable name and fallback is an optional value that will be used if the variable is invalid. The var() function only accepts two arguments. Anything following the first comma is taken as the fallback value. However you can still define multiple fallback values.

var(--name, red, black)

Here red, black is the second argument and will be used just the same as if you were to just define red as the value and black as the first fallback. If you decide to used another variable as a fallback you cannot do the following:

var(--name, --fallback-var)

This would be invalid as --fallback-var would be used and has no value when used outside the first argument of the var() function. Instead you would need to do the following:

var(--name, var(--fallback-var))

This is a valid way to define a variable as a fallback to another variable, but be warned as this can cause performance issues as it takes more time to parse variables.

If a variable name is invalid with no fallback the property will be set to the default value or inherited value. This may cause styling issues that make your page less accessible or difficult to parse. For example you may have a dark mode and a variable for the font color. If that variable is invalid the font color will default to black(or the inherited value). Now the text is going to be very difficult or impossible to read. While most modern browsers support CSS variables, there are users that may access your page from Internet Explorer or an older browser. There's also human error, you don't want a typo to break the styling of your page. For these reasons it's good practice to include a fallback.

CSS variables are typically set in the :root pseudo-class as it gives the variable a global scope and thus can be used throughout the document. If you need to you can set a variable anywhere in the document but it will only be accessible within that element's local scope.

Here's a short example of how you might use CSS variables:

:root {
  --heading-color: red;
  --paragraph-color: indigo;
}
h1 {
  color: var(--heading-color);
}
p {
  color: var(--paragraph-color);
}
#highlight {
  color: var(--heading-color);
}

Here the variables --heading-color and --paragraph-color are set under the :root selector which gives them a global scope. The --heading-color variable is then used as the color value for the h1 selector and the highlight id, and the --paragraph-color is used as the color value for the p selector.

CSS Variables in JavaScript

Yes, you can get and set CSS variables in JavaScript. To get a variable value use the .getPropertyValue() method. To set a variable value use the .setProperty() method.

// get root element
let root = document.querySelector(':root');

// get my-var value
root.style.getPropertyValue('--my-var');

// set my-var value to green
root.style.setProperty('--my-var', 'green');

Common Use Cases

I won't go into too much detail on these, but here are a few common use cases for CSS variables.

Theming

If you want different themes for your website, such as dark/light mode, you can use a set of variables that you change for each theme. The following is a simple example of how you could implement a dark/light mode feature with CSS and JavaScript.

:root {
  --bg-color: white;
  --text-color: black;
}
.dark-mode {
  --bg-color: black;
  --text-color: white;
}

const darkModeSwith = document.querySelector('#switch');

darkModeSwith.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");
});

Media Queries

Responsiveness is important in the current world of web development and variables with media queries makes this much easier to achieve. You could do the following and the margin size will change when the screen width is less than 600px.

:root {
  --margin: 25px;
}
@media screen and (min-width: 600px) {
  :root {
    --margin: 100px;
  }
}

Size and Space Elements Relative to Each Other

You can use the calc() function along with CSS variables to easily set things relative to each other. If you wanted to make your heading twice the size of your paragraph font you could do the following.

:root {
  --paragraph-font: 14px;
}
h1 {
  font-size: calc(var(--paragraph-font) * 2);
}

More CSS variables

Interested in learning more about CSS variables? Check out the following pages I used for reference:
Mozilla Web Docs
Google Developers
Lambda Test
CSS Docs

Introduction to HTML

Trevor Bruner — Wed, 06 Oct 2021 18:12:10 +0000

What is HTML?

HTML stands for HyperText Markup Language and is the standard language for structuring web pages. A HTML document is essentially a series of elements, each with an identify tag. These tags give meaning to HTML elements. Some examples include paragraphs, headings, and lists. HTML only provides page structure thus it is often used alongside other technologies like CSS and JavaScript that provide styling and interactivity.

HTML Elements

What is a HTML element? Well to answer that question lets look an example:

<p>Hello World</p>

This is an example of a paragraph element. This element is composed with an opening tag <p>, a closing tag </p>, and the content Hello World. As you may have noticed the opening tag is composed of the element name (in this case p for paragraph) enclosed in angle brackets. The closing tag is similar to the opening tag but contains a forward slash following the opening angle bracket. The content goes in between the opening and closing tags and can include other elements or, in this case, text.

Elements can also have attributes like in the example below:

<p class="greeting">Hello World</p>

This example is similar to the previous but it has class="greeting" in the opening tag. In this case class is the attribute and "greeting" is the value. Attributes like this one provide more information about the element that we don't want to appear. This information is useful when using JavaScript and CSS to select elements, and for making web pages more accessible as it is used by screen readers to identify content.

We need more than just the paragraph element to create a web page. Below are a few common HTML elements with a short explanation:

<html> - This is the root element and thus contains all other elements.

<head> - Contains information about the page like the title and links to imported files like CSS.

<body> - Contains all the visible content on the page.

<h1> - <h6> - Headings ranging from 1 to 6 with 1 being the highest level and one typically used for the main title.

<p> - Defines a paragraph.

<a> - The anchor element is used to define links. The href attribute contains a link to another resource, usually a URL.

<div> - A generic block level element often used to group elements or when there isn't a more descriptive element to use.

<span> - A generic inline element often used to style a portion of inline content.

<title> - Defines the documents title that typically displays in the browsers title bar or tab. It is a required element and can only be defined once.

<article> - Defines an article.

<img> - Defines an image. The attribute src is used to define the path to an image. The attribute alt is used to give a short description of an image. Though optional, the alt attribute should always be used as it will display when an image doesn't load and used by screen readers to identify an image. This improves user experience and accessibility.

<ol> <ul> <li> - Used to define lists. <ol> defines an ordered list, <ul> defines an unordered list, and <li> individual list items.

There are many more but this should be enough to get you started.

Simple Example

Now that we understand what HTML is let's look at a simple example.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Heading</h1>
  <p>paragraph</p>
  <ol>
    <li>Item One</li>
    <li>Item Two</li>
  </ol>
</body>
</html>

The first tag we see here is <!DOCTYPE html> which is a required declaration that tells the browser the document type is HTML. Following that we have the root html tag with the attribute lang="en". Here the lang attribute sets the language to English with the value en. The language attribute can be defined in any element but should always be defined in the html tag. Defining the language of your content allows you to style it differently based on the language.

Next we have the head element and it contains two meta elements and the title element. The first meta tag contains the attribute charset="UTF-8". This simply specifies the character encoding of the document. While the browser will define the character encoding if this is omitted HTML does not. So it's important to include it to ensure your page displays correctly. The character encoding UTF-8 is used as it provides access to almost all characters and symbols. The second meta tag contains the attributes name="viewport" and content="width=device-width, initial-scale=1.0". These collectively define the viewport based on the device width. I won't get into the details here, but these attributes are necessary to style a page differently based on the device width.

The body tag is last and contains heading, paragraph, and ol elements.

That completes the basic structure of a HTML document.

Thank you for reading!