1"use strict";(self.webpackChunkclient=self.webpackChunkclient||[]).push([[169],{6169:(T,E,r)=>{r.r(E),r.d(E,{CssFeatureModule:()=>x});var a=r(2066),F=r(1628),e=r(6305),d=r(8471);let u=(()=>{class n{static{this.\u0275fac=function(i){return new(i||n)}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css"]],decls:4,vars:0,consts:[[1,"page-main-canvas"],[1,"page-noise-layer"],[1,"page-noise-redundant-layer"]],template:function(i,t){1&i&&(e.j41(0,"div",0)(1,"div",1)(2,"div",2),e.nrm(3,"router-outlet"),e.k0s()()())},dependencies:[F.iI,d.n3],encapsulation:2})}}return n})();var c=r(3410);function j(n,l){if(1&n){const s=e.RV6();e.j41(0,"li",10),e.bIt("click",function(){const t=e.eBV(s).$implicit,o=e.XpG();return e.Njj(o.onNavClick(t))}),e.EFF(1),e.k0s()}if(2&n){const s=l.$implicit,i=e.XpG();e.AVh("active",i.activeSection===s),e.R7$(),e.SpI(" ",s," ")}}let v=(()=>{class n{constructor(s){this.scrollService=s,this.sections=["CSS3 vs. SCSS: Navigating..","Introduction:","1. CSS3: A Glimpse of..","2. SCSS: Elevating the..","3. Advantages of SCSS..","\u200e \u200e \u27a5 Variables:","\u200e \u200e \u27a5 Nesting:","\u200e \u200e \u27a5 Mixins:","\u200e \u200e \u27a5 Partials and Import:","\u200e \u200e \u27a5 Math Operations:","4. Disadvantages of SCSS:","\u200e \u200e \u27a5 Learning Curve:","\u200e \u200e \u27a5 Compilation Step:","5. SCSS in Action: Real..","\u200e \u200e \u27a5 Google Maps:","\u200e \u200e \u27a5 SpaceX Starlink:","Conclusion:"]}ngOnInit(){this.scrollService.section$.subscribe(s=>{this.activeSection=s})}onNavClick(s){this.scrollService.scrollToSection(s)}static{this.\u0275fac=function(i){return new(i||n)(e.rXU(c.b))}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-vs-scss"]],decls:14,vars:1,consts:[[1,"row"],[1,"col-12","col-md-3",2,"padding","0"],[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"note-title-wrapper"],[1,"note-main-title"],[1,"note-title-content","sticky-top"],[3,"active","click",4,"ngFor","ngForOf"],[1,"col-12","col-md-9",2,"padding","0"],[3,"click"]],template:function(i,t){1&i&&(e.j41(0,"div",0)(1,"div",1)(2,"div",2),e.nrm(3,"i",3),e.j41(4,"span",4),e.EFF(5,"Back"),e.k0s()(),e.j41(6,"div",5)(7,"div",6),e.EFF(8," TABLE OF CONTENTS "),e.k0s(),e.j41(9,"div",7)(10,"ul"),e.DNE(11,j,2,3,"li",8),e.k0s()()()(),e.j41(12,"div",9),e.nrm(13,"router-outlet"),e.k0s()()),2&i&&(e.R7$(11),e.Y8G("ngForOf",t.sections))},dependencies:[a.MD,a.Sq,F.iI,d.n3,F.Wk],encapsulation:2})}}return n})();var p=r(3776);let S=(()=>{class n{constructor(s,i,t){this.scrollService=s,this.renderer=i,this.el=t,this.sections=["CSS3 vs. SCSS: Navigating..","Introduction:","1. CSS3: A Glimpse of..","2. SCSS: Elevating the..","3. Advantages of SCSS..","\u200e \u200e \u27a5 Variables:","\u200e \u200e \u27a5 Nesting:","\u200e \u200e \u27a5 Mixins:","\u200e \u200e \u27a5 Partials and Import:","\u200e \u200e \u27a5 Math Operations:","4. Disadvantages of SCSS:","\u200e \u200e \u27a5 Learning Curve:","\u200e \u200e \u27a5 Compilation Step:","5. SCSS in Action: Real..","\u200e \u200e \u27a5 Google Maps:","\u200e \u200e \u27a5 SpaceX Starlink:","Conclusion:"]}ngOnInit(){this.scrollService.section$.subscribe(s=>{})}onScroll(s){}static{this.\u0275fac=function(i){return new(i||n)(e.rXU(c.b),e.rXU(e.sFG),e.rXU(e.aKT))}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-vs-scss-cont"]],hostBindings:function(i,t){1&i&&e.bIt("scroll",function(w){return t.onScroll(w)},!1,e.tSv)},decls:267,vars:0,consts:[[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"container"],[1,"note-content"],[1,"banner"],["src","assets/images/css/css%20vs%20scss.png","alt","css vs scss"],["id","CSS3 vs. SCSS: Navigating..",1,"section"],[1,"note-tags"],["id","Introduction:",1,"section"],[1,"realistic-marker-highlight"],["id","1. CSS3: A Glimpse of..",1,"section"],[1,"code-snippet"],[1,"code-snippet-header"],[1,"console"],[1,"circle"],[1,"language"],[1,"code-snippet-wrapper"],[1,"comment"],[1,"display"],[1,"initializer"],[1,"keyword"],["id","2. SCSS: Elevating the..",1,"section"],["id","3. Advantages of SCSS..",1,"section"],["id","\u200e \u200e \u27a5 Variables:",1,"section"],["id","\u200e \u200e \u27a5 Nesting:",1,"section"],["id","\u200e \u200e \u27a5 Mixins:",1,"section"],["id","\u200e \u200e \u27a5 Partials and Import:",1,"section"],["id","\u200e \u200e \u27a5 Math Operations:",1,"section"],["id","4. Disadvantages of SCSS:",1,"section"],["id","\u200e \u200e \u27a5 Learning Curve:",1,"section"],["id","\u200e \u200e \u27a5 Compilation Step:",1,"section"],["id","5. SCSS in Action: Real..",1,"section"],["id","\u200e \u200e \u27a5 Google Maps:",1,"section"],["id","\u200e \u200e \u27a5 SpaceX Starlink:",1,"section"],["id","Conclusion:",1,"section"]],template:function(i,t){1&i&&(e.j41(0,"div",0),e.nrm(1,"i",1),e.j41(2,"p")(3,"span",2),e.EFF(4,"Notes"),e.k0s(),e.EFF(5," / CSS / CCS3 vs SCSS"),e.k0s()(),e.j41(6,"div",3)(7,"div",4)(8,"div",5),e.nrm(9,"img",6),e.k0s(),e.j41(10,"div",7)(11,"h1"),e.EFF(12,"CSS3 vs. SCSS: Navigating the Seas of Stylesheets"),e.k0s(),e.j41(13,"p",8)(14,"span")(15,"strong"),e.EFF(16,"Tended:"),e.k0s(),e.EFF(17," Dec 2023"),e.k0s(),e.j41(18,"span")(19,"strong"),e.EFF(20,"Status:"),e.k0s(),e.EFF(21," Seed"),e.k0s()()(),e.j41(22,"div",9)(23,"h2"),e.EFF(24,"Introduction:"),e.k0s(),e.j41(25,"p"),e.EFF(26,"Cascading Style Sheets (CSS) have been the backbone of web styling for years, but as web development projects grow in scale and complexity, the limitations of vanilla CSS become apparent. "),e.j41(27,"span",10),e.EFF(28,"SCSS, or Sassy CSS,"),e.k0s(),e.EFF(29," steps in to address these challenges by providing a more feature-rich and maintainable syntax. In this comprehensive exploration, we will unravel the differences between CSS3 and SCSS, delve into their strengths and weaknesses, and understand why SCSS is often the preferred choice in modern web development."),e.k0s()(),e.j41(30,"div",11)(31,"h2"),e.EFF(32,"CSS3: A Glimpse of Standard Styling"),e.k0s(),e.j41(33,"p"),e.EFF(34,"CSS3, the latest iteration of CSS, brings a host of new features and improvements. It empowers developers to create visually appealing and responsive designs. However, as projects expand, managing styles in CSS3 becomes challenging due to the absence of advanced features like variables and nesting."),e.k0s(),e.j41(35,"div",12)(36,"div",13)(37,"div",14),e.nrm(38,"div",15)(39,"div",15)(40,"div",15),e.k0s(),e.j41(41,"div",16),e.EFF(42," CSS "),e.k0s()(),e.j41(43,"div",17)(44,"span",18),e.EFF(45,"/* Basic CSS3 Styles */"),e.k0s(),e.nrm(46,"br"),e.j41(47,"span"),e.EFF(48,"body {"),e.k0s(),e.nrm(49,"br"),e.EFF(50," \xa0\xa0\xa0"),e.j41(51,"span",19),e.EFF(52,"font-family"),e.k0s(),e.EFF(53,": "),e.j41(54,"span",19),e.EFF(55,'"Helvetica Neue"'),e.k0s(),e.j41(56,"span"),e.EFF(57,", Helvetica, Arial, sans-serif;"),e.k0s(),e.nrm(58,"br"),e.EFF(59," \xa0\xa0\xa0"),e.j41(60,"span",19),e.EFF(61,"background-color"),e.k0s(),e.EFF(62,": "),e.j41(63,"span",20),e.EFF(64,"#f0f0f0"),e.k0s(),e.EFF(65,";"),e.nrm(66,"br"),e.j41(67,"span"),e.EFF(68,"}"),e.k0s(),e.nrm(69,"br")(70,"br"),e.j41(71,"span",18),e.EFF(72,"/* Media Query in CSS3 */"),e.k0s(),e.nrm(73,"br"),e.j41(74,"span",21),e.EFF(75,"@media "),e.k0s(),e.EFF(76,"screen "),e.j41(77,"span",21),e.EFF(78,"and "),e.k0s(),e.EFF(79,"("),e.j41(80,"span",19),e.EFF(81,"min-width"),e.k0s(),e.EFF(82,": "),e.j41(83,"span",20),e.EFF(84,"768px"),e.k0s(),e.EFF(85,")"),e.j41(86,"span"),e.EFF(87,"{"),e.k0s(),e.nrm(88,"br"),e.EFF(89," \xa0\xa0\xa0"),e.j41(90,"span"),e.EFF(91,"body {"),e.k0s(),e.nrm(92,"br"),e.EFF(93," \xa0\xa0\xa0\xa0\xa0\xa0"),e.j41(94,"span",19),e.EFF(95,"font-size"),e.k0s(),e.EFF(96,": "),e.j41(97,"span",20),e.EFF(98,"16px"),e.k0s(),e.EFF(99,";"),e.nrm(100,"br"),e.EFF(101," \xa0\xa0\xa0"),e.j41(102,"span"),e.EFF(103,"}"),e.k0s(),e.nrm(104,"br"),e.j41(105,"span"),e.EFF(106,"}"),e.k0s(),e.nrm(107,"br"),e.k0s()()(),e.j41(108,"div",22)(109,"h2"),e.EFF(110,"SCSS: Elevating the Stylesheet Game"),e.k0s(),e.j41(111,"p"),e.EFF(112,"SCSS, a preprocessor scripting language, extends CSS3 by introducing features like variables, nesting, and mixins. These additions bring a level of organization and reusability that greatly enhances the maintainability of styles in larger projects."),e.k0s(),e.j41(113,"div",12)(114,"div",13)(115,"div",14),e.nrm(116,"div",15)(117,"div",15)(118,"div",15),e.k0s(),e.j41(119,"div",16),e.EFF(120," SCSS "),e.k0s()(),e.j41(121,"div",17)(122,"span",18),e.EFF(123,"/* Basic SCSS Styles */"),e.k0s(),e.nrm(124,"br"),e.j41(125,"span",20),e.EFF(126,"$body-font"),e.k0s(),e.EFF(127,": "),e.j41(128,"span",19),e.EFF(129,'"Helvetica Neue"'),e.k0s(),e.EFF(130,", sans-serif;"),e.nrm(131,"br"),e.j41(132,"span",20),e.EFF(133,"$body-bg"),e.k0s(),e.EFF(134,": "),e.j41(135,"span",20),e.EFF(136,"#f0f0f0"),e.k0s(),e.EFF(137,";"),e.nrm(138,"br")(139,"br"),e.j41(140,"span"),e.EFF(141,"body {"),e.k0s(),e.nrm(142,"br"),e.EFF(143," \xa0\xa0\xa0"),e.j41(144,"span",19),e.EFF(145,"font-family"),e.k0s(),e.EFF(146,": "),e.j41(147,"span",20),e.EFF(148,"$body-font"),e.k0s(),e.EFF(149,";"),e.nrm(150,"br"),e.EFF(151," \xa0\xa0\xa0"),e.j41(152,"span",19),e.EFF(153,"background-color"),e.k0s(),e.EFF(154,": "),e.j41(155,"span",20),e.EFF(156,"$body-bg"),e.k0s(),e.EFF(157,";"),e.nrm(158,"br")(159,"br"),e.EFF(160," \xa0\xa0\xa0"),e.j41(161,"span",18),e.EFF(162,"/* Nesting in SCSS */"),e.k0s(),e.nrm(163,"br"),e.EFF(164," \xa0\xa0\xa0"),e.j41(165,"span",21),e.EFF(166,"@media "),e.k0s(),e.EFF(167,"screen "),e.j41(168,"span",21),e.EFF(169,"and "),e.k0s(),e.EFF(170,"("),e.j41(171,"span",19),e.EFF(172,"min-width"),e.k0s(),e.EFF(173,": "),e.j41(174,"span",20),e.EFF(175,"768px"),e.k0s(),e.EFF(176,"){"),e.nrm(177,"br"),e.EFF(178," \xa0\xa0\xa0\xa0\xa0\xa0"),e.j41(179,"span",19),e.EFF(180,"font-size"),e.k0s(),e.EFF(181,": "),e.j41(182,"span",20),e.EFF(183,"16px"),e.k0s(),e.EFF(184,";"),e.nrm(185,"br"),e.EFF(186," \xa0\xa0\xa0"),e.j41(187,"span"),e.EFF(188,"}"),e.k0s(),e.nrm(189,"br"),e.j41(190,"span"),e.EFF(191,"}"),e.k0s(),e.nrm(192,"br"),e.k0s()()(),e.j41(193,"div",23)(194,"h2"),e.EFF(195,"Advantages of SCSS over CSS3:"),e.k0s()(),e.j41(196,"div",24)(197,"h3"),e.EFF(198,"1. Variables:"),e.k0s(),e.j41(199,"p"),e.EFF(200,"SCSS introduces variables, allowing developers to define and reuse values throughout the stylesheet. This promotes consistency and simplifies maintenance."),e.k0s()(),e.j41(201,"div",25)(202,"h3"),e.EFF(203,"2. Nesting:"),e.k0s(),e.j41(204,"p"),e.EFF(205,"With SCSS, selectors can be nested, mirroring the HTML structure. This leads to cleaner and more readable code, reducing redundancy."),e.k0s()(),e.j41(206,"div",26)(207,"h3"),e.EFF(208,"3. Mixins:"),e.k0s(),e.j41(209,"p"),e.EFF(210,"SCSS supp
1orts mixins, enabling the reuse of groups of CSS declarations. This promotes modularity and avoids code duplication."),e.k0s()(),e.j41(211,"div",27)(212,"h3"),e.EFF(213,"4. Partials and Import:"),e.k0s(),e.j41(214,"p"),e.EFF(215,"SCSS facilitates the organization of styles into separate files, known as partials. These files can be imported where needed, promoting a modular and scalable approach to styling."),e.k0s()(),e.j41(216,"div",28)(217,"h3"),e.EFF(218,"5. Math Operations:"),e.k0s(),e.j41(219,"p"),e.EFF(220,"SCSS allows for basic math operations within styles, making it easier to handle numeric values dynamically."),e.k0s()(),e.j41(221,"div",29)(222,"h2"),e.EFF(223,"Disadvantages of SCSS:"),e.k0s()(),e.j41(224,"div",30)(225,"h3"),e.EFF(226,"1. Learning Curve:"),e.k0s(),e.j41(227,"p"),e.EFF(228,"Developers accustomed to standard CSS might face a learning curve when transitioning to SCSS and its advanced features."),e.k0s()(),e.j41(229,"div",31)(230,"h3"),e.EFF(231,"2. Compilation Step:"),e.k0s(),e.j41(232,"p"),e.EFF(233,"SCSS needs to be compiled into standard CSS before rendering in browsers. While build tools automate this process, it introduces an additional step in the development workflow."),e.k0s()(),e.j41(234,"div",32)(235,"h2"),e.EFF(236,"SCSS in Action: Real-World Impact"),e.k0s()(),e.j41(237,"div",33)(238,"h3"),e.EFF(239,"Google Maps:"),e.k0s(),e.j41(240,"ul")(241,"li")(242,"strong"),e.EFF(243,"Real-time Traffic Optimization:"),e.k0s(),e.EFF(244," Google Maps utilizes SCSS to manage and optimize real-time traffic data, providing users with efficient and accurate route suggestions. "),e.k0s(),e.j41(245,"li")(246,"strong"),e.EFF(247,"Location-based Recommendations:"),e.k0s(),e.EFF(248," The use of SCSS enables the styling of location-based recommendations, enhancing the user experience. "),e.k0s()()(),e.j41(249,"div",34)(250,"h3"),e.EFF(251,"SpaceX Starlink:"),e.k0s(),e.j41(252,"ul")(253,"li")(254,"strong"),e.EFF(255,"Precise Satellite Positioning:"),e.k0s(),e.EFF(256," SCSS aids SpaceX in styling and positioning satellites with precision, ensuring seamless global internet coverage. "),e.k0s(),e.j41(257,"li")(258,"strong"),e.EFF(259,"Global Internet Connectivity:"),e.k0s(),e.EFF(260," The modularity and organization offered by SCSS contribute to the styling of SpaceX's Starlink, a service that connects remote areas globally. "),e.k0s()()(),e.j41(261,"div",35)(262,"h2"),e.EFF(263,"Conclusion: SCSS, the Navigator in Modern Styling"),e.k0s(),e.j41(264,"p"),e.EFF(265,"While CSS3 remains the foundation of web styling, SCSS emerges as a powerful ally in the quest for clean, scalable, and maintainable stylesheets. The advantages of SCSS, including variables, nesting, mixins, and modularity, make it an essential tool for modern web development. As projects evolve in complexity, embracing SCSS becomes not just a choice but a practical necessity. The transition from CSS3 to SCSS is an investment that pays off in terms of improved code quality, developer efficiency, and the ability to navigate the ever-expanding seas of modern web development."),e.k0s()()(),e.nrm(266,"app-support"),e.k0s())},dependencies:[p.t,F.Wk],encapsulation:2})}}return n})();function b(n,l){if(1&n){const s=e.RV6();e.j41(0,"li",10),e.bIt("click",function(){const t=e.eBV(s).$implicit,o=e.XpG();return e.Njj(o.onNavClick(t))}),e.EFF(1),e.k0s()}if(2&n){const s=l.$implicit,i=e.XpG();e.AVh("active",i.activeSection===s),e.R7$(),e.SpI(" ",s," ")}}let m=(()=>{class n{constructor(s){this.scrollService=s,this.sections=["CSS Variables: Empowering..","Introduction:","1. Defining CSS Variables","2. Using CSS Variables..","3. Advantages of CSS..","\u200e \u200e \u27a5 Dynamic Theming","\u200e \u200e \u27a5 Easy Maintenance","\u200e \u200e \u27a5 Conditional Styling","\u200e \u200e \u27a5 Simplified Theming..","Conclusion:"]}ngOnInit(){this.scrollService.section$.subscribe(s=>{this.activeSection=s})}onNavClick(s){this.scrollService.scrollToSection(s)}static{this.\u0275fac=function(i){return new(i||n)(e.rXU(c.b))}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-var"]],decls:14,vars:1,consts:[[1,"row"],[1,"col-12","col-md-3",2,"padding","0"],[1,"n
1ote-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"note-title-wrapper"],[1,"note-main-title"],[1,"note-title-content","sticky-top"],[3,"active","click",4,"ngFor","ngForOf"],[1,"col-12","col-md-9",2,"padding","0"],[3,"click"]],template:function(i,t){1&i&&(e.j41(0,"div",0)(1,"div",1)(2,"div",2),e.nrm(3,"i",3),e.j41(4,"span",4),e.EFF(5,"Back"),e.k0s()(),e.j41(6,"div",5)(7,"div",6),e.EFF(8," TABLE OF CONTENTS "),e.k0s(),e.j41(9,"div",7)(10,"ul"),e.DNE(11,b,2,3,"li",8),e.k0s()()()(),e.j41(12,"div",9),e.nrm(13,"router-outlet"),e.k0s()()),2&i&&(e.R7$(11),e.Y8G("ngForOf",t.sections))},dependencies:[a.MD,a.Sq,F.iI,d.n3,F.Wk],encapsulation:2})}}return n})(),g=(()=>{class n{static{this.\u0275fac=function(i){return new(i||n)}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-var-cont"]],decls:396,vars:0,consts:[[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"container"],[1,"note-content"],[1,"banner"],["src","assets/images/css/var.png","alt","css --var"],["id","CSS Variables: Empowering..",1,"section"],[1,"note-tags"],["id","Introduction:",1,"section"],[1,"realistic-marker-highlight"],["id","1. Defining CSS Variables",1,"section"],[1,"code-snippet"],[1,"code-snippet-header"],[1,"console"],[1,"circle"],[1,"language"],[1,"code-snippet-wrapper"],[1,"initializer"],[1,"circle-sketch-highlight"],["id","2. Using CSS Variables..",1,"section"],[1,"display"],[1,"import"],["id","3. Advantages of CSS..",1,"section"],["id","\u200e \u200e \u27a5 Dynamic Theming",1,"section"],["id","\u200e \u200e \u27a5 Easy Maintenance",1,"section"],["id","\u200e \u200e \u27a5 Conditional Styling",1,"section"],["id","\u200e \u200e \u27a5 Simplified Theming..",1,"section"],["id","Conclusion:",1,"section"]],template:function(i,t){1&i&&(e.j41(0,"div",0),e.nrm(1,"i",1),e.j41(2,"p")(3,"span",2),e.EFF(4,"Notes"),e.k0s(),e.EFF(5," / CSS / CSS --var"),e.k0s()(),e.j41(6,"div",3)(7,"div",4)(8,"div",5),e.nrm(9,"img",6),e.k0s(),e.j41(10,"div",7)(11,"h1"),e.EFF(12,"CSS Variables: Empowering Styles with --var"),e.k0s(),e.j41(13,"p",8)(14,"span")(15,"strong"),e.EFF(16,"Tended:"),e.k0s(),e.EFF(17," Dec 2023"),e.k0s(),e.j41(18,"span")(19,"strong"),e.EFF(20,"Status:"),e.k0s(),e.EFF(21," Seed"),e.k0s()()(),e.j41(22,"div",9)(23,"h2"),e.EFF(24,"Introduction:"),e.k0s(),e.j41(25,"p"),e.EFF(26,"CSS variables, officially known as Custom Properties and commonly referred to as "),e.j41(27,"span",10),e.EFF(28,"--var"),e.k0s(),e.EFF(29,", have revolutionized the way styles are managed and applied in web development. Introduced in CSS3, these variables bring a new level of flexibility and maintainability to stylesheets. In this article, we'll delve deep into the world of CSS variables, exploring their syntax, applications, and the advantages they offer."),e.k0s()(),e.j41(30,"div",11)(31,"h2"),e.EFF(32,"Defining CSS Variables"),e.k0s(),e.j41(33,"p"),e.EFF(34,"A CSS variable is defined using the "),e.j41(35,"strong"),e.EFF(36,"`--`"),e.k0s(),e.EFF(37," prefix followed by a user-defined name. For instance: "),e.k0s(),e.j41(38,"div",12)(39,"div",13)(40,"div",14),e.nrm(41,"div",15)(42,"div",15)(43,"div",15),e.k0s(),e.j41(44,"div",16),e.EFF(45," CSS "),e.k0s()(),e.j41(46,"div",17)(47,"span",18),e.EFF(48,":root "),e.k0s(),e.EFF(49,"{"),e.nrm(50,"br"),e.EFF(51," \xa0\xa0\xa0"),e.j41(52,"span",18),e.EFF(53,"--primary-color"),e.k0s(),e.EFF(54,": "),e.j41(55,"span",18),e.EFF(56,"#3498db"),e.k0s(),e.EFF(57,";"),e.nrm(58,"br"),e.EFF(59," \xa0\xa0\xa0"),e.j41(60,"span",18),e.EFF(61,"--font-size"),e.k0s(),e.EFF(62,": "),e.j41(63,"span",18),e.EFF(64,"16px"),e.k0s(),e.EFF(65,";"),e.nrm(66,"br"),e.EFF(67," }"),e.nrm(68,"br"),e.k0s()(),e.j41(69,"p"),e.EFF(70,"Here, "),e.j41(71,"span",19),e.EFF(72,"--primary-color"),e.k0s(),e.EFF(73," and "),e.j41(74,"span",19),e.EFF(75,"--font-size"),e.k0s(),e.EFF(76," are user-defined variables."),e.k0s()(),e.j41(77,"div",20)(78,"h2"),e.EFF(79,"Using CSS Variables in Styles"),e.k0s(),e.j41(80,"p"),e.EFF(81,"Once defined, CSS variables can be utilized throughout the stylesheet, enabling dynamic and centralized control over style properties. To use a variable, use the "),e.j41(82,"span",10),e.EFF(83,"var()"),e.k0s(),e.EFF(84," function:"),e.k0s(),e.j41(85,"div",12)(86,"div",13)(87,"div",14),e.nrm(88,"div",15)(89,"div",15)(90,"div",15),e.k0s(),e.j41(91,"div",16),e.EFF(92," CSS "),e.k0s()(),e.j41(93,"div",17),e.EFF(94," body {"),e.nrm(95,"br"),e.EFF(96," \xa0\xa0\xa0"),e.j41(97,"span",21),e.EFF(98,"color"),e.k0s(),e.EFF(99,": "),e.j41(100,"span",22),e.EFF(101,"var"),e.k0s(),e.EFF(102,"(--primary-color);"),e.nrm(103,"br"),e.EFF(104," \xa0\xa0\xa0"),e.j41(105,"span",21),e.EFF(106,"font-size"),e.k0s(),e.EFF(107,": "),e.j41(108,"span",22),e.EFF(109,"var"),e.k0s(),e.EFF(110,"(--font-size);"),e.nrm(111,"br"),e.EFF(112," }"),e.nrm(113,"br"),e.k0s()()(),e.j41(114,"div",23)(115,"h2"),e.EFF(116,"Advantages of CSS Variables"),e.k0s()(),e.j41(117,"div",24)(118,"h3"),e.EFF(119,"1. Dynamic Theming"),e.k0s(),e.j41(120,"p"),e.EFF(121,"CSS variables shine in dynamic theming scenarios. By changing variable values dynamically, you can instantly alter the entire color scheme or other stylistic elements across your application."),e.k0s(),e.j41(122,"div",12)(123,"div",13)(124,"div",14),e.nrm(125,"div",15)(126,"div",15)(127,"div",15),e.k0s(),e.j41(128,"div",16),e.EFF(129," CSS "),e.k0s()(),e.j41(130,"div",17)(131,"span",18),e.EFF(132,":root "),e.k0s(),e.EFF(133,"{"),e.nrm(134,"br"),e.EFF(135," \xa0\xa0\xa0"),e.j41(136,"span",18),e.EFF(137,"--primary-color"),e.k0s(),e.EFF(138,": "),e.j41(139,"span",18),e.EFF(140,"#3498db"),e.k0s(),e.EFF(141,";"),e.nrm(142,"br"),e.EFF(143," }"),e.nrm(144,"br")(145,"br"),e.EFF(146," body {"),e.nrm(147,"br"),e.EFF(148," \xa0\xa0\xa0"),e.j41(149,"span",21),e.EFF(150,"color"),e.k0s(),e.EFF(151,": "),e.j41(152,"span",22),e.EFF(153,"var"),e.k0s(),e.EFF(154,"(--primary-color);"),e.nrm(155,"br"),e.EFF(156," }"),e.nrm(157,"br")(158,"br"),e.j41(159,"span",18),e.EFF(160,".dark-theme "),e.k0s(),e.EFF(161,"{"),e.nrm(162,"br"),e.EFF(163," \xa0\xa0\xa0"),e.j41(164,"span",18),e.EFF(165,"--primary-color"),e.k0s(),e.EFF(166,": "),e.j41(167,"span",18),e.EFF(168,"#2ecc71"),e.k0s(),e.EFF(169,";"),e.nrm(170,"br"),e.EFF(171," }"),e.nrm(172,"br"),e.k0s()(),e.j41(173,"p"),e.EFF(174,"By applying the "),e.j41(175,"span",19),e.EFF(176,".dark-theme"),e.k0s(),e.EFF(177," class to an element, the primary color shifts across the entire application."),e.k0s()(),e.j41(178,"div",25)(179,"h3"),e.EFF(180,"2. Easy Maintenance"),e.k0s(),e.j41(181,"p"),e.EFF(182,"CSS variables promote easy maintenance by centralizing key values. If you need to modify a common property like font size, you can do so at the root level, instantly updating it everywhere it's used."),e.k0s(),e.j41(183,"div",12)(184,"div",13)(185,"div",14),e.nrm(186,"div",15)(187,"div",15)(188,"div",15),e.k0s(),e.j41(189,"div",16),e.EFF(190," CSS "),e.k0s()(),e.j41(191,"div",17)(192,"span",18),e.EFF(193,":root "),e.k0s(),e.EFF(194,"{"),e.nrm(195,"br"),e.EFF(196," \xa0\xa0\xa0"),e.j41(197,"span",18),e.EFF(198,"--font-size"),e.k0s(),e.EFF(199,": "),e.j41(200,"span",18),e.EFF(201,"16px"),e.k0s(),e.EFF(202,";"),e.nrm(203,"br"),e.EFF(204," }"),e.nrm(205,"br")(206,"br"),e.EFF(207," body {"),e.nrm(208,"br"),e.EFF(209," \xa0\xa0\xa0"),e.j41(210,"span",21),e.EFF(211,"font-size"),e.k0s(),e.EFF(212,": "),e.j41(213,"span",22),e.EFF(214,"var"),e.k0s(),e.EFF(215,"(--font-size);"),e.nrm(216,"br"),e.EFF(217," }"),e.nrm(218,"br")(219,"br"),e.j41(220,"span",18),e.EFF(221,".header "),e.k0s(),e.EFF(222,"{"),e.nrm(223,"br"),e.EFF(224," \xa0\xa0\xa0"),e.j41(225,"span",18),e.EFF(226,"--font-size"),e.k0s(),e.EFF(227,": "),e.j41(228,"span",22),e.EFF(229,"calc"),e.k0s(),e.EFF(230,"("),e.j41(231,"span",22),e.EFF(232,"var"),e.k0s(),e.EFF(233,"(--font-size) + "),e.j41(234,"span",18),e.EFF(235,"4px"),e.k0s(),e.EFF(236,");"),e.nrm(237,"br"),e.EFF(238," }"),e.nrm(239,"br"),e.k0s()(),e.j41(240,"p"),e.EFF(241,"Adjusting the "),e.j41(242,"span",19),e.EFF(243,"--font-size"),e.k0s(),e.EFF(244," variable automatically cascades changes to all elements using it."),e.k0s()(),e.j41(245,"div",26)(246,"h3"),e.EFF(247,"3. Conditional Styling"),e.k0s(),e.j41(248,"p"),e.EFF(249,"CSS variables open the door to conditional styling without requiring complex CSS preprocessors or frameworks. You can create styles that adapt based on user preferences, states, or other conditions."),e.k0s(),e.j41(250,"div",12)(251,"div",13)(252,"div",14),e.nrm(253,"div",15)(254,"div",15)(255,"div",15),e.k0s(),e.j41(256,"div",16),e.EFF(257," CSS "),e.k0s()(),e.j41(258,"div",17)(259,"span",18),e.EFF(260,":root "),e.k0s(),e.EFF(261,"{"),e.nrm(262,"br"),e.EFF(263," \xa0\xa0\xa0"),e.j41(264,"span",18),e.EFF(265,"--text-color"),e.k0s(),e.EFF(266,": "),e.j41(267,"span",18),e.EFF(268,"#333"),e.k0s(),e.EFF(269,";"),e.nrm(270,"br"),e.EFF(271," }"),e.nrm(272,"br")(273,"br"),e.EFF(274," body {"),e.nrm(275,"br"),e.EFF(276," \xa0\xa0\xa0"),e.j41(277,"span",21),e.EFF(278,"color"),e.k0s(),e.EFF(279,": "),e.j41(280,"span",22),e.EFF(281,"var"),e.k0s(),e.EFF(282,"(--text-color);"),e.nrm(283,"br"),e.EFF(284," }"),e.nrm(285,"br")(286,"br"),e.j41(287,"span",18),e.EFF(288,".error-message "),e.k0s(),e.EFF(289,"{"),e.nrm(290,"br"),e.EFF(291," \xa0\xa0\xa0"),e.j41(292,"span",21),e.EFF(293,"color"),e.k0s(),e.EFF(294,": "),e.j41(295,"span",22),e.EFF(296,"var"),e.k0s(),e.EFF(297,"(--text-color);"),e.nrm(298,"br"),e.EFF(299," }"),e.nrm(300,"br")(301,"br"),e.j41(302,"span",18),e.EFF(303,".dark-mode "),e.k0s(),e.EFF(304,"{"),e.nrm(305,"br"),e.EFF(306," \xa0\xa0\xa0"),e.j41(307,"span",18),e.EFF(308,"--text-color"),e.k0s(),e.EFF(309,": "),e.j41(310,"span",18),e.EFF(311,"#fff"),e.k0s(),e.EFF(312,";"),e.nrm(313,"br"),e.EFF(314," }"),e.nrm(315,"br"),e.k0s()(),e.j41(316,"p"),e.EFF(317,"Activating the "),e.j41(318,"span",19),e.EFF(319,".dark-mode"),e.k0s(),e.EFF(320," class instantly adjusts the text color across the application."),e.k0s()(),e.j41(321,"div",27)(322,"h3"),e.EFF(323,"4. Simplified Theming in Frameworks"),e.k0s(),e.j41(324,"p"),e.EFF(325,"When working with CSS frameworks like Bootstrap or Tailwind CSS, customizing themes can be intricate. CSS variables simplify this process by providing a standardized way to override default styles."),e.k0s(),e.j41(326,"div",12)(327,"div",13)(328,"div",14),e.nrm(329,"div",15)(330,"div",15)(331,"div",15),e.k0s(),e.j41(332,"div",16),e.EFF(333," CSS "),e.k0s()(),e.j41(334,"div",17)(335,"span",18),e.EFF(336,":root "),e.k0s(),e.EFF(337,"{"),e.nrm(338,"br"),e.EFF(339," \xa0\xa0\xa0"),e.j41(340,"span",18),e.EFF(341,"--brand-color"),e.k0s(),e.EFF(342,": "),e.j41(343,"span",18),e.EFF(344,"#007bff"),e.k0s(),e.EFF(345,";"),e.nrm(346,"br"),e.EFF(347," }"),e.nrm(348,"br")(349,"br"),e.EFF(350," body {"),e.nrm(351,"br"),e.EFF(352," \xa0\xa0\xa0"),e.j41(353,"span",21),e.EFF(354,"background-color"),e.k0s(),e.EFF(355,": "),e.j41(356,"span",22),e.EFF(357,"var"),e.k0s(),e.EFF(358,"(--brand-color);"),e.nrm(359,"br"),e.EFF(360," \xa0\xa0\xa0"),e.j41(361,"span",21),e.EFF(362,"border-color"),e.k0s(),e.EFF(363,": "),e.j41(364,"span",22),e.EFF(365,"var"),e.k0s(),e.EFF(366,"(--brand-color);"),e.nrm(367,"br"),e.EFF(368," }"),e.nrm(369,"br")(370,"br"),e.j41(371,"span",18),e.EFF(372,".dark-theme "),e.k0s(),e.EFF(373,"{"),e.nrm(374,"br"),e.EFF(375," \xa0\xa0\xa0"),e.j41(376,"span",18),e.EFF(377,"--brand-color"),e.k0s(),e.EFF(378,": "),e.j41(379,"span",18),e.EFF(380,"#28a745"),e.k0s(),e.EFF(381,";"),e.nrm(382,"br"),e.EFF(383," }"),e.nrm(384,"br"),e.k0s()(),e.j41(385,"p"),e.EFF(386,"Customizing the theme becomes a matter of adjusting a few variable values."),e.k0s()(),e.j41(387,"div",28)(388,"h2"),e.EFF(389,"Conclusion"),e.k0s(),e.j41(390,"p"),e.EFF(391,"CSS variables, denoted by the "),e.j41(392,"span",19),e.EFF(393,"--var "),e.k0s(),e.EFF(394,"syntax, bring a new dimension to styling in web development. Their ability to dynamically adapt styles, simplify maintenance, enable conditional styling, and streamline theming makes them a powerful tool for developers. As the web development landscape continues to evolve, CSS variables stand as a testament to the ongoing effort to enhance the flexibility and expressiveness of Cascading Style Sheets. Incorporating these variables into your projects can significantly improve the maintainability and adaptability of your styles, contributing to a more efficient and robust development workflow."),e.k0s()()(),e.nrm(395,"app-support"),e.k0s())},dependencies:[p.t,F.Wk],encapsulation:2})}}return n})();function f(n,l){if(1&n){const s=e.RV6();e.j41(0,"li",10),e.bIt("click",function(){const t=e.eBV(s).$implicit,o=e.XpG();return e.Njj(o.onNavClick(t))}),e.EFF(1),e.k0s()}if(2&n){const s=l.$implicit,i=e.XpG();e.AVh("active",i.activeSection===s),e.R7$(),e.SpI(" ",s," ")}}let k=(()=>{class n{constructor(s){this.scrollService=s,this.sections=["Mastering CSS Flexbox:","Understanding Flexbox","\u200e \u200e \u27a5 What is Flexbox?","\u200e \u200e \u27a5 Key Concepts","Working with Flex Container","\u200e \u200e \u27a5 Properties for..","Styling Flex Items","\u200e \u200e \u27a5 Properties for flex..","Responsive Design with Flexbox","\u200e \u200e \u27a5 Example: Responsive..","Conclusion:"]}ngOnInit(){this.scrollService.section$.subscribe(s=>{this.activeSection=s})}onNavClick(s){this.scrollService.scrollToSection(s)}static{this.\u0275fac=function(i){return new(i||n)(e.rXU(c.b))}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-flexbox"]],decls:14,vars:1,consts:[[1,"row"],[1,"col-12","col-md-3",2,"padding","0"],[1,"n
1ote-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"note-title-wrapper"],[1,"note-main-title"],[1,"note-title-content","sticky-top"],[3,"active","click",4,"ngFor","ngForOf"],[1,"col-12","col-md-9",2,"padding","0"],[3,"click"]],template:function(i,t){1&i&&(e.j41(0,"div",0)(1,"div",1)(2,"div",2),e.nrm(3,"i",3),e.j41(4,"span",4),e.EFF(5,"Back"),e.k0s()(),e.j41(6,"div",5)(7,"div",6),e.EFF(8," TABLE OF CONTENTS "),e.k0s(),e.j41(9,"div",7)(10,"ul"),e.DNE(11,f,2,3,"li",8),e.k0s()()()(),e.j41(12,"div",9),e.nrm(13,"router-outlet"),e.k0s()()),2&i&&(e.R7$(11),e.Y8G("ngForOf",t.sections))},dependencies:[a.MD,a.Sq,F.iI,d.n3,F.Wk],encapsulation:2})}}return n})(),C=(()=>{class n{static{this.\u0275fac=function(i){return new(i||n)}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-flexbox-cont"]],decls:534,vars:0,consts:[[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"container"],[1,"note-content"],[1,"banner"],["src","assets/images/css/css-flexbox.png","alt","css flexbox"],["id","Mastering CSS Flexbox:",1,"section"],[1,"note-tags"],["id","Introduction:",1,"section"],[1,"realistic-marker-highlight"],["id","Understanding Flexbox",1,"section"],["id","\u200e \u200e \u27a5 What is Flexbox?",1,"section"],["id","\u200e \u200e \u27a5 Key Concepts",1,"section"],["id","Working with Flex Container",1,"section"],["id","\u200e \u200e \u27a5 Properties for..",1,"section"],[1,"code-snippet"],[1,"code-snippet-header"],[1,"console"],[1,"circle"],[1,"language"],[1,"code-snippet-wrapper"],[1,"initializer"],[1,"display"],["id","Styling Flex Items",1,"section"],["id","\u200e \u200e \u27a5 Properties for flex..",1,"section"],["id","Responsive Design with Flexbox",1,"section"],["id","\u200e \u200e \u27a5 Example: Responsive..",1,"section"],[1,"comment"],["id","Conclusion:",1,"section"]],template:function(i,t){1&i&&(e.j41(0,"div",0),e.nrm(1,"i",1),e.j41(2,"p")(3,"span",2),e.EFF(4,"Notes"),e.k0s(),e.EFF(5," / CSS / FLEXBOX"),e.k0s()(),e.j41(6,"div",3)(7,"div",4)(8,"div",5),e.nrm(9,"img",6),e.k0s(),e.j41(10,"div",7)(11,"h1"),e.EFF(12,"Mastering CSS Flexbox: A Comprehensive Guide"),e.k0s(),e.j41(13,"p",8)(14,"span")(15,"strong"),e.EFF(16,"Tended:"),e.k0s(),e.EFF(17," Feb 2024"),e.k0s(),e.j41(18,"span")(19,"strong"),e.EFF(20,"Status:"),e.k0s(),e.EFF(21," Seed"),e.k0s()()(),e.j41(22,"div",9)(23,"p"),e.EFF(24,"Cascading Style Sheets (CSS) "),e.j41(25,"span",10),e.EFF(26,"Flexbox"),e.k0s(),e.EFF(27," is a powerful layout model that allows you to design complex and responsive web layouts with ease. In this guide, we'll dive deep into the world of Flexbox, exploring its concepts, properties, and providing practical examples."),e.k0s()(),e.j41(28,"div",11)(29,"h2"),e.EFF(30,"Understanding Flexbox"),e.k0s()(),e.j41(31,"div",12)(32,"h3"),e.EFF(33,"What is Flexbox?"),e.k0s(),e.j41(34,"p"),e.EFF(35," Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows the design of complex layouts and structures with a more efficient and predictable way than traditional models. It's particularly well-suited for designing dynamic and responsive user interfaces. "),e.k0s()(),e.j41(36,"div",13)(37,"h3"),e.EFF(38,"Key Concepts"),e.k0s(),e.j41(39,"ol")(40,"li")(41,"strong"),e.EFF(42,"Flex Container and Flex Items:"),e.k0s()(),e.j41(43,"ul")(44,"li")(45,"strong"),e.EFF(46,"Flex Container:"),e.k0s(),e.EFF(47,"The parent element containing flex items. Apply "),e.j41(48,"strong"),e.EFF(49,"display: flex;"),e.k0s(),e.EFF(50," or "),e.j41(51,"strong"),e.EFF(52,"display: inline-flex;"),e.k0s(),e.EFF(53," to activate the flex container. "),e.k0s(),e.j41(54,"li")(55,"strong"),e.EFF(56,"Flex Items:"),e.k0s(),e.EFF(57," The child elements of the flex container. They are aligned and ordered within the flex container. "),e.k0s()(),e.j41(58,"li")(59,"strong"),e.EFF(60,"Main Axis and Cross Axis:"),e.k0s()(),e.j41(61,"ul")(62,"li")(63,"strong"),e.EFF(64,"Main Axis:"),e.k0s(),e.EFF(65," The primary axis along which flex items are laid out. It's defined by the "),e.j41(66,"strong"),e.EFF(67,"flex-direction"),e.k0s(),e.EFF(68," property. "),e.k0s(),e.j41(69,"li")(70,"strong"),e.EFF(71,"Cross Axis:"),e.k0s(),e.EFF(72," The perpendicular axis to the main axis."),e.k0s()()()(),e.j41(73,"div",14)(74,"h2"),e.EFF(75,"Working with Flex Container"),e.k0s()(),e.j41(76,"div",15)(77,"h3"),e.EFF(78,"Properties for Flex Container"),e.k0s(),e.j41(79,"ol")(80,"li")(81,"strong"),e.EFF(82,"flex-direction:"),e.k0s()(),e.j41(83,"ul")(84,"li"),e.EFF(85,"Defines the main axis direction."),e.k0s(),e.j41(86,"li"),e.EFF(87,"Values: "),e.j41(88,"strong"),e.EFF(89,"row"),e.k0s(),e.EFF(90," (default), "),e.j41(91,"strong"),e.EFF(92,"row-reverse"),e.k0s(),e.EFF(93,", "),e.j41(94,"strong"),e.EFF(95,"column"),e.k0s(),e.EFF(96,", "),e.j41(97,"strong"),e.EFF(98,"column-reverse"),e.k0s(),e.EFF(99,". "),e.k0s(),e.j41(100,"div",16)(101,"div",17)(102,"div",18),e.nrm(103,"div",19)(104,"div",19)(105,"div",19),e.k0s(),e.j41(106,"div",20),e.EFF(107," CSS "),e.k0s()(),e.j41(108,"div",21)(109,"span",22),e.EFF(110,".flex-container "),e.k0s(),e.EFF(111,"{"),e.nrm(112,"br"),e.EFF(113," \xa0\xa0\xa0"),e.j41(114,"span",23),e.EFF(115,"flex-direction"),e.k0s(),e.EFF(116,": row;"),e.nrm(117,"br"),e.EFF(118," }"),e.nrm(119,"br"),e.k0s()()(),e.j41(120,"li")(121,"strong"),e.EFF(122,"flex-wrap:"),e.k0s()(),e.j41(123,"ul")(124,"li"),e.EFF(125,"Controls whether flex items are forced into a single line or can be wrapped onto multiple lines."),e.k0s(),e.j41(126,"li"),e.EFF(127,"Values: "),e.j41(128,"strong"),e.EFF(129,"nowrap"),e.k0s(),e.EFF(130," (default), "),e.j41(131,"strong"),e.EFF(132,"wrap"),e.k0s(),e.EFF(133,", "),e.j41(134,"strong"),e.EFF(135,"wrap-reverse"),e.k0s(),e.EFF(136,"."),e.k0s(),e.j41(137,"div",16)(138,"div",17)(139,"div",18),e.nrm(140,"div",19)(141,"div",19)(142,"div",19),e.k0s(),e.j41(143,"div",20),e.EFF(144," CSS "),e.k0s()(),e.j41(145,"div",21)(146,"span",22),e.EFF(147,".flex-container "),e.k0s(),e.EFF(148,"{"),e.nrm(149,"br"),e.EFF(150," \xa0\xa0\xa0"),e.j41(151,"span",23),e.EFF(152,"flex-wrap"),e.k0s(),e.EFF(153,": wrap;"),e.nrm(154,"br"),e.EFF(155," }"),e.nrm(156,"br"),e.k0s()()(),e.j41(157,"li")(158,"strong"),e.EFF(159,"flex-flow:"),e.k0s()(),e.j41(160,"ul")(161,"li"),e.EFF(162,"A shorthand for "),e.j41(163,"strong"),e.EFF(164,"flex-direction"),e.k0s(),e.EFF(165," and "),e.j41(166,"strong"),e.EFF(167,"flex-wrap"),e.k0s(),e.EFF(168,"."),e.k0s(),e.j41(169,"div",16)(170,"div",17)(171,"div",18),e.nrm(172,"div",19)(173,"div",19)(174,"div",19),e.k0s(),e.j41(175,"div",20),e.EFF(176," CSS "),e.k0s()(),e.j41(177,"div",21)(178,"span",22),e.EFF(179,".flex-container "),e.k0s(),e.EFF(180,"{"),e.nrm(181,"br"),e.EFF(182," \xa0\xa0\xa0"),e.j41(183,"span",23),e.EFF(184,"flex-flow"),e.k0s(),e.EFF(185,": row wrap;"),e.nrm(186,"br"),e.EFF(187," }"),e.nrm(188,"br"),e.k0s()()(),e.j41(189,"li")(190,"strong"),e.EFF(191,"justify-content:"),e.k0s()(),e.j41(192,"ul")(193,"li"),e.EFF(194,"Controls the alignment of flex items along the main axis."),e.k0s(),e.j41(195,"li"),e.EFF(196,"Values: "),e.j41(197,"strong"),e.EFF(198,"flex-start"),e.k0s(),e.EFF(199," (default), "),e.j41(200,"strong"),e.EFF(201,"flex-end"),e.k0s(),e.EFF(202,", "),e.j41(203,"strong"),e.EFF(204,"center"),e.k0s(),e.EFF(205,", "),e.j41(206,"strong"),e.EFF(207,"space-between"),e.k0s(),e.EFF(208,", "),e.j41(209,"strong"),e.EFF(210,"space-around"),e.k0s(),e.EFF(211,". "),e.k0s(),e.j41(212,"div",16)(213,"div",17)(214,"div",18),e.nrm(215,"div",19)(216,"div",19)(217,"div",19),e.k0s(),e.j41(218,"div",20),e.EFF(219," CSS "),e.k0s()(),e.j41(220,"div",21)(221,"span",22),e.EFF(222,".flex-container "),e.k0s(),e.EFF(223,"{"),e.nrm(224,"br"),e.EFF(225," \xa0\xa0\xa0"),e.j41(226,"span",23),e.EFF(227,"justify-content"),e.k0s(),e.EFF(228,": center;"),e.nrm(229,"br"),e.EFF(230," }"),e.nrm(231,"br"),e.k0s()()()()(),e.j41(232,"div",24)(233,"h2"),e.EFF(234,"Styling Flex Items"),e.k0s()(),e.j41(235,"div",25)(236,"ol")(237,"li")(238,"strong"),e.EFF(239,"order:"),e.k0s()(),e.j41(240,"ul")(241,"li"),e.EFF(242,"Specifies the order of a flex item."),e.k0s(),e.j41(243,"div",16)(244,"div",17)(245,"div",18),e.nrm(246,"div",19)(247,"div",19)(248,"div",19),e.k0s(),e.j41(249,"div",20),e.EFF(250," CSS "),e.k0s()(),e.j41(251,"div",21)(252,"
1span",22),e.EFF(253,".flex-item "),e.k0s(),e.EFF(254,"{"),e.nrm(255,"br"),e.EFF(256," \xa0\xa0\xa0"),e.j41(257,"span",23),e.EFF(258,"order"),e.k0s(),e.EFF(259,": "),e.j41(260,"span",22),e.EFF(261,"2"),e.k0s(),e.EFF(262,";"),e.nrm(263,"br"),e.EFF(264," }"),e.nrm(265,"br"),e.k0s()()(),e.j41(266,"li")(267,"strong"),e.EFF(268,"flex-grow:"),e.k0s()(),e.j41(269,"ul")(270,"li"),e.EFF(271,"Specifies the ability for a flex item to grow."),e.k0s(),e.j41(272,"div",16)(273,"div",17)(274,"div",18),e.nrm(275,"div",19)(276,"div",19)(277,"div",19),e.k0s(),e.j41(278,"div",20),e.EFF(279," CSS "),e.k0s()(),e.j41(280,"div",21)(281,"span",22),e.EFF(282,".flex-item "),e.k0s(),e.EFF(283,"{"),e.nrm(284,"br"),e.EFF(285," \xa0\xa0\xa0"),e.j41(286,"span",23),e.EFF(287,"flex-grow"),e.k0s(),e.EFF(288,": "),e.j41(289,"span",22),e.EFF(290,"1"),e.k0s(),e.EFF(291,";"),e.nrm(292,"br"),e.EFF(293," }"),e.nrm(294,"br"),e.k0s()()(),e.j41(295,"li")(296,"strong"),e.EFF(297,"flex-shrink:"),e.k0s()(),e.j41(298,"ul")(299,"li"),e.EFF(300,"Specifies the ability for a flex item to shrink."),e.k0s(),e.j41(301,"div",16)(302,"div",17)(303,"div",18),e.nrm(304,"div",19)(305,"div",19)(306,"div",19),e.k0s(),e.j41(307,"div",20),e.EFF(308," CSS "),e.k0s()(),e.j41(309,"div",21)(310,"span",22),e.EFF(311,".flex-item "),e.k0s(),e.EFF(312,"{"),e.nrm(313,"br"),e.EFF(314," \xa0\xa0\xa0"),e.j41(315,"span",23),e.EFF(316,"flex-shrink"),e.k0s(),e.EFF(317,": "),e.j41(318,"span",22),e.EFF(319,"0"),e.k0s(),e.EFF(320,";"),e.nrm(321,"br"),e.EFF(322," }"),e.nrm(323,"br"),e.k0s()()(),e.j41(324,"li")(325,"strong"),e.EFF(326,"flex-basis:"),e.k0s()(),e.j41(327,"ul")(328,"li"),e.EFF(329,"Specifies the initial size of a flex item."),e.k0s(),e.j41(330,"div",16)(331,"div",17)(332,"div",18),e.nrm(333,"div",19)(334,"div",19)(335,"div",19),e.k0s(),e.j41(336,"div",20),e.EFF(337," CSS "),e.k0s()(),e.j41(338,"div",21)(339,"span",22),e.EFF(340,".flex-item "),e.k0s(),e.EFF(341,"{"),e.nrm(342,"br"),e.EFF(343," \xa0\xa0\xa0"),e.j41(344,"span",23),e.EFF(345,"flex-basis"),e.k0s(),e.EFF(346,": "),e.j41(347,"span",22),e.EFF(348,"200px"),e.k0s(),e.EFF(349,";"),e.nrm(350,"br"),e.EFF(351," }"),e.nrm(352,"br"),e.k0s()()(),e.j41(353,"li")(354,"strong"),e.EFF(355,"flex:"),e.k0s()(),e.j41(356,"ul")(357,"li"),e.EFF(358,"A shorthand for "),e.j41(359,"strong"),e.EFF(360,"flex-grow"),e.k0s(),e.EFF(361,", "),e.j41(362,"strong"),e.EFF(363,"flex-shrink"),e.k0s(),e.EFF(364,", and "),e.j41(365,"strong"),e.EFF(366,"flex-basis"),e.k0s(),e.EFF(367,". "),e.k0s(),e.j41(368,"div",16)(369,"div",17)(370,"div",18),e.nrm(371,"div",19)(372,"div",19)(373,"div",19),e.k0s(),e.j41(374,"div",20),e.EFF(375," CSS "),e.k0s()(),e.j41(376,"div",21)(377,"span",22),e.EFF(378,".flex-item "),e.k0s(),e.EFF(379,"{"),e.nrm(380,"br"),e.EFF(381," \xa0\xa0\xa0"),e.j41(382,"span",23),e.EFF(383,"flex"),e.k0s(),e.EFF(384,": "),e.j41(385,"span",22),e.EFF(386,"1 0 200px"),e.k0s(),e.EFF(387,";"),e.nrm(388,"br"),e.EFF(389," }"),e.nrm(390,"br"),e.k0s()()()()(),e.j41(391,"div",26)(392,"h2"),e.EFF(393,"Responsive Design with Flexbox"),e.k0s(),e.j41(394,"p"),e.EFF(395,"Flexbox shines when it comes to building responsive designs. Let's see a practical example:"),e.k0s()(),e.j41(396,"div",27)(397,"h3"),e.EFF(398,"Example: Responsive Navbar"),e.k0s(),e.j41(399,"div",16)(400,"div",17)(401,"div",18),e.nrm(402,"div",19)(403,"div",19)(404,"div",19),e.k0s(),e.j41(405,"div",20),e.EFF(406," HTML "),e.k0s()(),e.j41(407,"div",21),e.EFF(408," <nav "),e.j41(409,"span",22),e.EFF(410,"class"),e.k0s(),e.EFF(411,"="),e.j41(412,"span",23),e.EFF(413,'"flex-container"'),e.k0s(),e.EFF(414,">"),e.nrm(415,"br"),e.EFF(416," \xa0\xa0\xa0<a "),e.j41(417,"span",22),e.EFF(418,"href"),e.k0s(),e.EFF(419,"="),e.j41(420,"span",23),e.EFF(421,'"#"'),e.k0s(),e.EFF(422,">Home</a>"),e.nrm(423,"br"),e.EFF(424," \xa0\xa0\xa0<a "),e.j41(425,"span",22),e.EFF(426,"href"),e.k0s(),e.EFF(427,"="),e.j41(428,"span",23),e.EFF(429,'"#"'),e.k0s(),e.EFF(430,">About</a>"),e.nrm(431,"br"),e.EFF(432," \xa0\xa0\xa0<a "),e.j41(433,"span",22),e.EFF(434,"href"),e.k0s(),e.EFF(435,"="),e.j41(436,"span",23),e.EFF(437,'"#"'),e.k0s(),e.EFF(438,">Services</a>"),e.nrm(439,"br"),e.EFF(440," \xa0\xa0\xa0<a "),e.j41(441,"span",22),e.EFF(442,"href"),e.k0s(),e.EFF(443,"="),e.j41(444,"span",23),e.EFF(445,'"#"'),e.k0s(),e.EFF(446,">Contact</a>"),e.nrm(447,"br"),e.EFF(448," </nav>"),e.nrm(449,"br"),e.k0s()(),e.j41(450,"div",16)(451,"div",17)(452,"div",18),e.nrm(453,"div",19)(454,"div",19)(455,"div",19),e.k0s(),e.j41(456,"div",20),e.EFF(457," CSS "),e.k0s()(),e.j41(458,"div",21)(459,"span",22),e.EFF(460,".flex-container "),e.k0s(),e.EFF(461,"{"),e.nrm(462,"br"),e.EFF(463," \xa0\xa0\xa0"),e.j41(464,"span",23),e.EFF(465,"display"),e.k0s(),e.EFF(466,": flex;"),e.nrm(467,"br"),e.EFF(468," \xa0\xa0\xa0"),e.j41(469,"span",23),e.EFF(470,"justify-content"),e.k0s(),e.EFF(471,": spae-around;"),e.nrm(472,"br"),e.EFF(473," }"),e.nrm(474,"br")(475,"br"),e.j41(476,"span",28),e.EFF(477,"/* Style for better visualization */"),e.k0s(),e.nrm(478,"br"),e.EFF(479," a {"),e.nrm(480,"br"),e.EFF(481," \xa0\xa0\xa0"),e.j41(482,"span",23),e.EFF(483,"text-decoration"),e.k0s(),e.EFF(484,": none;"),e.nrm(485,"br"),e.EFF(486," \xa0\xa0\xa0"),e.j41(487,"span",23),e.EFF(488,"padding"),e.k0s(),e.EFF(489,": "),e.j41(49
10,"span",22),e.EFF(491,"10px"),e.k0s(),e.EFF(492,";"),e.nrm(493,"br"),e.EFF(494," \xa0\xa0\xa0"),e.j41(495,"span",23),e.EFF(496,"color"),e.k0s(),e.EFF(497,": "),e.j41(498,"span",22),e.EFF(499,"#333"),e.k0s(),e.EFF(500,";"),e.nrm(501,"br"),e.EFF(502," \xa0\xa0\xa0"),e.j41(503,"span",23),e.EFF(504,"border-radius"),e.k0s(),e.EFF(505,": "),e.j41(506,"span",22),e.EFF(507,"5px"),e.k0s(),e.EFF(508,";"),e.nrm(509,"br"),e.EFF(510," \xa0\xa0\xa0"),e.j41(511,"span",23),e.EFF(512,"border"),e.k0s(),e.EFF(513,": "),e.j41(514,"span",22),e.EFF(515,"1px"),e.k0s(),e.EFF(516," solid "),e.j41(517,"span",22),e.EFF(518,"#ccc"),e.k0s(),e.EFF(519,";"),e.nrm(520,"br"),e.EFF(521," }"),e.nrm(522,"br"),e.k0s()(),e.j41(523,"p"),e.EFF(524,"In this example, the "),e.j41(525,"strong"),e.EFF(526,"flex-container"),e.k0s(),e.EFF(527," ensures the navigation links are evenly spaced. As the screen size changes, the flexibility of Flexbox ensures a smooth transition to different layouts."),e.k0s()(),e.j41(528,"div",29)(529,"h2"),e.EFF(530,"Conclusion"),e.k0s(),e.j41(531,"p"),e.EFF(532,"CSS Flexbox is a powerful tool for creating flexible and responsive layouts. By understanding its properties and concepts, you can take control of your website's structure and adapt it to various screen sizes and devices. Experiment with these examples and integrate Flexbox into your web development toolkit for more efficient and dynamic designs."),e.k0s()()(),e.nrm(533,"app-support"),e.k0s())},dependencies:[p.t,F.Wk],encapsulation:2})}}return n})();function A(n,l){if(1&n){const s=e.RV6();e.j41(0,"li",10),e.bIt("click",function(){const t=e.eBV(s).$implicit,o=e.XpG();return e.Njj(o.onNavClick(t))}),e.EFF(1),e.k0s()}if(2&n){const s=l.$implicit,i=e.XpG();e.AVh("active",i.activeSection===s),e.R7$(),e.SpI(" ",s," ")}}let h=(()=>{class n{constructor(s){this.scrollService=s,this.sections=["Mastering Advanced CSS..","1. CSS Grid Layout","\u200e \u200e \u27a5 Understanding CSS..","2. CSS Flexbox for Responsive..","\u200e \u200e \u27a5 Leveraging Flexbox","3. CSS Transitions and..","\u200e \u200e \u27a5 Adding Motion to..","4. CSS Variables","\u200e \u200e \u27a5 Modularizing Your..","5. Responsive Typography..","\u200e \u200e \u27a5 Scaling Text..","Conclusion:"]}ngOnInit(){this.scrollService.section$.subscribe(s=>{this.activeSection=s})}onNavClick(s){this.scrollService.scrollToSection(s)}static{this.\u0275fac=function(i){return new(i||n)(e.rXU(c.b))}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-advance"]],decls:14,vars:1,consts:[[1,"row"],[1,"col-12","col-md-3",2,"padding","0"],[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"note-title-wrapper"],[1,"note-main-title"],[1,"note-title-content","sticky-top"],[3,"active","click",4,"ngFor","ngForOf"],[1,"col-12","col-md-9",2,"padding","0"],[3,"click"]],template:function(i,t){1&i&&(e.j41(0,"div",0)(1,"div",1)(2,"div",2),e.nrm(3,"i",3),e.j41(4,"span",4),e.EFF(5,"Back"),e.k0s()(),e.j41(6,"div",5)(7,"div",6),e.EFF(8," TABLE OF CONTENTS "),e.k0s(),e.j41(9,"div",7)(10,"ul"),e.DNE(11,A,2,3,"li",8),e.k0s()()()(),e.j41(12,"div",9),e.nrm(13,"router-outlet"),e.k0s()()),2&i&&(e.R7$(11),e.Y8G("ngForOf",t.sections))},dependencies:[a.MD,a.Sq,F.iI,d.n3,F.Wk],encapsulation:2})}}return n})();const y=[{path:"",component:u,children:[{path:"",redirectTo:"vs",pathMatch:"full"},{path:"vs",component:v,children:[{path:"",component:S}]},{path:"var",component:m,children:[{path:"",component:g}]},{path:"flexbox",component:k,children:[{path:"",component:C}]},{path:"advance",component:h,children:[{path:"",component:(()=>{class n{static{this.\u0275fac=function(i){return new(i||n)}}static{this.\u0275cmp=e.VBU({type:n,selectors:[["app-css-advance-cont"]],decls:379,vars:0,consts:[[1,"note-title-wrapper-header"],["aria-hidden","true",1,"fa","fa-chevron-left"],["routerLink","/home"],[1,"container"],[1,"note-content"],[1,"banner"],["src","assets/images/css/css-advance.png","alt","css advance"],["id","Mastering Advanced CSS..",1,"section"],[1,"note-tags"],["id","Introduction:",1,"section"],["id","1. CSS Grid Layout",1,"section"],["id","\u200e \u200e \u27a5 Understanding CSS..",1,"section"],[1,"code-snippet"],[1,"code-snippet-header"],[1,"console"],[1,"circle"],[1,"language"],[1,"code-snippet-wrapper"],[1,"initializer"],[1,"display"],["id","2. CSS Flexbox for Responsive..",1,"section"],["id","\u200e \u200e \u27a5 Leveraging Flexbox",1,"section"],["id","3. CSS Transitions and..",1,"section"],["id","\u200e \u200e \u27a5 Adding Motion to..",1,"section"],[1,"keyword"],[1,"import"],["id","4. CSS Variables",1,"section"],["id","\u200e \u200e \u27a5 Modularizing Your..",1,"section"],["id","5. Responsive Typography..",1,"section"],["id","\u200e \u200e \u27a5 Scaling Text..",1,"section"],[1,"realistic-marker-highlight"],["id","Conclusion:",1,"section"]],template:function(i,t){1&i&&(e.j41(0,"div",0),e.nrm(1,"i",1),e.j41(2,"p")(3,"span",2),e.EFF(4,"Notes"),e.k0s(),e.EFF(5," / CSS / CSS Advanced"),e.k0s()(),e.j41(6,"div",3)(7,"div",4)(8,"div",5),e.nrm(9,"img",6),e.k0s(),e.j41(10,"div",7)(11,"h1"),e.EFF(12,"Mastering Advanced CSS Techniques: A Comprehensive Guide"),e.k0s(),e.j41(13,"p",8)(14,"span")(15,"strong"),e.EFF(16,"Tended:"),e.k0s(),e.EFF(17," Feb 2024"),e.k0s(),e.j41(18,"span")(19,"strong"),e.EFF(20,"Status:"),e.k0s(),e.EFF(21," Sprout"),e.k0s()()(),e.j41(22,"div",9)(23,"p"),e.EFF(24,"Cascading Style Sheets (CSS) is a versatile and powerful language for styling web documents. Beyond the basics, advanced CSS techniques provide the means to create sophisticated layouts and designs. In this guide, we'll explore some of these advanced techniques, unraveling the complexity and providing practical examples."),e.k0s()(),e.j41(25,"div",10)(26,"h2"),e.EFF(27,"1. CSS Grid Layout"),e.k0s()(),e.j41(28,"div",11)(29,"h3"),e.EFF(30,"Understanding CSS Grid"),e.k0s(),e.j41(31,"p"),e.EFF(32," CSS Grid Layout is a two-dimensional layout system for the web. It allows you to design complex grid-based layouts with ease. The key components are the grid container and grid items. "),e.k0s(),e.j41(33,"h4"),e.EFF(34,"Grid Container:"),e.k0s(),e.j41(35,"div",12)(36,"div",13)(37,"div",14),e.nrm(38,"div",15)(39,"div",15)(40,"div",15),e.k0s(),e.j41(41,"div",16),e.EFF(42," CSS "),e.k0s()(),e.j41(43,"div",17)(44,"span",18),e.EFF(45,".container "),e.k0s(),e.EFF(46,"{"),e.nrm(47,"br"),e.EFF(48," \xa0\xa0\xa0"),e.j41(49,"span",19),e.EFF(50,"display"),e.k0s(),e.EFF(51,": grid;"),e.nrm(52,"br"),e.EFF(53," \xa0\xa0\xa0"),e.j41(54,"span",19),e.EFF(55,"grid-gap"),e.k0s(),e.EFF(56,": "),e.j41(57,"span",18),e.EFF(58,"10px"),e.k0s(),e.EFF(59,";"),e.nrm(60,"br"),e.EFF(61," \xa0\xa0\xa0"),e.j41(62,"span",19),e.EFF(63,"grid-template-columns"),e.k0s(),e.EFF(64,": "),e.j41(65,"span",18),e.EFF(66,"1"),e.k0s(),e.EFF(67,"fr "),e.j41(68,"span",18),e.EFF(69,"1"),e.k0s(),e.EFF(70,"fr "),e.j41(71,"span",18),e.EFF(72,"1"),e.k0s(),e.EFF(73,"fr;"),e.nrm(74,"br"),e.EFF(75," }"),e.nrm(76,"br"),e.k0s()(),e.j41(77,"h4"),e.EFF(78,"Grid Items:"),e.k0s(),e.j41(79,"div",12)(80,"div",13)(81,"div",14),e.nrm(82,"div",15)(83,"div",15)(84,"div",15),e.k0s(),e.j41(85,"div",16),e.EFF(86," CSS "),e.k0s()(),e.j41(87,"div",17)(88,"span",18),e.EFF(89,".item "),e.k0s(),e.EFF(90,"{"),e.nrm(91,"br"),e.EFF(92," \xa0\xa0\xa0"),e.j41(93,"span",19),e.EFF(94,"grid-column"),e.k0s(),e.EFF(95,": span "),e.j41(96,"span",18),e.EFF(97,"2"),e.k0s(),e.EFF(98,";"),e.nrm(99,"br"),e.EFF(100," }"),e.nrm(101,"br"),e.k0s()(),e.j41(102,"p"),e.EFF(103,"In this example, the "),e.j41(104,"strong"),e.EFF(105,".container"),e.k0s(),e.EFF(106," is set as a grid with three columns of equal width and a gap of 20 pixels. The "),e.j41(107,"strong"),e.EFF(108,".item"),e.k0s(),e.EFF(109," spans two columns within the grid."),e.k0s()(),e.j41(110,"div",20)(111,"h2"),e.EFF(112,"2. CSS Flexbox for Responsive Design"),e.k0s()(),e.j41(113,"div",21)(114,"h3"),e.EFF(115,"Leveraging Flexbox"),e.k0s(),e.j41(116,"p"),e.EFF(117,"Flexbox is excellent for building flexible and responsive layouts. It's especially useful for creating dynamic navigation menus or aligning items within a container."),e.k0s(),e.j41(118,"div",12)(119,"div",13)(120,"div",14),e.nrm(121,"div",15)(122,"div",15)(123,"div",15),e.k0s(),e.j41(124,"div",16),e.EFF(125," CSS "),e.k0s()(),e.j41(126,"div",17)(127,"span",18),e.EFF(128,".container "),e.k0s(),e.EFF(129,"{"),e.nrm(130,"br"),e.EFF(131," \xa0\xa0\xa0"),e.j41(132,"span",19),e.EFF(133,"display"),e.k0s(),e.EFF(134,": flex;"),e.nrm(135,"br"),e.EFF(136," \xa0\xa0\xa0"),e.j41(137,"span",19),e.EFF(138,"justify-content"),e.k0s(),e.EFF(139,": space-between;"),e.nrm(140,"br"),e.EFF(141," \xa0\xa0\xa0"),e.j41(142,"span",19),e.EFF(143,"align-items"),e.k0s(),e.EFF(144,": center;"),e.nrm(145,"br"),e.EFF(146," }"),e.nrm(147,"br"),e.k0s()(),e.j41(148,"p"),e.EFF(149,"In this example, the "),e.j41(150,"strong"),e.EFF(151,".container"),e.k0s(),e.EFF(152," is a flex container with items evenly spaced and vertically centered. This is particularly handy for building responsive navigation bars."),e.k0s()(),e.j41(153,"div",22)(154,"h2"),e.EFF(155,"3. CSS Transitions and Animations"),e.k0s()(),e.j41(156,"div",23)(157,"h3"),e.EFF(158,"Adding Motion to Elements"),e.k0s(),e.j41(159,"p"),e.EFF(160," Transitions and animations bring life to your web pages. They can be applied to various properties, providing smooth and engaging user experiences. "),e.k0s(),e.j41(161,"h4"),e.EFF(162,"CSS Transitions:"),e.k0s(),e.j41(163,"div",12)(164,"div",13)(165,"div",14),e.nrm(166,"div",15)(167,"div",15)(168,"div",15),e.k0s(),e.j41(169,"div",16),e.EFF(170," CSS "),e.k0s()(),e.j41(171,"div",17)(172,"span",18),e.EFF(173,".button "),e.k0s(),e.EFF(174,"{"),e.nrm(175,"br"),e.EFF(176," \xa0\xa0\xa0"),e.j41(177,"span",19),e.EFF(178,"transition"),e.k0s(),e.EFF(179,": background-color "),e.j41(180,"span",18),e.EFF(181,"0.3s"),e.k0s(),e.EFF(182," ease;"),e.nrm(183,"br"),e.EFF(184," }"),e.nrm(185,"br")(186,"br"),e.j41(187,"span",18),e.EFF(188,".button:hover "),e.k0s(),e.EFF(189,"{"),e.nrm(190,"br"),e.EFF(191," \xa0\xa0\xa0"),e.j41(192,"span",19),e.EFF(193,"background-color"),e.k0s(),e.EFF(194,": "),e.j41(195,"span",18),e.EFF(196,"#333"),e.k0s(),e.EFF(197,";"),e.nrm(198,"br"),e.EFF(199," }"),e.nrm(200,"br"),e.k0s()(),e.j41(201,"p"),e.EFF(202,"Here, the background color of the "),e.j41(203,"strong"),e.EFF(204,".button"),e.k0s(),e.EFF(205," transitions smoothly over 0.3 seconds when hovered. "),e.k0s(),e.j41(206,"h4"),e.EFF(207,"CSS Animations:"),e.k0s(),e.j41(208,"div",12)(209,"div",13)(210,"div",14),e.nrm(211,"div",15)(212,"div",15)(213,"div",15),e.k0s(),e.j41(214,"div",16),e.EFF(215," CSS "),e.k0s()(),e.j41(216,"div",17)(217,"span",24),e.EFF(218,"@keyframes "),e.k0s(),e.EFF(219,"slide {"),e.nrm(220,"br"),e.EFF(221," \xa0\xa0\xa0"),e.j41(222,"span",18),e.EFF(223,"0% "),e.k0s(),e.EFF(224,"{ "),e.j41(225,"span",19),e.EFF(226,"transform"),e.k0s(),e.EFF(227,": "),e.j41(228,"span",25),e.EFF(229,"translateX"),e.k0s(),e.EFF(230,"("),e.j41(231,"span",18),e.EFF(232,"0"),e.k0s(),e.EFF(233,"); }"),e.nrm(234,"br"),e.EFF(235," \xa0\xa0\xa0"),e.j41(236,"span",18),e.EFF(237,"100% "),e.k0s(),e.EFF(238,"{ "),e.j41(239,"span",19),e.EFF(240,"transform"),e.k0s(),e.EFF(241,": "),e.j41(242,"span",25),e.EFF(243,"translateX"),e.k0s(),e.EFF(244,"("),e.j41(245,"span",18),e.EFF(246,"100%"),e.k0s(),e.EFF(247,"); }"),e.nrm(248,"br"),e.EFF(249," }
1"),e.nrm(250,"br")(251,"br"),e.j41(252,"span",18),e.EFF(253,".button "),e.k0s(),e.EFF(254,"{"),e.nrm(255,"br"),e.EFF(256," \xa0\xa0\xa0"),e.j41(257,"span",19),e.EFF(258,"animation"),e.k0s(),e.EFF(259,": slide "),e.j41(260,"span",18),e.EFF(261,"1s"),e.k0s(),e.EFF(262," ease;"),e.nrm(263,"br"),e.EFF(264," }"),e.nrm(265,"br"),e.k0s()(),e.j41(266,"p"),e.EFF(267,"Here, the "),e.j41(268,"strong"),e.EFF(269,".button"),e.k0s(),e.EFF(270," element slides from the left to the right smoothly over 1 second."),e.k0s()(),e.j41(271,"div",26)(272,"h2"),e.EFF(273,"4. CSS Variables"),e.k0s()(),e.j41(274,"div",27)(275,"h3"),e.EFF(276,"Modularizing Your Styles"),e.k0s(),e.j41(277,"p"),e.EFF(278,"CSS Variables provide a way to store and reuse values throughout your stylesheet. This enhances maintainability and allows for easy theming."),e.k0s(),e.j41(279,"div",12)(280,"div",13)(281,"div",14),e.nrm(282,"div",15)(283,"div",15)(284,"div",15),e.k0s(),e.j41(285,"div",16),e.EFF(286," CSS "),e.k0s()(),e.j41(287,"div",17)(288,"span",18),e.EFF(289,":root "),e.k0s(),e.EFF(290,"{"),e.nrm(291,"br"),e.EFF(292," \xa0\xa0\xa0"),e.j41(293,"span",18),e.EFF(294,"--main-color"),e.k0s(),e.EFF(295,": "),e.j41(296,"span",18),e.EFF(297,"#333"),e.k0s(),e.EFF(298,";"),e.nrm(299,"br"),e.EFF(300," }"),e.nrm(301,"br")(302,"br"),e.j41(303,"span",18),e.EFF(304,".header "),e.k0s(),e.EFF(305,"{"),e.nrm(306,"br"),e.EFF(307," \xa0\xa0\xa0"),e.j41(308,"span",19),e.EFF(309,"background-color"),e.k0s(),e.EFF(310,": "),e.j41(311,"span",25),e.EFF(312,"var"),e.k0s(),e.EFF(313,"(--main-color);"),e.nrm(314,"br"),e.EFF(315," }"),e.nrm(316,"br"),e.k0s()(),e.j41(317,"p"),e.EFF(318,"By defining "),e.j41(319,"strong"),e.EFF(320,"--main-color"),e.k0s(),e.EFF(321," in the "),e.j41(322,"strong"),e.EFF(323,":root"),e.k0s(),e.EFF(324," pseudo-class, it becomes a global variable accessible throughout the stylesheet."),e.k0s()(),e.j41(325,"div",28)(326,"h2"),e.EFF(327,"5. Responsive Typography with "),e.j41(328,"strong"),e.EFF(329,"vw"),e.k0s(),e.EFF(330," and "),e.j41(331,"strong"),e.EFF(332,"vh"),e.k0s(),e.EFF(333," Units"),e.k0s()(),e.j41(334,"div",29)(335,"h3"),e.EFF(336,"Scaling Text Responsively"),e.k0s(),e.j41(337,"p"),e.EFF(338,"Viewport units ("),e.j41(339,"span",30),e.EFF(340,"vw"),e.k0s(),e.EFF(341," for viewport width, "),e.j41(342,"span",30),e.EFF(343,"vh"),e.k0s(),e.EFF(344," for viewport height) enable you to create text that scales with the size of the viewport."),e.k0s(),e.j41(345,"div",12)(346,"div",13)(347,"div",14),e.nrm(348,"div",15)(349,"div",15)(350,"div",15),e.k0s(),e.j41(351,"div",16),e.EFF(352," CSS "),e.k0s()(),e.j41(353,"div",17)(354,"span",18),e.EFF(355,".title "),e.k0s(),e.EFF(356,"{"),e.nrm(357,"br"),e.EFF(358," \xa0\xa0\xa0"),e.j41(359,"span",19),e.EFF(360,"font-size"),e.k0s(),e.EFF(361,": "),e.j41(362,"span",18),e.EFF(363,"4vw"),e.k0s(),e.EFF(364,";"),e.nrm(365,"br"),e.EFF(366," }"),e.nrm(367,"br"),e.k0s()(),e.j41(368,"p"),e.EFF(369,"In this example, the font size of the "),e.j41(370,"strong"),e.EFF(371,".title"),e.k0s(),e.EFF(372," class is set to be 4% of the viewport width."),e.k0s()(),e.j41(373,"div",31)(374,"h2"),e.EFF(375,"Conclusion"),e.k0s(),e.j41(376,"p"),e.EFF(377,"Mastering advanced CSS techniques opens up a world of possibilities for creating visually stunning and responsive web designs. Whether you're working with grid layouts, flex containers, animations, variables, or responsive typography, these techniques empower you to craft modern and sophisticated user interfaces. Experiment with these examples, tweak the values, and incorporate these advanced techniques into your web development toolkit."),e.k0s()()(),e.nrm(378,"app-support"),e.k0s())},dependencies:[p.t,F.Wk],styles:["h4[_ngcontent-%COMP%]{font-size:12px;font-weight:700}"]})}}return n})()}]}]}];let x=(()=>{class n{static{this.\u0275fac=function(i){return new(i||n)}}static{this.\u0275mod=e.$C({type:n})}static{this.\u0275inj=e.G2t({imports:[a.MD,F.iI.forChild(y),u,v,m,k,h]})}}return n})()}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.