Module 1: Introduction to CSS and Basic Syntax

• 1.1 What is CSS?
• 1.2 How CSS Works with HTML
• 1.3 Basic CSS Syntax and Selectors
• 1.4 Basic Styling
• 1.5 Hands-On Practice: Styling a Simple Web Page

Module 2: CSS Layouts and Positioning

• 2.1 Understanding the CSS Box Model
• 2.2 Display and Visibility
• 2.3 Positioning in CSS
• 2.4 Flexbox Basics
• 2.5 Hands-On Project: Building a Responsive Layout with Flexbox

Module 3: Styling Text and Images

• 3.1 Advanced Text Styling
• 3.2 CSS Units and Responsive Typography
• 3.3 Styling Links and Buttons
• 3.4 Styling and Positioning Images
• 3.5 Hands-On Project: Creating a Card Layout

Module 4: Advanced Layouts with Grid and Media Queries

• 4.1 CSS Grid Basics
• 4.2 Advanced Grid Techniques
• 4.3 Introduction to Media Queries
• 4.4 Responsive Design with Flexbox and Grid
• 4.5 Hands-On Project: Creating a Responsive Web Page

Module 5: Animations, Transitions, and CSS Best Practices

• 5.1 CSS Transitions and Transformations
• 5.2 CSS Keyframe Animations
• 5.3 CSS Variables and Reusability
• 5.4 CSS Best Practices
• 5.5 Hands-On Project: Building an Interactive Web Page with Animations

Module 6: CSS Variables and Functions

• 6.1 Introduction to CSS Variables (Custom Properties)
• 6.2 Practical Uses of CSS Variables
• 6.3 CSS Functions for Color Manipulation
• 6.4 Mathematical CSS Functions
• 6.5 Geometric Transformation Functions
• 6.6 CSS Functions for Images and URLs
• 6.7 Special Utility Functions
• 6.8 Custom Functions in CSS?
• 6.9 Hands-On Project: Creating a Theme Switcher with Variables and Functions

Module 1: Introduction to CSS and Basic Syntax

Overview: This foundational module introduces students to the basics of CSS, including its purpose, how it works with HTML, and how to create simple styles. We’ll cover fundamental syntax, selectors, and core styling properties. By the end, students will have hands-on experience styling a simple web page.

1.1 What is CSS?

• Definition: CSS stands for Cascading Style Sheets and is used to style and layout web pages.
• Purpose: Explain why CSS is important for web development (e.g., visual design, responsiveness, user experience).
• How CSS Works with HTML: Describe how CSS is applied to HTML elements to style a page.

1.2 How CSS Works with HTML

• Internal CSS: Applying styles directly within an HTML file using the <style> tag.
• Example:
  html ¨K9K
• External CSS: Linking an external CSS file with the <link> tag in HTML.
• Example:
  html <link rel="stylesheet" href="styles.css">
• Inline CSS: Adding styles directly within an HTML element using the style attribute (not recommended for larger projects).
• Example:
  html ¨K10K

1.3 Basic CSS Syntax and Selectors

• CSS Syntax Structure: Explain the structure of CSS rules: selector, property, and value.
• Example:
  css selector { property: value; }
• Selectors Overview: Common CSS selectors and how they’re used to target HTML elements:
• Type Selector: Targets HTML tags directly.
  • Example: p { color: red; }
• Class Selector: Targets elements with a specific class.
  • Example: .button { background-color: blue; }
• ID Selector: Targets elements with a specific ID.
  • Example: #header { font-size: 24px; }
• Attribute Selector: Targets elements based on attributes.
  • Example: [type="text"] { border: 1px solid gray; }

1.4 Basic Styling Properties

• Text Styling:
• color: Sets the text color.
• font-size: Changes the text size.
• font-family: Applies a font type to text.
• font-weight: Adjusts the thickness (boldness) of text.
• text-align: Aligns text within an element.
• Examples:
  css h1 { color: darkblue; font-family: Arial, sans-serif; text-align: center; }
