CODEWITHSUNDEEP
htmlcss
Lucas Beastall
Lucas Beastall

Reputation: 33

How do I pass a variable to a CSS file?

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.

Upvotes: 3

Views: 9092

Answers (2)

Tanner Dolby
Tanner Dolby

Reputation: 4421

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).

  1. Target the :root element and define variables:
:root {
  --my-cool-prop: #f06;
}

.my-selector {
  color: var(--my-cool-prop);
}
  1. 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>

Upvotes: 2

Bonny
Bonny

Reputation: 202

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".

Upvotes: 2

Related Questions