{"id":19316,"date":"2020-07-11T01:14:27","date_gmt":"2020-07-11T08:14:27","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19316"},"modified":"2020-12-29T11:50:18","modified_gmt":"2020-12-29T19:50:18","slug":"css-variables","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-variables\/","title":{"rendered":"CSS Variables"},"content":{"rendered":"\n

As a developer, the languages I have encountered so far have had a system of pointing to something in memory and giving it a name so that I could reference it later. As a student, you may have encountered this first in math class as a pre-algebra or algebra. This system is called <\/em>variables<\/em><\/strong>, and we encounter them pretty much everywhere in computer science. <\/em><\/p>\n\n\n\n

CSS is no exception.  This article\u2019s purpose is to introduce you to CSS Variables and show you how to implement them in your project to streamline your CSS.<\/em>
<\/p>\n\n\n\n

Why Do We Need Variables? <\/h2>\n\n\n\n

This question comes up a lot with newer coders: Why do we need variables if the CSS works fine as it is? That\u2019s a fantastic question! The answer will become clearer as you deal with large documents and more complex codebases. 
<\/p>\n\n\n\n

The same color or the same font-size might need to be used in 100 different places. On the initial setup, one wouldn\u2019t necessarily think of having to change a font or a color down the road, but it does happen! 
<\/p>\n\n\n\n

Setting up your design system \u2013 the font-sizes, font-families, and color-scheme(s) \u2013 you will need for your project might save you time down the road if those colors needed to be changed because a company adopts a new color scheme or font-family. You would only need to change the system in one place as opposed to 100 different places! <\/p>\n\n\n\n

Creating CSS Variables<\/h2>\n\n\n\n

CSS Variables are also known as CSS custom properties. We can name them what we would like as long as it’s introduced by two (2) hyphens (–) at the beginning of the property name. The most common use case is to set color-schemes and and design-system properties globally using the :root pseudo-class:<\/p>\n\n\n\n

:root {\n --main-bg-color: lightblue;\n --secondary-bg-color: royalblue;\n --main-color: black;\n --secondary-color: purple;\n --main-font-family: 'Roboto';\n --heading-font-family: fantasy;\n --font-xs: 1rem;\n --font-sm: 1.1rem;\n --font-md: 1.4rem;\n --font-lg: 1.7rem;\n --font-xl: 2.1rem;\n --font-xxl: 2.8rem;\n}<\/pre><\/div>\n\n\n\n
The root element represents our <html><\/code> tag since it\u2019s at the base of our document. Inside the code block are CSS custom properties or variables <\/em><\/strong>that can be used in our style sheet. The format of a CSS variable is this:
<\/p>\n\n\n\n
--<custom-property-name>: <css value>; <\/pre><\/div>\n\n\n\n
The property name can be whatever you\u2019d like after you start your variable name with the two dashes. It is a good idea though to name it something fairly generic so that it might be able to be used in multiple spots. In this illustration, I used property names that describe what the value\u2019s purpose is in our document. Having these variables allows us to streamline our CSS so that we keep font-sizes and colors consistent in our code.<\/p>\n\n\n\n
Using CSS Variables<\/h2>\n\n\n\n
Using our variables that we created in the :root pseudo-element at the beginning of our CSS is fairly simple. Create a CSS selector with the property name you want to use your variable in. The syntax for using that variable is:
<\/p>\n\n\n\n
.sample-css-selector {\n<property name> : var(<variable name>);\n}<\/pre><\/div>\n\n\n\n
The variable name refers to any one of the variables that were created in the root. The variable name does need the two hyphens at the beginning so don\u2019t forget to include it! 
<\/p>\n\n\n\n
One important thing to note is that these variables follow all of the same standard cascade rules. Basically, what this means is that you can have @media queries that assign different values to the same variable name! This defeats the need for media queries further down in your CSS.  <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n \n<head>\n  <meta charset="UTF-8" \/>\n  <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n  <title>CSS Variables<\/title>\n  <style>\n    :root {\n      --main-bg-color: lightblue;\n      --secondary-bg-color: royalblue;\n      --main-color: black;\n      --secondary-color: purple;\n      --main-font-family: 'Roboto';\n      --heading-font-family: fantasy;\n      --font-size-1: 1rem;\n      --font-size-2: 1.1rem;\n      --font-size-3: 1.4rem;\n      --font-size-4: 1.7rem;\n      --font-size-5: 2.1rem;\n      --font-size-6: 2.8rem;\n    }\n \n    @media screen and (max-width: 992px) {\n      :root {\n        --main-bg-color: green;\n        --secondary-bg-color: darkgreen;\n        --main-color: black;\n        --secondary-color: white;\n        --main-font-family: 'Roboto';\n        --heading-font-family: fantasy;\n        --font-size-1: .8rem;\n        --font-size-2: 1rem;\n        --font-size-3: 1.2rem;\n        --font-size-4: 1.4rem;\n        --font-size-5: 1.8rem;\n        --font-size-6: 2.1rem;\n      }\n    }\n \n    * {\n      box-sizing: border-box;\n    }\n \n    body {\n      font-size: 62.5%;\n      max-width: 800px;\n      width: 100%;\n      margin: 0 auto;\n      font-family: var(--main-font-family);\n    }\n \n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-family: var(--heading-font-family);\n      font-weight: bold;\n    }\n \n    a {\n      font-size: var(--font-size-2);\n    }\n \n    h1 {\n      font-size: var(--font-size-6);\n    }\n \n    h2 {\n      border-bottom: 1px solid black;\n      font-size: var(--font-size-5);\n    }\n \n    h3 {\n      color: var(--secondary-color);\n      font-size: var(--font-size-4);\n    }\n \n    p {\n      font-size: var(--font-size-2);\n    }\n \n    header {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: space-between;\n      background: var(--secondary-bg-color);\n    }\n \n    .logo {\n      font-variant: small-caps;\n      width: 50%;\n      padding: 0 20px;\n      color: var(--secondary-color);\n    }\n \n    nav {\n      width: 50%;\n      display: flex;\n      justify-content: space-around;\n    }\n \n    main {\n      padding: 20px;\n      display: flex;\n      flex-flow: row wrap;\n      width: 100%;\n      background: var(--main-bg-color);\n \n \n    }\n \n    section {\n      width: 50%;\n      padding: 10px;\n    }\n \n    ul {\n      border: 1px solid black;\n      padding: 20px;\n    }\n  <\/style>>\n \n  <body>\n    <header "main-container">\n      <h1 class="logo">logo here<\/h1>\n      <nav>\n        <a href- "">Link 1<\/a>\n        <a href- "">Link 2<\/a>\n        <a href- "">Link 3<\/a>\n        <a href- "">Link 4<\/a>\n      <\/nav>\n    <\/header>\n    <main>\n      <section>\n        <h2>Section heading here<\/h2>\n        <p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Tivo foodzie reddit hojoki zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,\n          convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Xobni mzinga\n          balihoo lala, waze.<\/p>\n \n        <p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore\n          Rovio. Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity<\/p>\n \n        <h3>Section subheading<\/h3>\n        <p>\n          Twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga\n          lala, lijit babblely. Voki kiko dogster, tumblr.\n        <\/p>\n      <\/section>\n      <section>\n        <h2>Section heading here<\/h2>\n        <p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk\n          convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki\n          zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,\n          convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo\n          zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga\n          balihoo lala, waze.<\/p>\n \n        <p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore\n          rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.\n          Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity<\/p>\n \n        <h3>Section subheading<\/h3>\n        <p>\n          Vuvox boxbe babblely sifteo gsnap yammer bubbli, kazaa convore ideeli eskobo. mozy. Lala balihoo dropio etsy vimeo dogster\n          bebo, unigo shopify babblely skype wesabe. twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga\n          lala, lijit babblely. Voki kiko dogster, tumblr.\n        <\/p>\n      <\/section>\n      <section>\n        <h2>Section heading here<\/h2>\n        <p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk\n          convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki\n          zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,\n          convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo\n          zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga\n          balihoo lala, waze.<\/p>\n \n        <p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore\n          rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.\n          Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity<\/p>\n \n        <h3>Section subheading<\/h3>\n        <p>\n          Nuvvo babblely chartly mobly prezi, heroku akismet yammer skype zappos, weebly mobly blippy. Divvyshot dopplr imvu skype\n          omgpop jaiku, akismet jibjab squidoo lala. Boxbe sclipo prezi kaboodle oovoo yuntaa fleck, divvyshot foodzie zapier\n          scribd.\n        <\/p>\n      <\/section>\n      <section>\n        <h2>Section heading here<\/h2>\n        <p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk\n          convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki\n          zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,\n          convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo\n          zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga\n          balihoo lala, waze.<\/p>\n \n        <p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore\n          rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.\n          Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity<\/p>\n \n        <h3>Section subheading<\/h3>\n        <p>\n          Vuvox boxbe babblely sifteo gsnap yammer bubbli, kazaa convore ideeli eskobo. mozy. Lala balihoo dropio etsy vimeo dogster\n          bebo, unigo shopify babblely skype wesabe. twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga\n          lala, lijit babblely. Voki kiko dogster, tumblr.\n        <\/p>\n      <\/section>\n    <\/main>\n  <\/body>\n \n<\/html><\/pre><\/div>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
CSS has features that include variables \u2013 referenced custom properties that can be used as values to CSS properties in your selectors. Those variables follow the traditional cascading rules as regular CSS. This helps to make media queries a little simpler to construct when constructing responsive websites. <\/p>\n","protected":false},"excerpt":{"rendered":"As a developer, the languages I have encountered so far have had a system of pointing to something in memory and giving it a name so that I could reference it later. As a student, you may have encountered this first in math class as a pre-algebra or algebra. This system is called variables, and…","protected":false},"author":77,"featured_media":19111,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-19316","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Variables: A Step By Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-variables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Variables\" \/>\n<meta property=\"og:description\" content=\"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-11T08:14:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:50:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Variables\",\"datePublished\":\"2020-07-11T08:14:27+00:00\",\"dateModified\":\"2020-12-29T19:50:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/\"},\"wordCount\":600,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/pankaj-patel-4oAFasAPftg-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/\",\"name\":\"CSS Variables: A Step By Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/pankaj-patel-4oAFasAPftg-unsplash.jpg\",\"datePublished\":\"2020-07-11T08:14:27+00:00\",\"dateModified\":\"2020-12-29T19:50:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/pankaj-patel-4oAFasAPftg-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/pankaj-patel-4oAFasAPftg-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"CSS Variables in Action\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-variables\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Variables\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Variables: A Step By Step Guide | Career Karma","description":"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-variables\/","og_locale":"en_US","og_type":"article","og_title":"CSS Variables","og_description":"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.","og_url":"https:\/\/careerkarma.com\/blog\/css-variables\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-11T08:14:27+00:00","article_modified_time":"2020-12-29T19:50:18+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Variables","datePublished":"2020-07-11T08:14:27+00:00","dateModified":"2020-12-29T19:50:18+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/"},"wordCount":600,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-variables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-variables\/","url":"https:\/\/careerkarma.com\/blog\/css-variables\/","name":"CSS Variables: A Step By Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg","datePublished":"2020-07-11T08:14:27+00:00","dateModified":"2020-12-29T19:50:18+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"CSS stylesheets have the reputation for getting..well...rather large. Keep track of how your design system should be laid out and change it in one spot with CSS Variables.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-variables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/pankaj-patel-4oAFasAPftg-unsplash.jpg","width":1020,"height":680,"caption":"CSS Variables in Action"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Variables"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19316"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19111"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}