Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites.
NEW I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go here to start helping!
You can play an audio of the recitation of the verse shown. You can choose from the following reciters:
and many more.
You can turn on the translation for the verses. Some of the languages available for translations are:
and many more.
Starting from version 1.0, you can show randomly generated Athkar on your new tab as well.
All Quran verses, audios and translations use the API of Al Quran Cloud
Icons from Feather
Logo from https://www.freeiconspng.com/img/8824
If you find any issues or bugs, please create an issue on the Github Repo.
","url":"https://backend.shahednasser.com/quran-in-new-tab-chrome-extension/","canonical_url":"https://shahednasserblog.tk/quran-in-new-tab-chrome-extension","uuid":"6cb8f7dc-9ccd-4e56-b4ad-d8e72803f26f","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f9742bfb366d4001e86ccb9","reading_time":1,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites.
NEW I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go here to start helping!
You can play an audio of the recitation of the verse shown. You can choose from the following reciters:
and many more.
You can turn on the translation for the verses. Some of the languages available for translations are:
and many more.
Starting from version 1.0, you can show randomly generated Athkar on your new tab as well.
All Quran verses, audios and translations use the API of Al Quran Cloud
Icons from Feather
Logo from https://www.freeiconspng.com/img/8824
If you find any issues or bugs, please create an issue on the Github Repo.
","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"ul","properties":{"className":["actions","special"]},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en","className":["button","large"]},"children":[{"type":"text","value":"Download Now"}]}]},{"type":"text","value":"\n "}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Replace the new tab page with Quran verses and beautiful nature pictures. The verses and pictures are randomly generated hourly. You can choose to show or hide your top sites."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NEW "}]},{"type":"text","value":"I am working on adding more languages to this extension, and I need help with many of them. If you think you can help in translating it, please go "},{"type":"element","tagName":"a","properties":{"href":"https://crowdin.com/project/quran-in-new-tab-extension"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":" to start helping!"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"recitations"},"children":[{"type":"text","value":"Recitations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can play an audio of the recitation of the verse shown. You can choose from the following reciters:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Mashary Rashid Alafasy"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdallah Basfar"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdurrahmaan As-Sudais"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Abdul Samad"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"and many more."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"translations"},"children":[{"type":"text","value":"Translations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can turn on the translation for the verses. Some of the languages available for translations are:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"English"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"German"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Spanish"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Indonesian"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Italian"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"and many more."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"athkar"},"children":[{"type":"text","value":"Athkar"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Starting from version 1.0, you can show randomly generated Athkar on your new tab as well."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"credits"},"children":[{"type":"text","value":"Credits"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All Quran verses, audios and translations use the API of Al Quran Cloud"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Icons from Feather"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Logo from "},{"type":"element","tagName":"a","properties":{"href":"https://www.freeiconspng.com/img/8824"},"children":[{"type":"text","value":"https://www.freeiconspng.com/img/8824"}]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"issues"},"children":[{"type":"text","value":"Issues"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you find any issues or bugs, please create an issue on the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/quran-extension"},"children":[{"type":"text","value":"Github Repo"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"recitations","heading":"Recitations"},{"id":"translations","heading":"Translations"},{"id":"athkar","heading":"Athkar"},{"id":"credits","heading":"Credits"},{"id":"issues","heading":"Issues"}]},"featureImageSharp":{"base":"quran.jpg","publicURL":"/static/34fbf15a86a81d576af29f787f7f9f04/quran.jpg","imageMeta":{"width":2000,"height":2000},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAECBAUD/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABiPXZL4zqApQRnGk//8QAHBAAAgICAwAAAAAAAAAAAAAAAQIAAxESBCEi/9oACAEBAAEFAkZwqrYjCm0zjuWm65OSUrTVfQsHf//EABYRAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAwEBPwEj/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/AW1Uf//EABwQAAICAgMAAAAAAAAAAAAAAAABAhESISIxYf/aAAgBAQAGPwLGMHRxizo3R2i+Rko0/BaW0L1H/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFhcZH/2gAIAQEAAT8hygnk5jjKt0hLFKb5DAWCu5Qr+0ChjpJSEaEXj1wh2imlXP/aAAwDAQACAAMAAAAQyy//AP/EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8QtYRev//EABgRAAIDAAAAAAAAAAAAAAAAAABRARAx/9oACAECAQE/EGKpiD//xAAdEAEAAwEAAgMAAAAAAAAAAAABABEhMUFRkaHR/9oACAEBAAE/EDnmh4F6kWROD1erfyWmXdi4b3JaDDzquW+eysWzpSybIjlo+4wwatkOOa8ybdone77bBUbUMDaZ8T//2Q==","aspectRatio":1,"src":"/static/34fbf15a86a81d576af29f787f7f9f04/ea4ab/quran.jpg","srcSet":"/static/34fbf15a86a81d576af29f787f7f9f04/477ba/quran.jpg 175w,\n/static/34fbf15a86a81d576af29f787f7f9f04/06776/quran.jpg 350w,\n/static/34fbf15a86a81d576af29f787f7f9f04/ea4ab/quran.jpg 700w,\n/static/34fbf15a86a81d576af29f787f7f9f04/3055e/quran.jpg 1050w,\n/static/34fbf15a86a81d576af29f787f7f9f04/eff08/quran.jpg 1400w,\n/static/34fbf15a86a81d576af29f787f7f9f04/4e5f3/quran.jpg 2000w","srcWebp":"/static/34fbf15a86a81d576af29f787f7f9f04/89afa/quran.webp","srcSetWebp":"/static/34fbf15a86a81d576af29f787f7f9f04/9fca7/quran.webp 175w,\n/static/34fbf15a86a81d576af29f787f7f9f04/37a4e/quran.webp 350w,\n/static/34fbf15a86a81d576af29f787f7f9f04/89afa/quran.webp 700w,\n/static/34fbf15a86a81d576af29f787f7f9f04/78e7a/quran.webp 1050w,\n/static/34fbf15a86a81d576af29f787f7f9f04/03d34/quran.webp 1400w,\n/static/34fbf15a86a81d576af29f787f7f9f04/49d6b/quran.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e6c","title":"CSS Variables and How To Use Them","slug":"css-variables-and-how-to-use-them","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/carbon--1-.png","excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","custom_excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"21 Apr 2019","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:28:48.000+00:00","published_at":"2019-04-21T21:28:00.000+00:00","updated_at":"2021-08-26T17:54:30.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"A lot of people don’t know about CSS variables, and you might be one of them!\nIt’s time to learn about CSS variables and how you can use them.\n\nCSS variables are declared for a specific element as a custom property. Then,\nyou can use that custom property anywhere you use that element.\n\n\n--------------------------------------------------------------------------------\n\nDeclaration and Usage\nHere’s how you declare a custom property:\n\nelement { \n\t--background-color: #f00;\n}\n\nHere, element can be a selector of any element, for example, div, p, .test, etc…\n\nWhat we did is that we declared a custom property for this element called \n--background-color . All CSS custom properties must start with -- .\n\nNow, we can use this custom property inside element using the var function.\n\nelement { \n\tbackground-color: var(--background-color);\n}\n\nHere, we assigned the background-color property of element to the variable we\ndeclared earlier.\n\nThis is nice and all, but usually we have repetition inside different elements,\nnot just one. declaring a custom variable inside one element type is not very\nconvenient.\n\nIn order to use a custom property inside more than one element type, we can\ndeclare the custom property inside the :root pseudo-class.\n\n:root { \n\t--primary-color: #333;\n}\n\nNow, we can use the variable --primary-color inside any element in our document:\n\ndiv { \n\tcolor: var(--primary-color);\n}\np { \n\tbackground-color: var(--primary-color);\n}\n.fancy { \n\tborder-color: var(--primary-color);\n}\n\nBy declaring our custom property inside :root , we are now able to use it inside \ndiv to set the text color, p to set the background color, and any element having\nclass fancy to set the border color. This way, not only did we minimize\nrepetition, but we also made it easier to edit and change our website’s primary\ncolor at any given point.\n\n\n--------------------------------------------------------------------------------\n\nInheritance\nElements can also inherit custom properties. For example, let’s say we have the\nfollowing HTML:\n\nA lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.
CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.
Here’s how you declare a custom property:
element { \n\t--background-color: #f00;\n}Here, element can be a selector of any element, for example, div, p, .test, etc…
What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .
Now, we can use this custom property inside element using the var function.
element { \n\tbackground-color: var(--background-color);\n}Here, we assigned the background-color property of element to the variable we declared earlier.
This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.
In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.
:root { \n\t--primary-color: #333;\n}Now, we can use the variable --primary-color inside any element in our document:
div { \n\tcolor: var(--primary-color);\n}\np { \n\tbackground-color: var(--primary-color);\n}\n.fancy { \n\tborder-color: var(--primary-color);\n}By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.
Elements can also inherit custom properties. For example, let’s say we have the following HTML:
<div class=\"parent\">\n\t<div class=\"first-child\"></div> \n <div class=\"second-child\"><div>\n</div>Then, we declare a variable called --text-size on .parent :
.parent { \n\t--text-size: 15px;\n}Now, we can use --text-size not only inside .parent , but also inside its children as well:
.first-child {\n font-size: var(--text-size);\n}We can also override custom properties. We can do that by redeclaring the custom property inside the child element:
.second-child { \n\t--text-size: 30px;\n}Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.
You can also define a fallback value for a variable by passing a second parameter to var . For example:
.second-child { \n\tfont-size: var(--text-size, 30px);\n}Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.
And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.
","url":"https://backend.shahednasser.com/css-variables-and-how-to-use-them/","canonical_url":null,"uuid":"294be2c5-8cd6-41a1-94b5-28838e34c151","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f973f90b366d4001e86cc54","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.
CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.
Here’s how you declare a custom property:
element { \n\t--background-color: #f00;\n}Here, element can be a selector of any element, for example, div, p, .test, etc…
What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .
Now, we can use this custom property inside element using the var function.
element { \n\tbackground-color: var(--background-color);\n}Here, we assigned the background-color property of element to the variable we declared earlier.
This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.
In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.
:root { \n\t--primary-color: #333;\n}Now, we can use the variable --primary-color inside any element in our document:
div { \n\tcolor: var(--primary-color);\n}\np { \n\tbackground-color: var(--primary-color);\n}\n.fancy { \n\tborder-color: var(--primary-color);\n}By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.
Elements can also inherit custom properties. For example, let’s say we have the following HTML:
<div class=\"parent\">\n\t<div class=\"first-child\"></div> \n <div class=\"second-child\"><div>\n</div>Then, we declare a variable called --text-size on .parent :
.parent { \n\t--text-size: 15px;\n}Now, we can use --text-size not only inside .parent , but also inside its children as well:
.first-child {\n font-size: var(--text-size);\n}We can also override custom properties. We can do that by redeclaring the custom property inside the child element:
.second-child { \n\t--text-size: 30px;\n}Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.
You can also define a fallback value for a variable by passing a second parameter to var . For example:
.second-child { \n\tfont-size: var(--text-size, 30px);\n}Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.
And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"declaration-and-usage"},"children":[{"type":"text","value":"Declaration and Usage"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s how you declare a custom property:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #f00"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" can be a selector of any element, for example, div, p, .test, etc…"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What we did is that we declared a custom property for this element called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"text","value":" . All CSS custom properties must start with "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" ."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use this custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" function."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we assigned the background-color property of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" to the variable we declared earlier."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to use a custom property inside more than one element type, we can declare the custom property inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" pseudo-class."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #333"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use the variable "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"text","value":" inside any element in our document:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".fancy"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By declaring our custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" , we are now able to use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" to set the text color, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" to set the background color, and any element having class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"fancy"}]},{"type":"text","value":" to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"inheritance"},"children":[{"type":"text","value":"Inheritance"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Elements can also inherit custom properties. For example, let’s say we have the following HTML:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"first-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"second-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, we declare a variable called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" :"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 15px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" not only inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" , but also inside its children as well:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can also override custom properties. We can do that by redeclaring the custom property inside the child element:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, if you use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" , it’ll be evaluated to 30px, but if you use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":", it will still be 15px."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"fallback-values"},"children":[{"type":"text","value":"Fallback Values"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also define a fallback value for a variable by passing a second parameter to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" . For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fallback values are used when the variable is not defined yet. They are "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"not"}]}]}]}]},{"type":"text","value":" used as a fallback to browser incompatibility."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"declaration-and-usage","heading":"Declaration and Usage"},{"id":"inheritance","heading":"Inheritance"},{"id":"fallback-values","heading":"Fallback Values"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"carbon--1-.png","publicURL":"/static/ffa580b4a342c60287433e8f82cb8e58/carbon--1-.png","imageMeta":{"width":1080,"height":836},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8klEQVQ4y6WUy27aQBSGeZaCTTC2xzeMjT2AjblfWilqVVXpE7RSVlGbRdVdV5SEKH06IqKEVcI7+K9m7HBpXRKpi8//eGbOr3PsM5PrX9xhcHmP3vUDuldrDK/WGP1aY/hC+N7rR+7BvHKDyxW6P5cIP3xH5+QzzJNT6JNT6G9ehjb5BOv9N/RnSzCv3HC+Qnu6gOd10KQSRErwSlJRUFQUZBV5eau7Y6YFhSAvSThyIvSmCwzmqyTD/vQGRTpGXnch+20ofoii5UE0XIhmjVNMEffwIGgVSPUJetObJEP2YC8SHUGqOChaNcheEyTsQqm3EmiIiu3BdCgEw4GoVyEyNVwIxOSxmYalipts2gQ4yVivcn2aF9K1g4al+giyYYNYHkq2v2+6MXA2xsn6MxlKZhXliget1QEJIqgNVnIIhQb8M6g0hOwHIK0uZBpCaUTQ2Fp9vP9TNoZ2DQXdRUGrbsvdyS6LAxmOUTRtELcGxfH/Ki+L7JLniWG58ZpnSGoURtSB7AVQaIu3kNJoQ212UPZDrqoXpC2V1TbccIEjN0LJ0JGXNeQVAkFlaIkSLR1vOdDY93F/toztjz9i4/gstt6dx+bbrylfdvRP2Px5bB6f8VjmwbxyT5cDO+CjnQP/HP+8HPoXdw+c2e3/kfr8BonVY0AbLAheAAAAAElFTkSuQmCC","aspectRatio":1.2962962962962963,"src":"/static/ffa580b4a342c60287433e8f82cb8e58/60290/carbon--1-.png","srcSet":"/static/ffa580b4a342c60287433e8f82cb8e58/847ef/carbon--1-.png 175w,\n/static/ffa580b4a342c60287433e8f82cb8e58/91cba/carbon--1-.png 350w,\n/static/ffa580b4a342c60287433e8f82cb8e58/60290/carbon--1-.png 700w,\n/static/ffa580b4a342c60287433e8f82cb8e58/f5f50/carbon--1-.png 1050w,\n/static/ffa580b4a342c60287433e8f82cb8e58/14010/carbon--1-.png 1080w","srcWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/89afa/carbon--1-.webp","srcSetWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/9fca7/carbon--1-.webp 175w,\n/static/ffa580b4a342c60287433e8f82cb8e58/37a4e/carbon--1-.webp 350w,\n/static/ffa580b4a342c60287433e8f82cb8e58/89afa/carbon--1-.webp 700w,\n/static/ffa580b4a342c60287433e8f82cb8e58/78e7a/carbon--1-.webp 1050w,\n/static/ffa580b4a342c60287433e8f82cb8e58/788b4/carbon--1-.webp 1080w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__631f8eea4e918d05f3537b51","title":"How to Get Elements From the DOM Using JavaScript","slug":"how-to-get-elements-from-the-dom-using-javascript","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/09/js-elm.jpg","excerpt":"This tutorial shows you different ways to get an element from the DOM using JavaScript.","custom_excerpt":"This tutorial shows you different ways to get an element from the DOM using JavaScript.","visibility":"public","created_at_pretty":"12 Sep 2022","published_at_pretty":"19 Sep 2022","updated_at_pretty":"19 Sep 2022","created_at":"2022-09-12T19:56:26.000+00:00","published_at":"2022-09-19T10:58:26.000+00:00","updated_at":"2022-09-19T10:58:26.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":{"base":"photo-1592609931095-54a2168ae893-2.jpeg","publicURL":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/photo-1592609931095-54a2168ae893-2.jpeg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHh6QZDjq//xAAaEAEAAwADAAAAAAAAAAAAAAABAAIREiFB/9oACAEBAAEFApQ6eO+VXFWf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQIBAT8Bp//EABoQAAICAwAAAAAAAAAAAAAAAAABECExMkH/2gAIAQEABj8CwdNXFOP/xAAcEAADAAMAAwAAAAAAAAAAAAAAAREhQVFhcYH/2gAIAQEAAT8heHx6GaR4cOQ+jrqtTQu6lgaVs//aAAwDAQACAAMAAAAQlM//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QrH//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8QdE//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFhweH/2gAIAQEAAT8QwaQHozIjaNdvYnh0/qNZJwLU36JcXxL2lqf/2Q==","aspectRatio":1.5028901734104045,"src":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg","srcSet":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/65d8c/photo-1592609931095-54a2168ae893-2.jpg 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/c5f21/photo-1592609931095-54a2168ae893-2.jpg 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/81a53/photo-1592609931095-54a2168ae893-2.jpg 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/4e5f3/photo-1592609931095-54a2168ae893-2.jpg 2000w","srcWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp","srcSetWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/dc8f3/photo-1592609931095-54a2168ae893-2.webp 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/2db4b/photo-1592609931095-54a2168ae893-2.webp 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/f5845/photo-1592609931095-54a2168ae893-2.webp 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/49d6b/photo-1592609931095-54a2168ae893-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.\n\nThis tutorial shows you different ways to get an element from the DOM using JavaScript.\n\n\ngetElementById\n\nThe getElementById() method allows you to retrieve an element from the DOM using the element's ID.\n\nIf no element exists in the DOM with the supplied ID, null will be returned instead.\n\nFor example:\n\nconst mainElement = document.getElementById('main');\n\n\ngetElementsByTagName\n\nThe getElementsByTagName() allows you to retrieve an HTMLCollection of elements that have the tag name you supply to the method. An example of a tag name is div.\n\nItems in an HTMLCollection can be accessed similarly to how you would access items in an array.\n\nFor example:\n\nconst divElements = document.getElementsByTagName('div');\nconsole.log(divElements[0]);\n\nYou can use this method on any element and not just the document. That way, you can retrieve all children of that element that have the supplied tag name.\n\nFor example:\n\nconst divElements = document.getElementsByTagName('div');\nconst pElements = divElements[0].getElementsByTagName('p');\nconsole.log(pElements);\n\n\ngetElementsByClassName()\n\nThe getElementsByClassName() method allows you to retrieve a live HTMLCollection of elements that have the class name you provide as a parameter.\n\nA live HTMLCollection means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.\n\nFor example:\n\nconst mainElements = document.getElementsByClassName('main');\nconsole.log(mainElements);\n\n\ngetElementsByName()\n\nThe getElementsByName() method allows you to retrieve elements by the value of the name attribute. For example, you can use it to retrieve input elements that have the name attribute set to email.\n\nThis method returns a live NodeList, which is generally similar to an HTMLCollection, but the items in the list can be accessed through the methods it provides.\n\nFor example:\n\nconst emailElements = document.getElementsByName('email');\nconsole.log(emailElements.item(0));\n\n\nquerySelector\n\nThe querySelector() method allows you to retrieve the first element that matches the specified selector. The selector can be any CSS selector.\n\nFor example:\n\nconst elm = document.querySelector('.main > p');\nconsole.log(elm);\n\nThis method can be used on any element, and not just the document. So, you can use it to retrieve a child element of a parent element that matches the specified selector.\n\nFor example:\n\nconst table = document.querySelector('.main > table');\nconst thead = table.querySelector('thead');\n\n\nquerySelectorAll\n\nThe querySelectorAll() method allows you to retrieve all elements that match the specified selector. This method returns a NodeList.\n\nFor example:\n\nconst elms = document.querySelectorAll('.main > p');\nconsole.log(elms.item(0));\n\nThis method can be used on any element, and not just the document. So, you can use it to retrieve all child elements of a parent element that match the specified selector.\n\nFor example:\n\nconst table = document.querySelector('.main > table');\nconst rows = table.querySelectorAll('tr');\nfor (const row of rows) {\n console.log(row);\n}\n\n\nchildren\n\nThe children property allows you to retrieve all immediate child elements of the document or any element. This property's type is a live HTMLCollection.\n\nFor example:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n console.log(row.children);\n}\n\n\nfirstElementChild\n\nThe firstElementChild property allows you to retrieve the first child element of the document or any element.\n\nIf the element does not have children, the value of firstElementChild is null.\n\nFor example:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n console.log(row.firstElementChild);\n}\n\n\nlastElementChild\n\nThe lastElementChild property allows you to retrieve the last child element of the document or any element.\n\nIf the element does not have children, the value of lastElementChild is null:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n console.log(row.lastElementChild);\n}\n\n\nscripts\n\nThe scripts property allows you to retrieve all