• Background Styling:
• background-color: Adds color behind an element.
• background-image: Applies an image background.
• Examples:
  css body { background-color: #f0f0f0; } .hero { background-image: url('background.jpg'); }
• Spacing and Box Model:
• margin: Creates space outside an element’s border.
• padding: Adds space inside an element’s border.
• border: Defines a border around an element.
• Examples:
  css .container { margin: 20px; padding: 15px; border: 1px solid #ccc; }

1.5 Hands-On Practice: Styling a Simple Web Page

Objective: Apply the skills learned to style a basic webpage.

1. Step 1: Set Up HTML Structure

• Create an HTML file with a basic structure, including a header, main content, and footer.

1. Step 2: Apply Basic Styles

• Link an external CSS file and style each section.
• Add a color scheme, fonts, and spacing to give the page a cohesive look.

1. Step 3: Practice Selectors

• Use different selectors to target specific elements, classes, and IDs.
• Practice with pseudo-classes like :hover to add interactive styles.

1. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simple Web Page</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <header>
       <h1>Welcome to My Website</h1>
     </header>
     <main>
       <p>This is a simple web page created to practice CSS basics.</p>
       <button class="cta-button">Learn More</button>
     </main>
     <footer>
       <p>&copy; 2024 My Website</p>
     </footer>
   </body>
   </html>

CSS:

   /* Basic styling */
   body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f0f8ff;
   }

   header {
     background-color: #333;
     color: white;
     text-align: center;
     padding: 20px;
   }

   main {
     padding: 20px;
   }

   .cta-button {
     background-color: #3498db;
     color: white;
     border: none;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
   }

   .cta-button:hover {
     background-color: #2980b9;
   }

   footer {
     background-color: #333;
     color: white;
     text-align: center;
     padding: 10px;
     font-size: 14px;
   }

Module 2: CSS Layouts and Positioning

Overview: This module dives into essential CSS concepts for arranging and positioning elements on a webpage. Students will explore the box model, display properties, and basic layout techniques with Flexbox. By the end, students will be able to create a responsive layout with Flexbox, a fundamental skill for modern web design.

2.1 Understanding the CSS Box Model

• What is the Box Model?: Every HTML element is considered a rectangular box, and the box model describes how its size and spacing are determined.
• Parts of the Box Model:
• Content: The actual text, image, or other content inside the element.
• Padding: Space between the content and the border.
• Border: The outline surrounding the padding and content.
• Margin: Space outside the border, separating the element from other elements.
• Applying the Box Model: Using padding, border, and margin properties to control element spacing.
• Example:
  css .box { padding: 10px; border: 2px solid #333; margin: 15px; }

2.2 Display and Visibility

• Display Property: Determines how elements are displayed on the page.
• block: The element takes up the full width available.
• inline: The element takes up only as much space as necessary.
• inline-block: Combines block-level spacing with inline behavior.
• none: Removes the element from the document layout.
• Example:
  css .inline-item { display: inline-block; margin: 5px; }
• Visibility Property:
• visible: The element is visible.
• hidden: The element is invisible but still occupies space in the layout.
• Example:
  css .hidden-item { visibility: hidden; }

2.3 Positioning in CSS

• Static Positioning (default): Elements appear in the normal document flow.
• Relative Positioning: Moves an element relative to its original position without affecting other elements.
• Example:
  css .relative-item { position: relative; top: 10px; left: 5px; }
• Absolute Positioning: Positions an element relative to its nearest positioned ancestor or the document body if none exists.
• Example:
  css .absolute-item { position: absolute; bottom: 0; right: 0; }
• Fixed Positioning: Keeps an element fixed relative to the viewport, so it doesn’t move when scrolling.
• Example:
  css .fixed-header { position: fixed; top: 0; width: 100%; }
• Sticky Positioning: Behaves like relative positioning until a specific scroll position is reached, then acts like fixed.
• Example:
  css .sticky-sidebar { position: sticky; top: 20px; }

2.4 Flexbox Basics

• Introduction to Flexbox: A layout model that enables easy arrangement and alignment of items within a container.
• Setting up a Flex Container:
• display: flex;: Enables flex layout on the container.
• Example:
  css .flex-container { display: flex; }
• Flex Properties for Containers:
• flex-direction: Defines the main axis as row, row-reverse, column, or column-reverse.
• justify-content: Aligns items along the main axis (flex-start, center, space-between).
• align-items: Aligns items along the cross-axis (flex-start, center, stretch).
• Example:
  css .flex-container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }
• Flex Properties for Items:
• flex-grow: Controls the growth of a flex item.
• flex-shrink: Controls how an item shrinks when space is limited.
• flex-basis: Defines the initial size of a flex item.
• Example:
  css .flex-item { flex-grow: 1; flex-basis: 200px; }

2.5 Hands-On Project: Building a Responsive Layout with Flexbox

Objective: Create a simple, responsive web page layout with Flexbox.

1. Step 1: Define the HTML Structure

• Set up a basic page structure with a header, navigation, main content, sidebar, and footer.

1. Step 2: Set Up the Flex Container

• Apply display: flex; to the main layout container and use Flexbox properties for alignment.

1. Step 3: Use Flex Properties for Responsiveness

• Adjust properties like flex-grow and flex-basis to create a flexible layout that adapts to screen size.

1. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Responsive Flexbox Layout</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <header>Header</header>
     <div class="container">
       <nav>Navigation</nav>
       <main>Main Content</main>
       <aside>Sidebar</aside>
     </div>
     <footer>Footer</footer>
   </body>
   </html>

CSS:

   /* Basic styling */
   body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
   }

   header, footer {
     background-color: #333;
     color: white;
     text-align: center;
     padding: 20px;
   }

   .container {
     display: flex;
     flex-wrap: wrap;
   }

   nav, main, aside {
     padding: 20px;
     border: 1px solid #ddd;
   }

   nav {
     flex: 1 1 100%;
     background-color: #f8f8f8;
   }

   main {
     flex: 2 1 60%;
     background-color: #e8e8e8;
   }

   aside {
     flex: 1 1 40%;
     background-color: #f1f1f1;
   }

   footer {
     background-color: #333;
     color: white;
   }

   /* Responsive Design */
   @media (max-width: 600px) {
     nav, main, aside {
       flex: 1 1 100%;
     }
   }

