Is it possible to define constants in CSS?

I use a few colors throughout my CSS style sheet. For example,

#testdiv{
  background: #123456;
}

Is it possible to define that color by name so I can reference it in the CSS sheet like the following?

#testdiv{
  background: COLORNAME;
}

Not with plain CSS, but there are some CSS extensions that you could use, like Sass or less-css.

Here's an example of Less CSS:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Yes, using classes is a good approach, but it is now possible to declare variables in CSS. And variables (especially color ones) are incredibly useful when you declare the same color (one where you need the hex value, if you use an integrated color it doesn't really matter as much).

And this is using plain CSS (and tbh, not nearly as elegant as using SASS or lessCSS) but it works for purposes of plain CSS. First off, define the actual variable in the :root block. You can define it in e.g. a p block as well (or anything else for that matter) but it'll only be available in that block. So to make sure it's globally accessible, put it in the root block:

:root {
  --custom-color: #f0f0f0;
}

And using the var method (without the var method it won't be resolved as an actual reference) you can then reference it later:

p{
    color: var(--custom-color);
}

Since the :root block is (like all other CSS declarations) a fully functioning block that references elements, you can't declare something like:

:root{
    color: #00ff00;
}

That would reference the color attribute of every single element and set it to (in this example) #00ff00. Every variable name you declare has to start with --, meaning you can do:

:root{
    --color: #00ff00;
}

And again, if you can, use something like SASS or lessCSS. The ability to declare them by writing @color = #fff* and referencing with @color* is much easier than dealing with plain CSS and having to use the var keyword every time you want to access a custom property.

And you can access inline CSS with JS to get and/or alter the properties:

//Inline CSS
element.style.getPropertyValue("--custom-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--custom-color");

// set variable on inline style
element.style.setProperty("--custom-color", "#f0f0f0");

NOTE!

This is a recently added feature, so browser compatibility is important to check. Especially firefox is worth paying extra attention to, as it has a gap between the introduction of the variable declarations themselves and the var() method. caniuse currently estimates 91.65% of users run a browser with support for the method.

_{* with lessCSS it's @color, with SASS it is $color}

There are a couple of proposals for this, so it might happen soon, but nothing has yet been standardised as far as I know.

The problem with using CSS classes for this is that they are no help if you want to use the same value for different properties, for example if you want to use a particular color value for a border on one element, and a background-color on another.

In CSS, you can declare your constant in :root block:

:root {
  --main-bg-color: #1596A7;
}

And using with the var() method:

.panel-header {
    background: var(--main-bg-color);
    color: ...
}

It is probably a better practice to define a CSS class and reuse it on each element you want to assign the color to rather than coding it to a specific element.

Like so:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size: 8pt;
}

It also helps to know that an element can have multiple classes applied, so you can break out your "Constant" element values into separate classes and apply more than one as needed.

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>

Use Sass or Less.

Nowadays, using preprocessors like the above is a common practice for a better front-end development workflow.

It helps you being more organized and features like variables or mixins are some of the reasons they are worth taking into consideration.

You can use Sass variables:

$color: #4D926F;

.someclass{
  color: $color;
}

You can have constants in a CSS file, declaring them like this:

*{
 -my-lightBlue: #99ccff;
 -my-lightGray: #e6e6e6;
}

Then you can use them in the CSS file like this:

.menu-item:focused {
  -fx-background-color: -my-lightBlue;
}

After that you can use them programmatically like this:

progressBar.setStyle("-fx-accent: -my-lightBlue;");

The standard way to do this is PHP. Add #define statements at the beginning of your CSS file, like

#define COLORNAME: #123456;

Instead of linking to the CSS file in the head of your HTML file, run a PHP script at that location. The script loads the CSS file, replaces all occurrences of COLORNAME by #123456 and streams the patched text to the client using echo or print.

Alternatively, you could upload the source file (also using PHP), use PHP to create a CSS file once where all occurrences of #defines are replaced, and use that file in your HTML. This is more efficient, since you're doing the conversion only once, at the upload, instead of every time you load the HTML file.