{"id":68158,"date":"2019-08-17T18:13:52","date_gmt":"2019-08-17T12:43:52","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=68158"},"modified":"2019-08-23T14:20:07","modified_gmt":"2019-08-23T08:50:07","slug":"javascript-css","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-css\/","title":{"rendered":"JavaScript CSS &#8211; Gain Expertise in the implementation of CSS Methods"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1441,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Style_sheet_(web_development)&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250928213900\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Style_sheet_(web_development)&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:02:57&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-12-09 07:02:57&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>After going through the previous tutorial on <em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/\">JavaScript Styles<\/a><\/strong><\/em>, I hope you have a better understanding of how JavaScript works with CSS and HTML. But there are some additional details related to CSS that we skipped before. We will cover them in this tutorial, but I suggest you learn the previous concept first.<\/p>\n<p>Let\u2019s say I have a heading and I want to change its color. Well, we have multiple options to do that. We will dig into each of them to be able to select the best one for a particular situation.<\/p>\n<h2>Methods of JavaScript CSS<\/h2>\n<p>We will dive into different methods to implement CSS using JavaScript.<\/p>\n<h3>1. Inline CSS<\/h3>\n<p>We used this approach in the DataFlair&#8217;s previous tutorial on JavaScript Styles, so we are all familiar with it. This is the most simple method to achieve the desired output. To do that, you select the DOM element you want to modify and change its inline styles.<\/p>\n<p>The <strong>code<\/strong> for the task is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;body&gt;\r\n      &lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n\r\n    &lt;script&gt;\r\n        document.querySelector('h1').style.color = \"navy\";\r\n    &lt;\/script&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68166\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code.jpg\" alt=\"Inline CSS Code - JavaScript CSS\" width=\"1298\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-Code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p>The <strong>output<\/strong> of the following program will look something like this.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68167 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output.jpg\" alt=\"Inline CSS output - JavaScript CSS\" width=\"1299\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Inline-CSS-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Note:<\/strong> The output for other programs of this tutorial are the same.<\/p>\n<p>The code above added the style color to h1, as shown in the Browser Styles tab.<\/p>\n<p><em><strong>Wait a minute! Have you completed the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-dom\/\">JavaScript DOM Tutorial<\/a><\/strong><\/em><\/p>\n<h3>2. Global Styles<\/h3>\n<p>Another way to get the previous output is by creating a &lt;style&gt; tag, fill it with CSS rules, then append the tag to the DOM. It will create the &lt;style&gt; tag inside the &lt;head&gt; tag of the document. We use JavaScript\u2019s innerHTML property to add various styles to the page.<\/p>\n<p>The <strong>code<\/strong> of the same would be as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script&gt;\r\n    var style = document.createElement('style');\r\n        style.innerHTML = `\r\n            h1 {\r\n            color: navy;\r\n            }\r\n        `;\r\n        document.head.appendChild(style);\r\n&lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68168\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code.jpg\" alt=\"Global styles CSS code\" width=\"1297\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code.jpg 1297w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code-1024x586.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Global-styles-CSS-code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1297px) 100vw, 1297px\" \/><\/a><\/p>\n<p>I used backticks in the program to stretch the code into multiple lines. If you choose, you can use single or double inverted commas to define the property. But you won\u2019t be able to add more than one property with them, so act as per your needs.<\/p>\n<h3>3. CSSOM insertRule<\/h3>\n<p>The <strong>CSS Object Model (CSSOM)<\/strong> is a set of APIs that allows the manipulation of CSS from JavaScript. This is a lesser-known, but very efficient option to add CSS to the document. While this technique might look similar to the previous one, these two are completely different. In this approach, we used a built-in JavaScript method, <strong>insertRule()<\/strong>, to add the CSS rules to the webpage. It allows the user to read and alter CSS styles dynamically.<\/p>\n<p>The <strong>code<\/strong> to implement this approach is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script&gt;\r\n    var style = document.createElement('style');\r\n    document.head.appendChild(style);\r\n    \/\/using CSSOM insertRule\r\n    style.sheet.insertRule('h1 {color: navy}');\r\n&lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68169\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code.jpg\" alt=\"CSSOM insertRule code\" width=\"1297\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code.jpg 1297w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code-1024x586.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/CSSOM-insertRule-code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1297px) 100vw, 1297px\" \/><\/a><\/p>\n<p>Once applied, you cannot alter this property in Chrome DevTools since it doesn\u2019t allow editing dynamic CSS styles. Keep this in mind while programming, else it might cause troubles later.<\/p>\n<p><em><strong>Do you know &#8211; <a href=\"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/\">How to Implement CSS Styles in JavaScript<\/a><\/strong><\/em><\/p>\n<h3>4. Constructible Style Sheets<\/h3>\n<p>This method is only applicable for use in Chrome; thus, use it with caution. The createElement(\u2018style\u2019) method and document.head.appendChild(style) statement adds a &lt;style&gt; element in the &lt;head&gt; tag of the document. The pitfall is that they may produce duplicate CSS code, with loads of overhead. This leads to inconsistent and inefficient styling in the code, which you must avoid.<\/p>\n<p>Constructible stylesheets are a new technique to create and distribute reusable styles in the document. The CSSStyleSheet interface is the root of a collection of CSS representation interfaces, referred to as the CSSOM. It offers a programmatic way to manipulate <a href=\"https:\/\/en.wikipedia.org\/wiki\/Style_sheet_(web_development)\">style sheets<\/a> as well as eliminating the problems associated with the old method.<\/p>\n<p>To implement these stylesheets, use the <strong>code<\/strong> below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script&gt;\r\n    \/\/ creating a shared stylesheet:\r\n        const sheet = new CSSStyleSheet();\r\n        \/\/changing color\r\n        sheet.replaceSync('h1 {color: navy}');\r\n\r\n        \/\/ applying the stylesheet to a document:\r\n        document.adoptedStyleSheets = [sheet];\r\n&lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68172\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code.jpg\" alt=\"Constructible Stylesheets Code\" width=\"1298\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Constructible-Stylesheets-Code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>This was a very informative tutorial on the different ways to link JavaScript with CSS. Remember these concepts while working on a project since they will simplify your job, adding efficiency to your code. You must understand all the basic and intermediate topics from JavaScript tutorial series before you work with these advanced topics. Keep practicing, and you\u2019ll get the hang of what programming in JavaScript is like in real-life. You can always ask for help if you face any difficulty. But don\u2019t forget, practicing is the key to learn a language thoroughly, including JavaScript.<\/p>\n<p><em><strong>Time to learn about the JavaScript Modules in the\u00a0DataFlair&#8217;s JavaScript Tutorial Series.<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>After going through the previous tutorial on JavaScript Styles, I hope you have a better understanding of how JavaScript works with CSS and HTML. But there are some additional details related to CSS that&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":68490,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20899,20900,20898,20896,20897],"class_list":["post-68158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-cssom-insertrule","tag-global-styles","tag-inline-css","tag-javascript-css","tag-javascript-css-methods"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript CSS - Gain Expertise in the implementation of CSS Methods - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn the implementation of JavaScript CSS methods with their use and code examples. These methods are essential while working on a JavaScript project since they simplify your job, adding efficiency to your code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript CSS - Gain Expertise in the implementation of CSS Methods - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn the implementation of JavaScript CSS methods with their use and code examples. These methods are essential while working on a JavaScript project since they simplify your job, adding efficiency to your code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-17T12:43:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-23T08:50:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript CSS - Gain Expertise in the implementation of CSS Methods - DataFlair","description":"Learn the implementation of JavaScript CSS methods with their use and code examples. These methods are essential while working on a JavaScript project since they simplify your job, adding efficiency to your code.","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:\/\/data-flair.training\/blogs\/javascript-css\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript CSS - Gain Expertise in the implementation of CSS Methods - DataFlair","og_description":"Learn the implementation of JavaScript CSS methods with their use and code examples. These methods are essential while working on a JavaScript project since they simplify your job, adding efficiency to your code.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-css\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-17T12:43:52+00:00","article_modified_time":"2019-08-23T08:50:07+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript CSS &#8211; Gain Expertise in the implementation of CSS Methods","datePublished":"2019-08-17T12:43:52+00:00","dateModified":"2019-08-23T08:50:07+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/"},"wordCount":719,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg","keywords":["CSSOM insertRule","Global Styles","Inline CSS","JavaScript CSS","JavaScript CSS Methods"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/","url":"https:\/\/data-flair.training\/blogs\/javascript-css\/","name":"JavaScript CSS - Gain Expertise in the implementation of CSS Methods - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg","datePublished":"2019-08-17T12:43:52+00:00","dateModified":"2019-08-23T08:50:07+00:00","description":"Learn the implementation of JavaScript CSS methods with their use and code examples. These methods are essential while working on a JavaScript project since they simplify your job, adding efficiency to your code.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-CSS-Methods.jpg","width":802,"height":420,"caption":"JavaScript CSS Methods Tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript CSS &#8211; Gain Expertise in the implementation of CSS Methods"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=68158"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68158\/revisions"}],"predecessor-version":[{"id":68177,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68158\/revisions\/68177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/68490"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=68158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=68158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=68158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}