Module 3: CSS Grid Layout

Overview: In this module, students will learn how to use CSS Grid, a powerful layout system that allows for creating complex and responsive layouts with ease. This module covers basic grid concepts, including defining rows and columns, placing items in specific grid areas, and making layouts responsive. By the end of this module, students will be able to create dynamic grid-based layouts for web pages.

3.1 Introduction to CSS Grid

• What is CSS Grid?: CSS Grid is a two-dimensional layout system, meaning it can handle both rows and columns.
• Setting Up a Grid Container:
• display: grid;: Turns an element into a grid container.
• Example:
  css .grid-container { display: grid; }

3.2 Defining Grid Columns and Rows

• Using grid-template-columns and grid-template-rows:
• Sets the number of columns and rows in the grid and their sizes.
• Example:
  css .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* Three columns */ grid-template-rows: auto 100px; /* Two rows */ }
• Units of Measurement:
• px: Fixed pixel values.
• %: Relative to the container.
• fr: Fractional unit, distributing available space.
• Example of Fractions:
  css .grid-container { grid-template-columns: 1fr 1fr 2fr; }

3.3 Placing Grid Items

• Grid Line Numbers: Placing items in specific columns or rows using line numbers.
• Example:
  css .grid-item { grid-column: 1 / 3; /* Spans across columns 1 to 3 */ grid-row: 2 / 4; /* Spans rows 2 to 4 */ }
• Using grid-area for Naming and Positioning:
• Define grid areas with names, then assign elements to those areas.
• Example: .grid-container { grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }

3.4 Advanced Grid Properties

• grid-gap, row-gap, and column-gap:
• Adds spacing between rows and columns.
• Example:
  css .grid-container { grid-gap: 10px; }
• Grid Auto-Placement:
• grid-auto-rows and grid-auto-columns: Automatically adds rows or columns if needed.
• Example:
  css .grid-container { grid-auto-rows: 100px; }

3.5 Responsive Design with Grid

• Using Media Queries:
• Adjust the grid layout for different screen sizes.
• Example:
  css @media (max-width: 768px) { .grid-container { grid-template-columns: 1fr; } }
• Minmax and Autofit Functions:
• minmax(): Defines a range for grid items to adapt.
• auto-fit and auto-fill: Automatically fits columns within the available space.
• Example:
  css .grid-container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

3.6 Hands-On Project: Creating a Responsive Web Layout with CSS Grid

Objective: Use CSS Grid to create a fully responsive layout with a header, sidebar, main content, and footer that adjusts automatically for different screen sizes.

1. Step 1: Set Up the HTML Structure

• Create a basic HTML layout with sections for header, sidebar, main content, and footer.

1. Step 2: Apply CSS Grid to Define the Layout

• Use grid-template-areas and grid-gap for spacing and layout structure.

1. Step 3: Make the Layout Responsive

• Add media queries and minmax to make the grid responsive.

1. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS Grid Responsive Layout</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <header class="header">Header</header>
     <aside class="sidebar">Sidebar</aside>
     <main class="content">Main Content</main>
     <footer class="footer">Footer</footer>
   </body>
   </html>

CSS:

   .grid-container {
     display: grid;
     grid-template-areas:
       "header header header"
       "sidebar content content"
       "footer footer footer";
     grid-gap: 10px;
   }

   .header {
     grid-area: header;
     background-color: #333;
     color: white;
     text-align: center;
     padding: 10px;
   }

   .sidebar {
     grid-area: sidebar;
     background-color: #f4f4f4;
     padding: 10px;
   }

   .content {
     grid-area: content;
     background-color: #e8e8e8;
     padding: 10px;
   }

   .footer {
     grid-area: footer;
     background-color: #333;
     color: white;
     text-align: center;
     padding: 10px;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
     .grid-container {
       grid-template-areas:
         "header"
         "content"
         "sidebar"
         "footer";
     }
   }

Module 4: CSS Flexbox Layout

Overview: This module introduces CSS Flexbox, a one-dimensional layout model designed for arranging items in rows or columns, with flexible alignment and spacing. Students will learn how to create flexible and responsive layouts using Flexbox properties. By the end of this module, students will be able to create layouts that adapt seamlessly to different screen sizes.

4.1 Introduction to CSS Flexbox

• What is Flexbox?: CSS Flexbox (Flexible Box Layout) is a layout model designed to align and distribute items within a container, either horizontally or vertically.
• Defining a Flex Container:
• display: flex;: Turns an element into a flex container, making all direct children flex items.
• Example:
  css .flex-container { display: flex; }

4.2 Flex Direction and Wrapping

• flex-direction: Specifies the direction of the flex items.
• Values: row, row-reverse, column, column-reverse.
• Example:
  css .flex-container { flex-direction: row; }
• flex-wrap: Controls whether flex items should wrap onto multiple lines.
• Values: nowrap, wrap, wrap-reverse.
• Example:
  css .flex-container { flex-wrap: wrap; }

4.3 Justifying and Aligning Content

• justify-content: Aligns items along the main axis (horizontal by default).
• Values: flex-start, flex-end, center, space-between, space-around, space-evenly.
• Example:
  css .flex-container { justify-content: space-between; }
• align-items: Aligns items along the cross axis (vertical by default).
• Values: flex-start, flex-end, center, stretch, baseline.
• Example:
  css .flex-container { align-items: center; }
• align-content: Controls the alignment of multiple lines within the container when there is extra space.
• Values: flex-start, flex-end, center, space-between, space-around, stretch.
• Example:
  css .flex-container { align-content: space-around; }

4.4 Flex Item Properties

• flex-grow: Defines how much space an item should take relative to others when there is extra space.
• Example:
  css .flex-item { flex-grow: 2; }
• flex-shrink: Defines how much an item should shrink relative to others when there is not enough space.
• Example:
  css .flex-item { flex-shrink: 1; }
• flex-basis: Specifies the initial size of a flex item before any space distribution.
• Example:
  css .flex-item { flex-basis: 200px; }
• flex: A shorthand for setting flex-grow, flex-shrink, and flex-basis together.
• Example:
  css .flex-item { flex: 1 1 100px; }

4.5 Order and Alignment

• order: Specifies the order of flex items. By default, all items have an order of 0.
• Example:
  css .flex-item { order: 1; }
• align-self: Allows individual items to override the align-items property of the flex container.
• Values: auto, flex-start, flex-end, center, baseline, stretch.
• Example:
  css .flex-item { align-self: center; }

4.6 Responsive Design with Flexbox

• Using Media Queries: Flexbox can adapt to different screen sizes with media queries.
• Example:
  css @media (max-width: 768px) { .flex-container { flex-direction: column; } }

4.7 Hands-On Project: Building a Responsive Navigation Bar

Objective: Use Flexbox to create a responsive navigation bar that adjusts layout based on screen size.

1. Step 1: HTML Structure for Navigation

• Create a basic navigation bar structure with links.

1. Step 2: Apply Flexbox for Horizontal Layout

• Use display: flex; for horizontal alignment.

1. Step 3: Make the Navbar Responsive

• Adjust the layout to stack vertically on smaller screens.

1. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Responsive Flexbox Navbar</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <nav class="navbar">
       <a href="#home" class="nav-item">Home</a>
       <a href="#about" class="nav-item">About</a>
       <a href="#services" class="nav-item">Services</a>
       <a href="#contact" class="nav-item">Contact</a>
     </nav>
   </body>
   </html>

