getting started with :root and css variables

[Pavel]

Hello,

besides background-color, what are other common uses for css vairables?

if i want to use css variables for an entire site, is it best to have say a style.css that i can link to in all my pages?

<link rel="stylesheet" href="style.css">

every page

and in that style.css i use :root and then my variables can be applied on every page? see what i mean?

and, please, anything else i should know 🙂

thank you!

 

[JosiahMaybe]

Hello,

besides background-color, what are other common uses for css vairables?

if i want to use css variables for an entire site, is it best to have say a style.css that i can link to in all my pages?

<link rel="stylesheet" href="style.css">

every page

and in that style.css i use :root and then my variables can be applied on every page? see what i mean?

and, please, anything else i should know 🙂

thank you!

Okay, cascading style sheets, CSS, controls sizing, all colors, relation, and in general, style. You may link to style sheets like you are suggesting. That may be one good way. I do not know much CSS so feel free to disregard or check this. X E.

 

[Johna]

Hello,

besides background-color, what are other common uses for css vairables?

if i want to use css variables for an entire site, is it best to have say a style.css that i can link to in all my pages?

<link rel="stylesheet" href="style.css">

every page

and in that style.css i use :root and then my variables can be applied on every page? see what i mean?

and, please, anything else i should know 🙂

thank you!

Hey there.
As far as I know, CSS variables can be used for any CSS property, as long as they have the right value.
I normally use it for colours (background and text), font families, and any other properties that may be repeated multiple times.

It's also useful for responsive design (e.g. setting font sizes at different device widths).

:root {
  --text: 20px;
}

@media (max-width: 768px) {
  :root {
    --text: 16px;
  }
}

p {
  font-size: var(--text);
}

If you have multiple pages using the same CSS variables, then it probably is a good idea to have a separate style sheet for the variables and then link it to each page.