How do I pass a variable to a CSS file?

Question

I'm new to web design but a fairly apt programmer. I have a style.css and reference it on 4 different HTML pages.

I want to change the background image and some other minor details for some pages (text size, height, etc). How do I pass a variable or get it to change for each...seems a waste to write a mostly similar CSS for each page. Thanks.

This answer covers an approach that should work for your question https://stackoverflow.com/a/45581552/5302749 CSS Custom Properties (aka variables) should do the trick for most use cases and has a HTML/CSS example. — Brian, Apr 07 '21 at 22:46
".seems a waste to write a mostly similar css for each page." this is why you should have a common style sheet used on all your pages. Make that change on the one stylesheet, job done. Keep in mind both CSS and HTML are purely declarative, on their own they do noting, the are purely interpreted by the browser. They are seperate entities so there is no mechanism to pass variables between the two. — Jon P, Apr 07 '21 at 22:51
Thanks Jon and Brian. still dont have a clue what i'm doing but now i have a direction to learn about, thanks — Lucas Beastall, Apr 07 '21 at 23:06
when i try to add it the line inside :root{ --backImage: url(/backArt/fire.jpg); } gives me the error expected RBRACE on that line and whenever i use var(--backImage) the var and () never change colour as they should... any ideas? — Lucas Beastall, Apr 07 '21 at 23:17

score 2 · Answer 1 · answered Apr 07 '21 at 23:07

You can use "class" if you want to set property to one or more(div, p, section, or other elements). In CSS file you can call that class using .(dot) and classname. For below example I have assigned className= "city" so while assigning css property to that div I will use .city{ //CSS Properties //}

.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Class</title>
  </head>
  <body>
    <div class="city">
      <ul>
        <li>London</li>
        <li>Europe</li>
      </ul>
    </div>

    <div class="city">
      <ul>
        <li>London</li>
        <li>Europe</li>
      </ul>
    </div>

    <div class="bird">
      <ul>
        <li>Parrot</li>
        <li>Pegion</li>
      </ul>
    </div>
  </body>
</html>

Or you can use "id". You cannot assign same id to other elements. It is unique. In CSS file you can call that id using #(hash) and classname. For below example I have assigned id= "bird" so while assigning css property to that div I will use #bird{ //CSS Properties //}

#bird {
      background-color: tomato;
      color: white;
      border: 2px solid black;
      margin: 20px;
      padding: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Class</title>
  </head>
  <body>
    <div class="city">
      <ul>
        <li>London</li>
        <li>Europe</li>
      </ul>
    </div>

    <div id="bird">
      <ul>
        <li>Parrot</li>
        <li>Pegion</li>
      </ul>
    </div>
  </body>
</html>

Tip: If you want to use same CSS properties use "class" or else use "id".

Tanner Dolby · Accepted Answer · 2021-04-08T01:13:07.127

Use class when you wish to apply a group of styles to many HTML elements, and unique id selectors for styling only a single element. You can also utilize CSS Variables for reusable values, there are a few ways to go about doing so. In general, you declare a custom variable by using a custom property name that begins with a double hyphen --, and a property value that can be any valid CSS value. Using var() allows us to insert the value of custom property (variable). If the custom property should be more than word, separate each word with a hyphen (kebab case).

Target the :root element and define variables:

:root {
  --my-cool-prop: #f06;
}

.my-selector {
  color: var(--my-cool-prop);
}

Create the custom property inside the selector:

.some-selector {
  --some-prop: 16px;
  --some-other-prop: blue;
  font-size: var(--some-prop);
  background-color: var(--some-other-prop);
}

So lets say you have four different HTML pages, you can use a single stylesheet (or multiple if you have a bunch of CSS and opt for a more modular approach) to define some custom variables and use them in the selectors you wish to style. Remember if you define a variable in style.css and try using it in another CSS file other-style.css it won't be available. When using var() you can also define multiple fallback values if the given variable isn't defined.

:root {
  --my-cool-prop: #f06;
}

.my-selector {
  color: var(--my-cool-prop, #000); /* black if --my-cool-prop is undefined */
}

.some-selector {
  --some-prop: #fff;
  --some-other-prop: blue;
  color: var(--some-prop, red); /* red if --some-prop is undefined */
  background-color: var(--some-other-prop, green); /* green if --some-other-prop is undefined */
}

<body>
  <h1 class="my-selector">Some title</h1>
  <div class="some-selector">
    <h2>Some other title</h2>
  </div>
</body>

@LucasBeastall Your welcome! Feel free to mark my answer accepted if it solved your problem. — Tanner Dolby, Apr 07 '21 at 23:43
It's not working yet, but i'm a hell of a lot father on than i was give me a min to get this working and i will @Tanner Dolby — Lucas Beastall, Apr 07 '21 at 23:59
could I change --my-cool-prop from the HTML? currently I'm trying to use: that works but only for the other items, for background image (whick is called in body{} nit a class called with .heading etc) it doesnt. any fixes or work arounds? — Lucas Beastall, Apr 08 '21 at 00:11
@LucasBeastall I don't think it's possible to change the value of custom variables from within the HTML using internal css (ie ` — Tanner Dolby, Apr 08 '21 at 04:22

How do I pass a variable to a CSS file?

2 Answers2