CSS:

   .navbar {
     display: flex;
     justify-content: space-between;
     background-color: #333;
     padding: 10px;
   }

   .nav-item {
     color: white;
     text-decoration: none;
     padding: 10px;
   }

   /* Hover Effect */
   .nav-item:hover {
     background-color: #555;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
     .navbar {
       flex-direction: column;
       align-items: center;
     }
     .nav-item {
       padding: 15px;
     }
   }

Module 5: CSS Grid Layout

Overview: In this module, we’ll dive into CSS Grid, a powerful two-dimensional layout system that allows for the precise placement of items both horizontally and vertically. Students will learn how to create complex, responsive layouts with ease using grid properties. By the end, they’ll be able to design web pages with intricate and flexible layouts that adapt to different screen sizes.

5.1 Introduction to CSS Grid

• What is CSS Grid?: CSS Grid Layout is a two-dimensional system that allows for both rows and columns, giving more control over layout than Flexbox, which is one-dimensional.
• Setting Up a Grid Container:
• display: grid;: Establishes a grid container, making all direct children grid items.
• Example:
  css .grid-container { display: grid; }

5.2 Defining Rows and Columns

• grid-template-columns and grid-template-rows: Define the number and size of rows and columns.
• Values: Can be specified in pixels, percentages, or using fr units (fractional units).
• Example: .grid-container { grid-template-columns: 1fr 2fr; grid-template-rows: 100px 200px; }
• repeat() Function: A shorthand for defining repeating row or column sizes.
• Example:
  css .grid-container { grid-template-columns: repeat(3, 1fr); }

5.3 Placing Items in the Grid

• grid-column and grid-row: Specify which column and row a grid item should occupy.
• Syntax: grid-column: start / end;
• Example: .grid-item { grid-column: 1 / 3; grid-row: 2 / 4; }
• grid-area: A shorthand property to place an item in a specific grid area, or assign it a name for use in grid-template-areas.
• Example:
  css .grid-item { grid-area: header; }

5.4 Sizing and Alignment

• grid-auto-rows and grid-auto-columns: Control the default size for rows and columns not explicitly defined.
• Example: .grid-container { grid-auto-rows: 150px; }
• Alignment Properties:
• justify-items: Aligns items horizontally within each cell.
• align-items: Aligns items vertically within each cell.
• justify-content and align-content: Control alignment of the grid itself within the container.
• Example:
  css .grid-container { justify-items: center; align-items: center; }

5.5 Advanced Grid Features

