{"id":3178,"date":"2024-11-14T16:16:42","date_gmt":"2024-11-14T16:16:42","guid":{"rendered":"https:\/\/sankhamtech.com\/index.php\/content\/india\/english\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/"},"modified":"2024-11-15T18:16:29","modified_gmt":"2024-11-15T18:16:29","slug":"video-lesson-add-css-variations-to-aem-component","status":"publish","type":"page","link":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/","title":{"rendered":"[VIDEO LESSON] Add CSS Variations to AEM Component"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3178\" class=\"elementor elementor-3178\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1ffea1 e-flex e-con-boxed e-con e-parent\" data-id=\"a1ffea1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ef55be5 e-con-full e-flex e-con e-child\" data-id=\"ef55be5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91dfedb elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"91dfedb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h6 style=\"text-align: center;\"><span style=\"text-decoration: underline;\">Lessons<\/span><\/h6>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-995c89f elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-text-editor\" data-id=\"995c89f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h6 style=\"text-align: center;\"><a href=\"https:\/\/sankhamtech.com\/index.php\/content\/india\/english\/home\/free-courses\/aem-backend-concepts\/\"><span style=\"text-decoration: underline;\">Lessons<\/span><\/a><\/h6>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6acbf62 elementor-hidden-mobile elementor-widget elementor-widget-darsanam_header_menu_widget\" data-id=\"6acbf62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"darsanam_header_menu_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"darsanam-menu-wrapper \"><div class='hamburger-icon'> &nbsp; Menu<\/div><div class=\"menu-container\"><nav class='elementor-menu'><ul class='darsanam-menu-vertical'><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/github-link-for-the-entire-course\/'>Github Link for the Entire Course<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-how-the-internet-works\/'>[VIDEO LESSON] How the Internet Works<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-web-development-architecture-decoded\/'>[VIDEO LESSON] Web Development Architecture Decoded<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/introduction-to-content-management-systems\/'>Introduction to Content Management Systems<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/content-management-vs-experience-management\/'>Content Management vs Experience Management<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-what-is-adobe-experience-manager\/'>[VIDEO LESSON] What is Adobe Experience Manager?<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-how-to-obtain-adobe-experience-manager-aem-jar-from-adobe\/'>[VIDEO LESSON] How to Obtain Adobe Experience Manager (AEM) JAR from Adobe<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-installing-aem-jar\/'>[VIDEO LESSON] Installing AEM Jar<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/troubleshooting-common-issues-in-installing-aem-jar\/'>Troubleshooting Common Issues in Installing AEM JAR<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-author-and-publish-instances\/'>Understanding Author and Publish Instances<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/creating-and-editing-a-page-in-aem\/'>Creating and Editing a Page in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/find-where-page-is-saved-in-backend\/'>Find Where Page is Saved in Backend<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/aems-sling-framework-understanding-component-resolution-and-rendering\/'>AEM\u2019s Sling Framework: Understanding Component Resolution and Rendering<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-creating-a-hello-world-component-in-aem-using-crx-de\/'>[VIDEO LESSON] Creating a \u201cHello World\u201d Component in AEM Using CRX\/DE<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-jcr-in-the-context-of-aem\/'>Understanding JCR in the Context of AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/nodes-and-properties-in-jcr\/'>Nodes and Properties in JCR<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/jcr-sessions-and-workspaces\/'>JCR Sessions and Workspaces<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-sql2-queries-in-aem\/'>Understanding SQL2 Queries in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-and-using-aems-querybuilder-tool\/'>Understanding and Using AEM\u2019s QueryBuilder Tool<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/import-and-export-jcr-data-using-package-manager\/'>Import and Export JCR Data Using Package Manager<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/installing-aem-project-archetype\/'>Installing AEM Project Archetype<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/troubleshooting-common-post-deployment-issues-in-aem\/'>Troubleshooting Common Post-Deployment Issues in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-dialog-box-authoring-development\/'>[VIDEO LESSON] AEM Dialog Box Authoring & Development<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-htl-language-syntax-practice\/'>[VIDEO LESSON] AEM HTL Language Syntax Practice<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-htl-global-objects\/'>[VIDEO LESSON] AEM HTL Global Objects<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-htl-global-objects-contd\/'>[VIDEO LESSON] AEM HTL Global Objects (Contd.)<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-understanding-aem-dialog-box\/'>[VIDEO LESSON] Understanding AEM Dialog Box<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/creating-and-deploying-component-in-aem\/'>Creating and Deploying Component in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/create-various-dialog-box-fields\/'>Create Various Dialog Box Fields<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-sling-models-and-sightly-introduction\/'>[VIDEO LESSON] Sling Models and Sightly Introduction<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-sling-model-explained-with-real-use-case\/'>[VIDEO LESSON] Sling Model Explained with Real Use Case<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-resource-resolver-query-builder\/'>[VIDEO LESSON] AEM Resource Resolver & Query Builder<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-query-builder-java-beans\/'>[VIDEO LESSON] AEM Query Builder & Java Beans<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-to-aem-component\/'>[VIDEO LESSON] Add CSS to AEM Component<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-templates-components-authoring\/'>[VIDEO LESSON] AEM Templates & Components Authoring<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/' style='color: #FF7700 !important'>[VIDEO LESSON] Add CSS Variations to AEM Component<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/creating-a-multi-field-in-aem\/'>Creating a Multi-Field in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/creating-a-composite-multifield-in-aem\/'>Creating a Composite Multifield in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/implementing-conditional-dialog-fields\/'>Implementing Conditional Dialog Fields<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/best-practices-for-creating-sling-models\/'>Best Practices for Creating Sling Models<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-introduction-to-aem-sling-servlet\/'>[VIDEO LESSON] Introduction to AEM Sling Servlet<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-headless-servlet-implementation\/'>[VIDEO LESSON] AEM Headless \u2013 Servlet Implementation<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-osgi-services-introduction\/'>[VIDEO LESSON] OSGI Services Introduction<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-aem-osgi-services-implementation\/'>[VIDEO LESSON] AEM OSGI Services Implementation<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-filters-in-osgi-services\/'>[VIDEO LESSON] Filters in OSGI Services<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/calling-external-api-from-osgi-service\/'>Calling External API from OSGI Service<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/improving-aem-sling-model-with-service-layer-integration\/'>Improving AEM Sling Model with Service Layer Integration<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/best-practices-for-secure-and-efficient-resource-access\/'>Best Practices for Secure and Efficient Resource Access<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lessonstep-by-step-process-to-get-resource-resolver-from-system-user\/'>[VIDEO LESSON]Step By Step Process to Get Resource Resolver from System User<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/the-importance-and-use-cases-of-workflows\/'>The Importance and Use Cases of Workflows<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/introduction-to-workflow-creation\/'>Introduction to Workflow Creation<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-participant-step-in-aem\/'>Understanding Participant Step in AEM<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-workflow-steps\/'>Understanding Workflow Steps<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/understanding-workflow-steps-contd\/'>Understanding Workflow Steps [Contd.]<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/step-1-understand-aem-workflow-use-case\/'>Step 1: Understand AEM Workflow Use Case.<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/step-2-create-user-groups-and-assign-users\/'>Step 2: Create User Groups and Assign Users<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/step-3-create-new-page-properties\/'>Step 3: Create New Page Properties<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><li class='darsanam-menu-item'><a href='https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/workflow-example-code-below\/'>Workflow Example Code Below<\/a><i class=\"menu-icon-right fas fa-angle-right\"><\/i><\/li><\/ul><\/nav><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5dd11d4 e-con-full e-flex e-con e-child\" data-id=\"5dd11d4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8befcd7 elementor-widget elementor-widget-text-editor\" data-id=\"8befcd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Add CSS Variations to AEM Component<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-940340f elementor-widget elementor-widget-video\" data-id=\"940340f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/C00xlGzCIfE?list=PL5l69Ui6w3V_4naQpzfOC-enLOzcxHm-H&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b05a24 elementor-widget elementor-widget-text-editor\" data-id=\"3b05a24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><\/p><p>This transcript provides a comprehensive tutorial on how to create CSS variations for Adobe Experience Manager (AEM) custom components and how to enable authors to select these variations within the AEM environment. The presenter begins by recapping the previous tutorial on adding CSS to an AEM custom component and then moves on to explain the creation of CSS variations. The tutorial includes a step-by-step guide on:<\/p><p> <\/p><ol class=\"wp-block-list\"><li><strong>Understanding CSS Variations<\/strong>: The concept of CSS variations is introduced with examples showing different background colors for a card component to highlight the variations concept.<\/li> <li><strong>Implementing CSS Variations<\/strong>: Detailed instructions on how to define CSS variations using the BEM (Block Element Modifier) methodology and the Less CSS pre-processor for creating manageable and dynamic stylesheets.<\/li> <li><strong>Applying Styles to AEM Templates<\/strong>: The process for enabling AEM authors to select these variations through the use of the &#8220;style system&#8221; is explained. This involves modifying the AEM template&#8217;s policy configurations to include the newly created CSS variations, allowing authors to choose a style via a paintbrush icon in the AEM authoring UI.<\/li> <li><strong>Internal Working of AEM Style System<\/strong>: An in-depth look at how AEM applies the selected styles to components on a page by injecting the corresponding CSS class into the component&#8217;s HTML structure, thus altering its appearance according to the selected style variation.<\/li><\/ol><p> <\/p><p>Throughout the tutorial, the presenter emphasizes the practical application of these techniques in AEM development, providing a clear, detailed explanation suitable for beginners. This includes converting CSS files to Less for more sophisticated styling capabilities, modifying component policies to include style options, and the importance of naming conventions for readability and manageabilit<\/p><p><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lessons Lessons &nbsp; Menu Github Link for the Entire Course [VIDEO LESSON] How the Internet Works [VIDEO LESSON] Web Development Architecture Decoded Introduction to Content Management Systems Content Management vs Experience Management [VIDEO LESSON] What is Adobe Experience Manager? [VIDEO LESSON] How to Obtain Adobe Experience Manager (AEM) JAR from Adobe [VIDEO LESSON] Installing AEM [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2868,"menu_order":35,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3178","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies\" \/>\n<meta property=\"og:description\" content=\"Lessons Lessons &nbsp; Menu Github Link for the Entire Course [VIDEO LESSON] How the Internet Works [VIDEO LESSON] Web Development Architecture Decoded Introduction to Content Management Systems Content Management vs Experience Management [VIDEO LESSON] What is Adobe Experience Manager? [VIDEO LESSON] How to Obtain Adobe Experience Manager (AEM) JAR from Adobe [VIDEO LESSON] Installing AEM [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Sankham Technologies\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-15T18:16:29+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/video-lesson-add-css-variations-to-aem-component\\\/\",\"url\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/video-lesson-add-css-variations-to-aem-component\\\/\",\"name\":\"[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#website\"},\"datePublished\":\"2024-11-14T16:16:42+00:00\",\"dateModified\":\"2024-11-15T18:16:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/video-lesson-add-css-variations-to-aem-component\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/video-lesson-add-css-variations-to-aem-component\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/video-lesson-add-css-variations-to-aem-component\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Content\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"India\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"English\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Free Courses\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/index.php\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/\"},{\"@type\":\"ListItem\",\"position\":7,\"name\":\"AEM Backend Concepts\",\"item\":\"https:\\\/\\\/sankhamtech.com\\\/indexphp\\\/content\\\/in\\\/en\\\/home\\\/free-courses\\\/aem-backend-concepts\\\/\"},{\"@type\":\"ListItem\",\"position\":8,\"name\":\"[VIDEO LESSON] Add CSS Variations to AEM Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#website\",\"url\":\"https:\\\/\\\/sankhamtech.com\\\/\",\"name\":\"Sankham Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sankhamtech.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#organization\",\"name\":\"Sankham Technologies\",\"url\":\"https:\\\/\\\/sankhamtech.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/sankhamtech.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/Logo-Dark-1.png\",\"contentUrl\":\"https:\\\/\\\/sankhamtech.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/Logo-Dark-1.png\",\"width\":306,\"height\":74,\"caption\":\"Sankham Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/sankhamtech.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies","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:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/","og_locale":"en_US","og_type":"article","og_title":"[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies","og_description":"Lessons Lessons &nbsp; Menu Github Link for the Entire Course [VIDEO LESSON] How the Internet Works [VIDEO LESSON] Web Development Architecture Decoded Introduction to Content Management Systems Content Management vs Experience Management [VIDEO LESSON] What is Adobe Experience Manager? [VIDEO LESSON] How to Obtain Adobe Experience Manager (AEM) JAR from Adobe [VIDEO LESSON] Installing AEM [&hellip;]","og_url":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/","og_site_name":"Sankham Technologies","article_modified_time":"2024-11-15T18:16:29+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/","url":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/","name":"[VIDEO LESSON] Add CSS Variations to AEM Component - Sankham Technologies","isPartOf":{"@id":"https:\/\/sankhamtech.com\/#website"},"datePublished":"2024-11-14T16:16:42+00:00","dateModified":"2024-11-15T18:16:29+00:00","breadcrumb":{"@id":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/video-lesson-add-css-variations-to-aem-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sankhamtech.com\/"},{"@type":"ListItem","position":2,"name":"Content","item":"https:\/\/sankhamtech.com\/index.php\/content\/"},{"@type":"ListItem","position":3,"name":"India","item":"https:\/\/sankhamtech.com\/index.php\/content\/in\/"},{"@type":"ListItem","position":4,"name":"English","item":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/"},{"@type":"ListItem","position":5,"name":"Home","item":"https:\/\/sankhamtech.com\/"},{"@type":"ListItem","position":6,"name":"Free Courses","item":"https:\/\/sankhamtech.com\/index.php\/content\/in\/en\/home\/free-courses\/"},{"@type":"ListItem","position":7,"name":"AEM Backend Concepts","item":"https:\/\/sankhamtech.com\/indexphp\/content\/in\/en\/home\/free-courses\/aem-backend-concepts\/"},{"@type":"ListItem","position":8,"name":"[VIDEO LESSON] Add CSS Variations to AEM Component"}]},{"@type":"WebSite","@id":"https:\/\/sankhamtech.com\/#website","url":"https:\/\/sankhamtech.com\/","name":"Sankham Technologies","description":"","publisher":{"@id":"https:\/\/sankhamtech.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sankhamtech.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sankhamtech.com\/#organization","name":"Sankham Technologies","url":"https:\/\/sankhamtech.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sankhamtech.com\/#\/schema\/logo\/image\/","url":"https:\/\/sankhamtech.com\/wp-content\/uploads\/2023\/12\/Logo-Dark-1.png","contentUrl":"https:\/\/sankhamtech.com\/wp-content\/uploads\/2023\/12\/Logo-Dark-1.png","width":306,"height":74,"caption":"Sankham Technologies"},"image":{"@id":"https:\/\/sankhamtech.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/pages\/3178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/comments?post=3178"}],"version-history":[{"count":10,"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/pages\/3178\/revisions"}],"predecessor-version":[{"id":3643,"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/pages\/3178\/revisions\/3643"}],"up":[{"embeddable":true,"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/pages\/2868"}],"wp:attachment":[{"href":"https:\/\/sankhamtech.com\/index.php\/wp-json\/wp\/v2\/media?parent=3178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}