{"id":117685,"date":"2018-03-24T10:14:43","date_gmt":"2018-03-24T10:14:43","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=117685"},"modified":"2021-07-08T11:31:52","modified_gmt":"2021-07-08T11:31:52","slug":"getting-started-css-variables","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/","title":{"rendered":"Getting Started with CSS Variables – Part 1"},"content":{"rendered":"

A Quick Start Guide to Understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS Reactive and even more Powerful.<\/h1>\n

CSS Variables <\/em>which are also called CSS Custom Properties <\/em>are getting quite popular these days, due to their high-end capabilities and reactive nature. After reading this piece of writing, you will be able to understand how they can be used in real-world code scenarios.<\/p>\n

Getting Started<\/h1>\n

The article is intended for Intermediate level front-end devs, (or designers who write code)<\/em>. It is expected that you have a basic understanding of CSS, HTML and a bit* of JavaScript.<\/p>\n

What are Variables (or CSS Variables)?<\/h1>\n

In general, a Variable<\/em> is a container which references or points to some data value, which can be accessed anywhere in the code block and in return it references to the pointing value as a result.<\/p>\n

The CSS Variable also behaves in the very similar manner.<\/p>\n

The Syntax<\/h1>\n

The generic syntax for CSS Variables is shown below\u200a\u2014<\/p>\n

\/*Declaration of Variables*\/<\/span>\n:root{\n--sans-serif: \"Helvetica\", Arial, sans-serif;\n--serif: \"Georgia\", Cambria, serif;\n}\n\/*Accessing the Declared Variables*\/<\/span>\nh1,h2,h3,h4,h5,h6{\nfont-family: var(--san-serif);\n}\np, ul, dl, ol, a{\nfont-family: var(--serif);\n}\n<\/pre>\n
Syntax Explanation<\/strong><\/h5>\n
A variable is declared with \u201c--\u201d<\/code> prefix followed by the variable name.<\/p>\n
A variable can be accessed anywhere in the *.css or *.html (using inline CSS) <\/em>with \u201cvar\u201d function. For example, a variable named \u201ccolor\u201d<\/em> with a value \u201cblue\u201d<\/em> can be declared as \u201c--color: blue\u201d<\/code> and can be accessed as var(--color)<\/code>.<\/p>\n
Don\u2019t get Confused with JavaScript Syntax. In JavaScript, \u201cvar\u201d is used to declare the variable while in CSS \u201cvar\u201d is used to access the variable\u2019s reference value.<\/p>\n
Let’s see a basic example below –<\/p>\n
[codepen_embed height=”244″ theme_id=”light” slug_hash=”MVvEJr” default_tab=”css,result” user=”nitishkmrk”]See the Pen <a href=‘https:\/\/codepen.io\/nitishkmrk\/pen\/MVvEJr\/<\/a>‘>CSS Variables #1<\/a> by Nitish Khagwal (<a href=’https:\/\/codepen.io\/nitishkmrk’>@nitishkmrk<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed]<\/p>\n
In the example above, We have declared two variables named \"--color-dark\"<\/code> and \"--color-bright\"<\/code>. We have accessed the values of these two variables in both \"bright\"<\/code> and \"dark\"<\/code> classes. That is how CSS Variables can be used at a glance, instead of writing same property values multiple times, we have just referenced to the variables.<\/p>\n
What problems do CSS Variables or Custom Properties resolve?<\/h1>\n
Let\u2019s look into the advantages of using CSS variables –<\/p>\n
1. Scalable and Readable\u00a0Code<\/h3>\n
In traditional CSS Methodology<\/em>, we repeat the CSS property values quite often. It not only makes our code clumsy, but also makes it hard to read, update the changes and managing it at a larger scale.<\/p>\n
2. Reactive\u00a0Elements<\/h3>\n
Once the CSS Variable\u2019s reference value is changed, simultaneously the respective elements are updated and repainted in the browser as per new reference values.<\/p>\n
3. Productive Workflow<\/h3>\n
CSS variables make our dev process a bit faster. If a property value is supposed to be updated, we just need to update the variable\u2019s reference value rather than hunting for each property value and updating it.<\/p>\n
4. Powers Mathematical Calculations<\/h3>\n
You can perform basic calculations using basic mathematical operators in CSS, using \u201ccalc()\u201d function. Only a single parameter with two operands <\/em>and one operator<\/em> can be passed through the calc() function and the result of the expression is used as the CSS property value.<\/p>\n
It supports the major mathematical operators\u00a0 (+) Addition, (-) Subtraction, (*) Multiplication and (\/) Division.<\/p>\n
The generic syntax for the calc() function is shown below\u200a\u2014<\/p>\n
calc(Operand1 [Operator] Operand2);<\/pre>\n
The good part is \u2014 CSS Variable can be passed through the calc function as an operand, which makes the calc() function even more dynamic and useful.<\/p>\n
Browser Support<\/h3>\n
CSS Variables can only be used on modern browsers only and if your target browser is quite outdated you should rather not prefer using CSS Variables.<\/p>\n
But Why not? People are sending spaceman to the mars these days, so at least you should be that liberal with the code.<\/p>\n
\"Browser<\/p>\n
Hope, you got a basic overview of how CSS Variables or Custom Properties works and makes your workflow scalable and more productive.<\/p>\n
Voila! The part 2<\/a> has alreadybeen published and will help you in Understanding the Scope in CSS Variables<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
A Quick Start Guide to Understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS Reactive and even more Powerful. CSS Variables which are also called CSS Custom Properties are getting quite popular these days, due to their high-end capabilities and reactive nature. After reading this piece of writing, you will be able to understand how […]<\/a><\/p>\n","protected":false},"author":29,"featured_media":117745,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[217,1774],"class_list":["post-117685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css3","tag-css","tag-css3"],"yoast_head":"\nGetting Started with CSS Variables - Part 1 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with CSS Variables - Part 1 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-24T10:14:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-08T11:31:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nitish Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nitish Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\"},\"author\":{\"name\":\"Nitish Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fee4a399dfbd8dfc6570efdf7295c9aa\"},\"headline\":\"Getting Started with CSS Variables – Part 1\",\"datePublished\":\"2018-03-24T10:14:43+00:00\",\"dateModified\":\"2021-07-08T11:31:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\"},\"wordCount\":677,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png\",\"keywords\":[\"css\",\"css3\"],\"articleSection\":[\"CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\",\"url\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\",\"name\":\"Getting Started with CSS Variables - Part 1 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png\",\"datePublished\":\"2018-03-24T10:14:43+00:00\",\"dateModified\":\"2021-07-08T11:31:52+00:00\",\"description\":\"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with CSS Variables – Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fee4a399dfbd8dfc6570efdf7295c9aa\",\"name\":\"Nitish Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a3100c52e659f7064fa37a0619aaea352fbe8a258f0ea0155361075df617e95b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a3100c52e659f7064fa37a0619aaea352fbe8a258f0ea0155361075df617e95b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nitish Kumar\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/nitish\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Started with CSS Variables - Part 1 - Webkul Blog","description":"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.","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:\/\/webkul.com\/blog\/getting-started-css-variables\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with CSS Variables - Part 1 - Webkul Blog","og_description":"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.","og_url":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-03-24T10:14:43+00:00","article_modified_time":"2021-07-08T11:31:52+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png","type":"image\/png"}],"author":"Nitish Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nitish Kumar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/"},"author":{"name":"Nitish Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fee4a399dfbd8dfc6570efdf7295c9aa"},"headline":"Getting Started with CSS Variables – Part 1","datePublished":"2018-03-24T10:14:43+00:00","dateModified":"2021-07-08T11:31:52+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/"},"wordCount":677,"commentCount":1,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png","keywords":["css","css3"],"articleSection":["CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/getting-started-css-variables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/","url":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/","name":"Getting Started with CSS Variables - Part 1 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png","datePublished":"2018-03-24T10:14:43+00:00","dateModified":"2021-07-08T11:31:52+00:00","description":"A quick start guide to understand\u200a\u2014\u200aWhat CSS Variables are and How they make CSS reactive and even more Powerful.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/getting-started-css-variables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Getting-Started-with-CSS-Variables-Webkul-Blog.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/getting-started-css-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with CSS Variables – Part 1"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fee4a399dfbd8dfc6570efdf7295c9aa","name":"Nitish Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a3100c52e659f7064fa37a0619aaea352fbe8a258f0ea0155361075df617e95b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a3100c52e659f7064fa37a0619aaea352fbe8a258f0ea0155361075df617e95b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nitish Kumar"},"url":"https:\/\/webkul.com\/blog\/author\/nitish\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/117685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=117685"}],"version-history":[{"count":59,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/117685\/revisions"}],"predecessor-version":[{"id":295258,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/117685\/revisions\/295258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/117745"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=117685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=117685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=117685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}