• Named Grid Areas with grid-template-areas:
• Define layout by assigning names to grid areas, making it easier to visualize.
• Example: .grid-container { grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; }
• minmax() Function: Allows flexible sizing within a specified range.
• Example: .grid-container { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
• auto-fit and auto-fill: Automatically place grid items based on available space, allowing for responsive layouts.
• Example:
  css .grid-container { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

5.6 Hands-On Project: Building a Responsive Photo Gallery

Objective: Use CSS Grid to create a photo gallery that adjusts the number of columns based on screen size.

1. Step 1: HTML Structure

• Create a basic structure with images as grid items.

1. Step 2: Applying CSS Grid

• Use CSS Grid to define rows and columns for the gallery.

1. Step 3: Making It Responsive

• Adjust the number of columns automatically with auto-fit and minmax.

1. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Responsive CSS Grid Gallery</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <div class="gallery">
       <img src="photo1.jpg" alt="Photo 1">
       <img src="photo2.jpg" alt="Photo 2">
       <img src="photo3.jpg" alt="Photo 3">
       <img src="photo4.jpg" alt="Photo 4">
       <!-- More photos -->
     </div>
   </body>
   </html>

CSS:

   .gallery {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }

   .gallery img {
     width: 100%;
     height: auto;
     border-radius: 5px;
   }

Module 6: CSS Variables and Functions

Overview: In this module, students will learn about CSS variables, also known as custom properties, and CSS functions. CSS variables allow for easier customization and maintenance of styles, while CSS functions enable dynamic styling capabilities like calculations, color adjustments, and transitions. By the end of this module, students will be able to use variables and functions to create modular, scalable, and reusable CSS.

6.1 Introduction to CSS Variables

• What are CSS Variables?: CSS variables (custom properties) allow you to store values in reusable variables within CSS. They are defined with -- prefix and can be accessed using the var() function.
• Defining and Using CSS Variables:
• Example: :root { --primary-color: #3498db; --font-size-large: 2rem; } body { background-color: var(--primary-color); font-size: var(--font-size-large); }
• Scope of Variables:
• Variables defined in :root are global and can be accessed throughout the stylesheet.
• Variables can also be scoped to specific elements.

6.2 CSS Functions Overview

• Purpose of CSS Functions: CSS functions allow you to perform calculations, manipulate colors, and dynamically change styles based on conditions or measurements.

6.3 Common CSS Functions

1. Color Functions:

• rgb() and rgba(): Define colors in terms of red, green, blue, and alpha (opacity).
  • Example:
    css color: rgba(52, 152, 219, 0.8);
• hsl() and hsla(): Define colors in terms of hue, saturation, lightness, and alpha.
  • Example:
    css background-color: hsl(210, 100%, 50%);
• color-mod() (Experimental): Allows for color modifications, such as lightening or darkening colors.

1. calc() Function:

• Purpose: Performs mathematical calculations within CSS.
• Syntax: calc(expression).
• Example:
  css width: calc(100% - 50px); font-size: calc(var(--font-size-large) * 1.5);

1. clamp() Function:

• Purpose: Sets a value within a defined range, helpful for responsive design.
• Syntax: clamp(min, preferred, max).
• Example:
  css font-size: clamp(1rem, 2vw, 2rem);

1. Transform Functions:

• translate(): Moves elements along X and/or Y axes.
  • Example:
    css transform: translate(10px, 20px);
• scale(): Scales elements up or down.
  • Example:
    css transform: scale(1.2);
• rotate(): Rotates elements by a specified degree.
  • Example:
    css transform: rotate(45deg);

1. min(), max(), and fit-content() Functions:

• min(): Sets a value to the smallest of its arguments.
• max(): Sets a value to the largest of its arguments.
• fit-content(): Adjusts to fit the content, useful for setting dynamic widths or heights.
• Example:
  css width: min(100%, 300px);

6.4 Combining Variables and Functions for Dynamic Styling

• Using Variables with calc(): Combine variables and functions for flexible, scalable styling.
• Example: :root { --base-padding: 10px; } .container { padding: calc(var(--base-padding) * 2); }
• Color Manipulation with Variables and hsl():
• By adjusting the lightness or saturation in hsl() colors, you can create color schemes dynamically.
• Example: :root { --primary-hue: 210; } .header { background-color: hsl(var(--primary-hue), 100%, 50%); } .footer { background-color: hsl(var(--primary-hue), 100%, 30%); }

6.5 Practical Applications of Variables and Functions

1. Theming with CSS Variables: Define a set of variables to create consistent themes.

• Example: :root { --background-light: #f5f5f5; --background-dark: #333; --text-color: #333; } body.light-theme { background-color: var(--background-light); color: var(--text-color); } body.dark-theme { background-color: var(--background-dark); color: var(--background-light); }

1. Responsive Font Scaling with clamp(): Use clamp() to create responsive typography that adapts across screen sizes.

• Example:
  css h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }

6.6 Hands-On Project: Dynamic Theming with CSS Variables

Objective: Create a simple web page with a light and dark theme switcher using CSS variables.

1. Step 1: Define Variables in the :root Selector for both themes.
2. Step 2: Create the HTML Structure with a button to toggle themes.
3. Step 3: Add JavaScript to Switch Themes by toggling classes on the body.
4. Example Project Code: HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Theme Switcher</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body class="light-theme">
     <button id="theme-toggle">Toggle Theme</button>
     <h1>Dynamic Theming with CSS Variables</h1>
   </body>
   http://script.js
   </html>

CSS:

   :root {
     --bg-color-light: #ffffff;
     --bg-color-dark: #333333;
     --text-color-light: #333333;
     --text-color-dark: #ffffff;
   }

   body.light-theme {
     background-color: var(--bg-color-light);
     color: var(--text-color-light);
   }

   body.dark-theme {
     background-color: var(--bg-color-dark);
     color: var(--text-color-dark);
   }

   button {
     padding: 10px;
     background-color: var(--bg-color-dark);
     color: var(--text-color-dark);
     border: none;
     cursor: pointer;
   }

JavaScript:

   const toggleButton = document.getElementById('theme-toggle');
   toggleButton.addEventListener('click', () => {
     document.body.classList.toggle('dark-theme');
     document.body.classList.toggle('light-theme');
   });