{"id":137209,"date":"2024-10-14T16:50:34","date_gmt":"2024-10-14T11:20:34","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137209"},"modified":"2024-10-17T11:27:20","modified_gmt":"2024-10-17T05:57:20","slug":"specificities-of-custom-properties-custom-properties-and-css-functions","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/","title":{"rendered":"Specificities of Custom Properties | Custom Properties and CSS Functions"},"content":{"rendered":"\n<p>CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.<\/p>\n\n\n\n<p><strong>Key Specificities<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scope:<\/strong> Custom properties are scoped to the element they are defined on or to the :root element.<\/li>\n\n\n\n<li><strong>Inheritance:<\/strong> Custom properties are inherited by child elements unless overridden.<\/li>\n\n\n\n<li><strong>Calculation:<\/strong> You can use the calc() function to perform calculations with custom properties.<\/li>\n\n\n\n<li><strong>Data attributes:<\/strong> You can store custom property values in data attributes and retrieve them using JavaScript.<\/li>\n\n\n\n<li><strong>CSS preprocessors:<\/strong> Preprocessors like Sass or Less provide additional features and syntax for managing custom properties.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=&#8221;element&#8221;&gt;&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>:root {<\/p>\n\n\n\n<p>&nbsp; &#8211;primary-color: blue;<\/p>\n\n\n\n<p>&nbsp; &#8211;secondary-color: red;<\/p>\n\n\n\n<p>&nbsp; &#8211;font-size: 16px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp; &#8211;padding: 20px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; color: var(&#8211;primary-color);<\/p>\n\n\n\n<p>&nbsp; background-color: var(&#8211;secondary-color);<\/p>\n\n\n\n<p>&nbsp; padding: var(&#8211;padding);<\/p>\n\n\n\n<p>&nbsp; font-size: calc(var(&#8211;font-size) * 1.5);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Using Custom Properties Responsively<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Media queries:<\/strong> Use media queries to change custom property values based on screen size.<\/li>\n\n\n\n<li><strong>JavaScript manipulation:<\/strong> Dynamically update custom property values using JavaScript.<\/li>\n\n\n\n<li><strong>CSS variables:<\/strong> Combine custom properties with other CSS variables for more complex styling.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@media only screen and (max-width: 600px) {<\/p>\n\n\n\n<p>&nbsp; :root {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &#8211;font-size: 14px;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Best Practices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use meaningful names:<\/strong> Choose descriptive names for your custom properties.<\/li>\n\n\n\n<li><strong>Avoid naming conflicts:<\/strong> Ensure your custom property names are unique.<\/li>\n\n\n\n<li><strong>Leverage CSS preprocessors:<\/strong> Use preprocessors like Sass or Less for advanced features and organization.<\/li>\n\n\n\n<li><strong>Test on various devices:<\/strong> Ensure your styles are consistent across different screen sizes and browsers.<\/li>\n<\/ul>\n\n\n\n<p>By understanding the specificities of custom properties, you can effectively use them to create flexible, maintainable, and responsive web designs.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/switching-custom-properties-with-javascript-custom-properties-and-css-functions\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/exploring-css-functions-in-detail-custom-properties-and-css-functions\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design. Key Specificities Example: HTML &lt;div class=&#8221;container&#8221;&gt; &nbsp; &lt;div class=&#8221;element&#8221;&gt;&lt;\/div&gt; &lt;\/div&gt; CSS :root { &nbsp; &#8211;primary-color: blue; &nbsp; &#8211;secondary-color: red; &nbsp; &#8211;font-size:&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137209","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial<\/title>\n<meta name=\"description\" content=\"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-17T05:57:20+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/\",\"name\":\"Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-14T11:20:34+00:00\",\"dateModified\":\"2024-10-17T05:57:20+00:00\",\"description\":\"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Specificities of Custom Properties | Custom Properties and CSS Functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial","description":"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!","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:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/","og_locale":"en_US","og_type":"article","og_title":"Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial","og_description":"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-17T05:57:20+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/","name":"Specificities of Custom Properties | Custom Properties and CSS Functions - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-14T11:20:34+00:00","dateModified":"2024-10-17T05:57:20+00:00","description":"Achieve your certification goals by preparing for the Certified Responsive Web Design exam. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/specificities-of-custom-properties-custom-properties-and-css-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Specificities of Custom Properties | Custom Properties and CSS Functions"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137209"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137209\/revisions"}],"predecessor-version":[{"id":137424,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137209\/revisions\/137424"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}