+ 30

What are variables used for in css?

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

31st Aug 2021, 4:28 AM
Queen👽
Queen👽 - avatar
18 odpowiedzi
+ 11
Oh okay thanks a lot for helping 🤗🤗
31st Aug 2021, 5:17 AM
Queen👽
Queen👽 - avatar
+ 8
Nㅤㅤ got it but whats it realtion with dark theme or light theme
31st Aug 2021, 5:07 AM
Queen👽
Queen👽 - avatar
+ 7
Ah thanks Calviղ
31st Aug 2021, 7:04 AM
Queen👽
Queen👽 - avatar
1st Sep 2021, 10:38 AM
Queen👽
Queen👽 - avatar
+ 5
1st Sep 2021, 4:09 AM
Queen👽
Queen👽 - avatar
+ 3
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.
31st Aug 2021, 3:38 PM
Francisco Costa
Francisco Costa - avatar
+ 3
Is there a way to use HTML for light and dark theme?
31st Aug 2021, 4:11 PM
Umar Fahm
Umar Fahm - avatar
31st Aug 2021, 7:02 AM
Calviղ
Calviղ - avatar
+ 2
Thank u all
1st Sep 2021, 4:09 AM
Queen👽
Queen👽 - avatar
+ 2
Like other language of css also use variable to store data for particular value like Variable name:value than need to be stored
1st Sep 2021, 1:23 PM
Rudrapratap Singh Bais
+ 2
Duh i dont know
1st Sep 2021, 5:24 PM
Keira Seville
Keira Seville - avatar
+ 1
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
1st Sep 2021, 7:50 AM
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂ - avatar
+ 1
And also container, header, footer, etc
1st Sep 2021, 7:51 AM
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂ - avatar
+ 1
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 😉
1st Sep 2021, 2:06 PM
Manvendra Yadav
Manvendra Yadav - avatar
+ 1
:root{ --redColor:red; --fontSize:20px }
4th Oct 2021, 7:05 PM
Mido Ammar
Mido Ammar - avatar
+ 1
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 }
2nd Mar 2022, 12:57 AM
Sam
1st Sep 2021, 8:19 AM
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂ - avatar
- 3
https://code.sololearn.com/WbZZoI76ewfM/?ref=app
1st Sep 2021, 9:27 AM
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂
꧁Ankit Chatterjee[LESS ACTIVE THAN EVER]꧂ - avatar