What are variables used for in css?

Question

What are variables used for? What is its relation to dark theme and light theme?

Answer 1

Oh okay thanks a lot for helping 🤗🤗

Answer 2

Nㅤㅤ got it but whats it realtion with dark theme or light theme

Answer 3

Ah thanks Calviղ

Answer 4

Ankit Chatterjee ThANKS FOR HELPING BUT DONT ADVERTISE YOUR CODES HERE

IF YOU WANT TO ADVERTISE YOU CAN DO IT HERE

https://www.sololearn.com/discuss/637386/?ref=app
https://www.sololearn.com/discuss/970315/?ref=app
https://www.sololearn.com/discuss/454060/?ref=app

Answer 5

Umar Fahm yep

Answer 6

Variables are a good practice in css. For example when you may have multiple elements with the same color, if you declare a variable with the color value, and use the variable value as the color property of those elements, when you want to change the color for example to change the color scheme from light to dark, you won’t have to find all the elements that have that color and won’t need to change one by one as you only need to change the variable value.

Answer 7

Is there a way to use HTML for light and dark theme?

Answer 8

https://code.sololearn.com/WCQOPHUSNX9i/?ref=app

Answer 9

Thank u all

Answer 10

Like other language of css also use variable to store data for particular value like
Variable name:value than need to be stored

Answer 11

Duh i dont know

Answer 12

If you want to have a stylish word in css you can write the following css
:-

<style type="text/css">

:root {
--newsprint: #15232d;
--dd-red: #aa3925;
--paper: #f4f2ea;
}

body {
font-family: "Roboto Slab", serif;
background-color: #f4f2ea;

/* BG Noise */
background-image: url("https://raw.githubusercontent.com/lucaskern/devilsdictionary/main/images/noise.png");
border: 10px solid var(--newsprint);
box-sizing: content-box;
}

img {
filter: sepia();
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
color: #152d1b;
}

header{
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 80px;
text-transform: uppercase;
display: inline-block;
line-height: 72px;
margin-bottom: 20px;

}
p{
margin-top: 0;
margin-bottom: 20px;
}
.head{
text-align: center;
position: relative;

}
</style>
Etc.

And according to your question

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. EG:-- BODY, H2,ETC

Answer 13

And also container, header, footer, etc

Answer 14

Variables are just awesome
Make your work easily, special I thought variable make the coloring part in web development easier for me...
Ex you can set
Primary Color
Secondary color
Set font for web
Like H1, H2, He size ....
The conclusion is the website code and web looks more professional 😉

Answer 15

:root{
--redColor:red;
--fontSize:20px
}

Answer 16

What I see every day (as pseudo code)

:root {
--company-primary-color: #FF5050;
--company-logo-color: #9033FF;
--promo-text: moneygreen;
--fine-print: 0.00001rem;
....etc
}

Answer 17

https://code.sololearn.com/WKoF1QA5rMTV/?ref=app

Answer 18

https://code.sololearn.com/WbZZoI76ewfM/?ref=app