Styling Text in HTML

Styling text in HTML is done using CSS. Here are some common ways to style text:

1. Change Font Size:

<p style="font-size: 20px;">This text is larger than usual.</p>

In this example, the `font-size` property sets the size of the text in pixels.

2. Change Font Color:

<p style="color: red;">This text is red.</p>

Use the `color` property to change the color of the text.

3. Bold, Italics, and Underline:

<p><b>This is bold text.</b></p>
<p><i>This is italic text.</i></p>
<p><u>This is underlined text.</u></p>

You can use and the less then then (b) and then greater the for bold, and the less then then (i) and then greater the for italics, and the less then then (u) and then greater then for underline.

Resizing Elements (Headers, Images)

Resizing elements like headers and images is essential for making your page responsive and accessible. Here’s how you do it:

1. Resizing Headers:

<h1 style="font-size: 40px;">Large Header</h1>
<h2 style="font-size: 30px;">Medium Header</h2>

You can use the `font-size` property to resize your headers to any size you want.

2. Resizing Images:

<img src="image.jpg" style="width: 300px; height: auto;" alt="A resized image">

The `width` property controls how wide the image is. Using `height: auto;` keeps the image’s aspect ratio intact.

Working with Links

Links are an important part of HTML. Here’s how you can use them:

1. Simple Link:

<a href="https://example.com">Visit Example.com</a>

Use the `a` tag to create a link. The `href` attribute defines the destination of the link.

2. Open Link in a New Tab:

<a href="https://example.com" target="_blank">Open in New Tab</a>

The `target="_blank"` attribute opens the link in a new browser tab.

Adding Tables

Tables are useful for displaying structured data. Here’s how to create a simple table:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

The `table` tag creates a table, `tr` defines a row, `th` defines a header cell, and `td` defines a standard cell.

Creating Forms

Forms allow users to submit data to a server. Here’s a basic form example:

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

The `action` attribute tells the form where to send the data, and the `method="POST"` sends the data in the background.

Embedding Media (Audio/Video)

You can embed audio and video using the following tags:

1. Embed Audio:

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

2. Embed Video:

<video width="320" height="240" controls>
    <source src="video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Both the `audio` and `video` tags allow you to embed media directly into your HTML page. The `controls` attribute provides play/pause controls.

Understanding Semicolons and Colons in CSS

In CSS, semicolons and colons are critical components of the syntax. Here’s how they work:

1. Semicolons (`;`)

Semicolons are used to **separate** different CSS declarations. They mark the end of a statement, just like periods in sentences.

h1 {
    color: red; /* This changes the text color */
    font-size: 32px; /* This changes the font size */
}

In this example, each CSS property (e.g., `color`, `font-size`) is followed by a semicolon to signify the end of the declaration. Every declaration block inside `{}` uses semicolons to separate different properties.

2. Colons (`:`)

Colons are used to **assign a value** to a CSS property. They separate the property from its value. For example:

p {
    text-align: center; /* Text is centered */
    color: blue; /* Text color is blue */
}

The colon comes after the property (`text-align`) and before the value (`center`). It’s essential to use colons properly to ensure your CSS works.

Common Mistakes:

• Forgetting the semicolon at the end of a line (it won’t break your CSS but can cause confusion).
• Using the wrong syntax like `h1` instead of `h1` in CSS (HTML tags don’t need angle brackets in CSS).

Making Comments in HTML and CSS

Comments are crucial in both HTML and CSS for making your code more readable and maintainable. Here’s how to add comments in both:

1. HTML Comments

HTML comments help you annotate your code without affecting how the browser renders the page. They’re invisible to users.

<!-- This is an HTML comment -->
<p>This text is visible.</p>

The comment is written inside `<!-- -->`. Anything between these symbols will be ignored by the browser.

2. CSS Comments

In CSS, comments allow you to explain the styles without affecting the layout. CSS comments are written like this:

/* This is a CSS comment */
body {
    background-color: #f4f4f4; /* Light gray background */
}

In CSS, comments are enclosed between `/* */`. They can span multiple lines and are essential for leaving notes, especially in complex stylesheets.

Best Practices for Comments:

• Use comments to explain why you added a particular style or structure.
• Don't overuse comments for obvious things (e.g., “this sets the color” for `color: red;`).

Understanding HTML Attributes

HTML attributes provide additional information about an element. They are always included in the opening tag and usually consist of a name/value pair, like this:

<element attribute="value">...</element>

Common HTML Attributes:

• href: Used with `a` to specify the destination of a link.
• src: Used with `img` to specify the image file path.
• alt: Used with `img` to provide alternative text for an image.
• id: Used to uniquely identify an element on a page.
• class: Used to classify an element for styling with CSS.
• style: Used to apply inline CSS to an element.

Example:

<a href="https://example.com" target="_blank">Visit Example.com</a>
<img src="image.jpg" alt="A beautiful scenery">

In this example, the `a` element uses the `href` attribute to link to another page, and the `img` element uses `src` and `alt` to display an image with descriptive text.

Using ID and Class in HTML& CSS

In HTML, **ID** and **class** are used to uniquely identify and style elements. Here’s how they work:

1. The `id` Attribute:

The `id` attribute gives an element a unique identifier that can be referenced by CSS and JavaScript. No two elements should have the same `id` on a page.

<div id="header">This is the header</div>

In CSS, you can style this element using `#header`:

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

2. The `class` Attribute:

The `class` attribute allows you to apply the same styles to multiple elements. Unlike `id`, multiple elements can share the same class.

<p class="highlight">Important text.</p>
<p class="highlight">Another important text.</p>

In CSS, you can style all elements with the class `highlight` using a period (`.`) before the class name:

.highlight {
    color: red;
    font-weight: bold;
}

Best Practices:

• Use `id` when you want to target a single, unique element.
• Use `class` when you want to apply the same style to multiple elements.
• Avoid mixing too many `id`s and `class`es for maintainability.

Positioning Elements with CSS

CSS provides several ways to position elements on a webpage. Here are the most common positioning methods:

1. Static Positioning (Default):

By default, elements are positioned **statically**, which means they follow the normal flow of the document.

p {
    position: static; /* This is the default */
}

2. Relative Positioning:

An element positioned **relatively** is moved relative to its normal position in the document flow.

p {
    position: relative;
    top: 10px; /* Moves the element down by 10px */
    left: 20px; /* Moves the element right by 20px */
}

3. Absolute Positioning:

An element with **absolute positioning** is positioned relative to its nearest positioned ancestor (not relative to the document flow).

div {
    position: absolute;
    top: 50px;
    right: 20px;
}

4. Fixed Positioning:

Elements with **fixed positioning** are positioned relative to the browser window. They stay in the same place when you scroll.

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

5. Flexbox for Advanced Layouts:

**Flexbox** is a modern CSS layout model that allows you to easily position and align elements. Here’s a quick example:

div {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}

Advanced HTML Forms

Forms are one of the most important elements in HTML. They allow users to submit data. Let's explore some advanced form elements:

1. Text Input and Labels:

Text input fields allow users to type in information. You should always use labels to describe them:

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
</form>

In this example, the `for` attribute in `label` matches the `id` of the input element. The `required` attribute makes the field mandatory.

2. Dropdown Menus (`select`):

Dropdowns allow users to select one option from a list:

<label for="car">Choose a car:</label>
<select id="car" name="car">
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
</select>

3. Radio Buttons and Checkboxes:

Radio buttons allow a user to select only one option from a group, while checkboxes allow multiple selections:

<!-- Radio Buttons -->
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

<!-- Checkboxes -->
<label><input type="checkbox" name="subscribe" value="yes"> Subscribe to Newsletter</label>

Radio buttons and checkboxes work similarly, but radios enforce a single choice while checkboxes allow multiple.

4. File Uploads:

Let users upload files using the `` tag:

<label for="file-upload">Upload a file:</label>
<input type="file" id="file-upload" name="file-upload">

Best Practices for Forms:

• Use `label` elements to associate labels with form fields.
• Always specify a `name` attribute for form inputs so that the data is sent correctly.
• Validate form inputs with attributes like `required`, `minlength`, `maxlength`, and `pattern`.

Responsive Design with Media Queries

Responsive design ensures your webpage looks great on any device, whether it’s a phone, tablet, or desktop. Media queries in CSS help achieve this. Here's how:

1. Basic Media Query:

Media queries allow you to apply styles based on the size of the viewport (the browser window). For example:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

This media query applies the background color only if the browser window is 600 pixels wide or less (i.e., mobile devices).

2. Different Styles for Tablets and Desktops:

You can target various screen sizes for different devices:

@media (max-width: 768px) {
    body {
        background-color: lightgreen;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        background-color: lightyellow;
    }
}

In this example, screens with widths of 768px or less (tablets) have one background color, and wider screens (desktops) have another.

Common Breakpoints:

• Mobile (phones): max-width 600px
• Tablet: min-width 601px, max-width 768px
• Desktop: min-width 769px and up

Responsive Best Practices:

• Always design with **mobile-first** in mind. Start with styles for smaller devices and build up.
• Use **flexbox** and **grid** layouts for flexible designs that adjust with screen size.
• Test your designs on multiple devices to ensure they work everywhere.

CSS Grid: Advanced Layouts

CSS Grid is a powerful layout system that allows you to create complex, responsive layouts with ease. Here's how it works:

1. Defining a Grid Container:

Start by defining a grid container. This element will hold your grid items:

div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns */
    grid-gap: 20px; /* Adds spacing between grid items */
}

Here, we use `grid-template-columns` to create three equal-width columns. The `1fr` unit means “one fraction of the available space.”

2. Placing Grid Items:

You can place items into specific rows and columns using `grid-column` and `grid-row`:

div.item {
    grid-column: 1 / 3; /* Spans the first two columns */
    grid-row: 1; /* Stays in the first row */
}

In this example, the item spans the first two columns but only occupies the first row.

3. Auto-Placement of Grid Items:

By default, grid items are placed in the next available cell. You can control this with auto-placement:

div {
    grid-auto-flow: dense; /* Fills in gaps in the grid automatically */
}

Grid Layout Best Practices:

• Use **grid** for more complex layouts that require precise control over rows and columns.
• Combine **flexbox** and **grid** for responsive designs.
• Use **grid-template-areas** for named grid areas that make layouts easier to understand.

CSS Transitions and Animations

CSS transitions and animations allow you to create smooth, dynamic effects on your website. Let's break them down:

1. CSS Transitions:

**Transitions** allow changes to CSS properties to occur smoothly over a given duration. For example, you can smoothly change a button's background color when hovered:

a {
    background-color: #ffa500;
    transition: background-color 0.3s ease; /* 0.3s transition */
}

a:hover {
    background-color: #ff4500; /* Changes color on hover */
}

Here, the `transition` property makes the background color change smoothly over 0.3 seconds when the user hovers over the link.

2. CSS Animations:

**Animations** give you more control over how elements change over time by using keyframes. Here's an example of a bounce animation:

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

div {
    animation: bounce 2s infinite;
}

In this example, the element will "bounce" up and down, looping forever (`infinite`). The `@keyframes` rule defines how the element behaves at each stage of the animation.

Best Practices for Animations:

• Use transitions for simple, subtle effects (like hover changes).
• Use animations for more complex, ongoing effects (like loading animations or visual emphasis).
• Keep animations smooth and not too overwhelming for the user.

Using Pseudo-Classes and Pseudo-Elements

Pseudo-classes and pseudo-elements allow you to style parts of your page in ways that aren’t possible with standard CSS. Here’s a breakdown:

1. Pseudo-Classes:

Pseudo-classes apply styles to an element based on its state. For example:

a:hover {
    color: #ff4500; /* Change the link color when hovered */
}

input:focus {
    border-color: #00ff00; /* Highlight the border when input is focused */
}

Common pseudo-classes include `:hover` (when an element is hovered), `:focus` (when an input is focused), and `:nth-child()` (for styling specific children in a list or table).

2. Pseudo-Elements:

Pseudo-elements target parts of elements (such as the first letter of a paragraph or content before an element). Here are two examples:

::before and ::after:

These pseudo-elements insert content before or after an element:

p::before {
    content: "👉 "; /* Adds an emoji before the paragraph */
}

p::after {
    content: " 🚀"; /* Adds a rocket emoji after the paragraph */
}

These are great for adding extra visual elements to your design without needing additional HTML.

Styling First Letters or Lines:

You can use `::first-letter` or `::first-line` to style specific parts of a block of text:

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #ffa500;
}

This example makes the first letter of the paragraph larger and bolded.

CSS Transformations

CSS transformations allow you to change the size, position, and rotation of elements. Here are some examples:

1. Rotating Elements:

You can rotate an element using the `transform` property:

div {
    transform: rotate(45deg); /* Rotates the element by 45 degrees */
}

The value `45deg` indicates the angle in degrees. You can also rotate elements by negative values for a counter-clockwise rotation.

2. Scaling Elements:

You can change the size of an element with the `scale()` function:

div {
    transform: scale(1.5); /* Increases the size by 150% */
}

The `scale()` function increases or decreases the size of an element based on the given factor. `1.5` makes it 150% of its original size, while `0.5` would shrink it to 50% of its size.

3. Skewing Elements:

You can skew (distort) elements along the X or Y axis:

div {
    transform: skewX(20deg); /* Skews the element along the X-axis */
}

This will skew the element by 20 degrees along the horizontal axis. You can also use `skewY()` for vertical skewing.

Combining Transformations:

You can apply multiple transformations at once:

div {
    transform: rotate(30deg) scale(1.2);
}

Here, the element is rotated by 30 degrees and scaled up by 120%. Transformations are applied in the order they are written.

Building Responsive Layouts with CSS Flexbox

**Flexbox** is a layout model in CSS that allows you to easily position and align items within a container. It’s great for building responsive layouts without needing to use floats or complex positioning. Here’s how it works:

1. The Flex Container:

Start by defining a flex container. Flexbox will only apply to the direct children of this container:

div.container {
    display: flex;
    justify-content: space-between; /* Distributes items with space between them */
    align-items: center; /* Aligns items vertically in the center */
}

The `display: flex;` makes the container a flexbox, and its children become flex items. The `justify-content` property distributes the items horizontally, and `align-items` controls their vertical alignment.

2. Flex Direction:

By default, flex items are laid out in a row. You can change this using the `flex-direction` property:

div.container {
    flex-direction: column; /* Arranges items vertically */
}

Setting `flex-direction` to `column` will arrange the items vertically instead of horizontally.

3. Flexbox Wrapping:

If you have more items than can fit in a row, you can make them wrap onto the next line using `flex-wrap`:

div.container {
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
}

This allows flex items to wrap if they don’t fit in a single row.

4. Flexbox Best Practices:

• Use **flexbox** for simple layouts where you need to align items or distribute space evenly.
• For more complex grid-based layouts, consider using **CSS Grid** instead.
• Always test your flexbox layout on multiple screen sizes to ensure responsiveness.

Advanced Form Validation

HTML5 provides built-in validation features for forms, but you can also add custom validation to enhance user experience. Let’s dive into both:

1. HTML5 Built-In Validation:

HTML5 forms come with built-in validation attributes like `required`, `minlength`, `maxlength`, and `pattern`. Here’s how to use them:

<form action="/submit" method="POST">
    <label for="name">Name (required)</label>
    <input type="text" id="name" name="name" required minlength="3">

    <label for="email">Email (valid email required)</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

The `required` attribute ensures the field must be filled in before the form can be submitted. `minlength` ensures the user enters at least 3 characters for the name. If the email field is not a valid email address, the form won’t submit.

2. Custom Form Validation with JavaScript:

In addition to the built-in validation, you can use JavaScript to create custom validation logic. Here’s an example:

<form id="custom-form">
    <input type="text" id="username" placeholder="Username">
    <span id="error-message" style="color: red; display: none;">Username is required!</span>
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('custom-form').addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        const errorMessage = document.getElementById('error-message');

        if (username === '') {
            errorMessage.style.display = 'block';  // Show error message
            event.preventDefault();  // Prevent form from submitting
        }
    });
</script>

In this example, if the username field is empty, the form submission will be prevented, and an error message will be displayed.

Best Practices for Form Validation:

• Always provide user-friendly error messages to guide users.
• Combine built-in HTML5 validation with custom JavaScript for a more flexible experience.
• Always validate on both the client side (JavaScript) and server side for security.

Customizing Default Browser Behaviors

Sometimes, you’ll want to change the default behavior of browsers to fit your design needs. Here are a few common examples:

1. Removing Focus Outlines:

By default, browsers show a blue outline around focused elements like buttons and links. You can remove or customize this outline with CSS:

a, button {
    outline: none; /* Removes default focus outline */
}

a:focus, button:focus {
    box-shadow: 0 0 5px #ffa500; /* Adds a custom shadow for accessibility */
}

It’s important not to remove the focus state entirely, as it helps users who navigate with a keyboard.

2. Customizing Scrollbars:

You can customize scrollbars for modern browsers using the `::-webkit-scrollbar` pseudo-element:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #ffa500; /* Scrollbar color */
    border-radius: 10px;
}

This pseudo-element allows you to change the appearance of scrollbars in webkit-based browsers (Chrome, Safari).

3. Disabling Text Selection:

You can prevent users from selecting text on your webpage using the `user-select` property:

body {
    user-select: none; /* Prevents text selection */
}

Use this property sparingly, as it can impact the user experience.

CSS Variables (Custom Properties)

CSS Variables, also known as **custom properties**, allow you to store values and reuse them throughout your stylesheet. This makes your CSS more maintainable and flexible. Here's how to use them:

1. Declaring a Variable:

CSS variables are declared using the `--` prefix and are often defined in the `:root` selector to make them globally available:

:root {
    --primary-color: #ff4500;
    --secondary-color: #ffa500;
    --font-size: 18px;
}

In this example, we define three variables: `--primary-color`, `--secondary-color`, and `--font-size`. These variables can now be used anywhere in your CSS.

2. Using Variables:

You can use a variable by referencing it with the `var()` function:

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    background-color: var(--secondary-color);
}

Variables make it easy to update styles globally. Changing the value of `--primary-color` will automatically update all instances where it's used.

3. Overriding Variables:

You can override variables locally within specific selectors. For example:

button {
    --primary-color: #0000ff; /* Changes the primary color locally */
    color: var(--primary-color); /* Uses the overridden color */
}

In this example, the button's `--primary-color` is changed to blue without affecting the rest of the document.

Understanding Z-Index and Stacking Context

The **z-index** property controls the stacking order of elements on the z-axis (i.e., whether elements appear in front or behind other elements). Here’s how to use it effectively:

1. Basic Z-Index:

Elements with a higher `z-index` appear on top of elements with a lower `z-index`:

div {
    position: relative; /* Z-index only works with positioned elements */
    z-index: 10; /* Higher z-index means it will appear on top */
}

span {
    position: relative;
    z-index: 5; /* This will appear behind the div */
}

By default, elements with higher z-index values are stacked on top of those with lower values.

2. Stacking Context:

**Stacking context** is created when an element is positioned (relative, absolute, or fixed) and has a z-index value other than `auto`. Elements inside a stacking context are stacked independently of the rest of the document:

div.parent {
    position: relative;
    z-index: 10;
}

div.child {
    position: relative;
    z-index: 5; /* This is within the parent stacking context */
}

In this case, the `.child` element’s z-index only affects elements inside its parent, not the entire page.

CSS Filters: Adding Visual Effects

CSS Filters allow you to apply visual effects like **blurring, grayscale, contrast** adjustments, and more. They are commonly used for images, but can be applied to any element. Here’s how:

1. Applying Filters to an Image:

img {
    filter: blur(5px) grayscale(50%) brightness(0.8);
}

In this example, the image will be blurred by 5px, turned 50% grayscale, and slightly darkened (brightness at 80%). Filters can be combined in a single line.

2. Available Filter Functions:

• blur(px): Blurs the element by the specified number of pixels.
• grayscale(%): Converts the element to grayscale. `0%` is full color, `100%` is black and white.
• brightness(%): Adjusts brightness. `100%` is normal, values below darken the image, values above brighten it.
• contrast(%): Adjusts the contrast. `100%` is normal.
• invert(%): Inverts the colors of the element.

Understanding the CSS Box Model

The **CSS Box Model** is crucial for understanding how elements are sized and spaced on the page. It consists of four parts: content, padding, border, and margin. Here’s a breakdown:

1. Basic Structure of the Box Model:

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

In this example, the content is 200px wide, with 20px of padding, a 5px border, and 10px of margin.

2. Box-Sizing Property:

By default, the width and height of an element are calculated without including padding and borders. The `box-sizing` property changes this behavior:

div {
    box-sizing: border-box; /* Includes padding and border in width/height */
}

With `box-sizing: border-box;`, the width includes padding and borders, which simplifies layout calculations.

Best Practices:

• Use `box-sizing: border-box` to avoid confusion with element sizes.
• Always consider padding, borders, and margins when designing layouts.

Creating Unique Layouts with CSS Shapes and Clip Paths

**CSS Shapes** and **Clip Paths** allow you to create non-rectangular layouts and shapes. Here’s how:

1. Clip Path Basics:

The `clip-path` property defines which part of an element should be visible. You can create custom shapes using various functions:

div {
    clip-path: circle(50%);
}

In this example, the element will be clipped into a circle with a radius of 50% of the element’s size.

2. Using Polygon to Create Custom Shapes:

You can define complex shapes with the `polygon()` function:

div {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

This creates a diamond shape, with points defined at each corner.

3. Shape Outside for Text Wrapping:

The `shape-outside` property allows text to wrap around custom shapes:

img {
    float: left;
    shape-outside: circle(50%);
}

In this example, text will wrap around an image clipped into a circle.

CSS Variables (Custom Properties)

CSS Variables, also known as **custom properties**, allow you to store values and reuse them throughout your stylesheet. Here's how to use them:

1. Declaring a Variable:

CSS variables are declared using the `--` prefix and are often defined in the `:root` selector to make them globally available:

:root {
    --primary-color: #ff4500;
    --secondary-color: #ffa500;
    --font-size: 18px;
}

In this example, we define three variables: `--primary-color`, `--secondary-color`, and `--font-size`. These variables can now be used anywhere in your CSS.

2. Using Variables:

You can use a variable by referencing it with the `var()` function:

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    background-color: var(--secondary-color);
}

Variables make it easy to update styles globally. Changing the value of `--primary-color` will automatically update all instances where it's used.

3. Overriding Variables:

You can override variables locally within specific selectors. For example:

button {
    --primary-color: #0000ff; /* Changes the primary color locally */
    color: var(--primary-color); /* Uses the overridden color */
}

In this example, the button's `--primary-color` is changed to blue without affecting the rest of the document.

Understanding Z-Index and Stacking Context

The **z-index** property controls the stacking order of elements on the z-axis (i.e., whether elements appear in front or behind other elements). Here’s how to use it effectively:

1. Basic Z-Index:

Elements with a higher `z-index` appear on top of elements with a lower `z-index`:

div {
    position: relative; /* Z-index only works with positioned elements */
    z-index: 10; /* Higher z-index means it will appear on top */
}

span {
    position: relative;
    z-index: 5; /* This will appear behind the div */
}

By default, elements with higher z-index values are stacked on top of those with lower values.

2. Stacking Context:

**Stacking context** is created when an element is positioned (relative, absolute, or fixed) and has a z-index value other than `auto`. Elements inside a stacking context are stacked independently of the rest of the document:

div.parent {
    position: relative;
    z-index: 10;
}

div.child {
    position: relative;
    z-index: 5; /* This is within the parent stacking context */
}

In this case, the `.child` element’s z-index only affects elements inside its parent, not the entire page.

CSS Filters: Adding Visual Effects

CSS Filters allow you to apply visual effects like **blurring, grayscale, contrast** adjustments, and more. They are commonly used for images, but can be applied to any element. Here’s how:

1. Applying Filters to an Image:

img {
    filter: blur(5px) grayscale(50%) brightness(0.8);
}

In this example, the image will be blurred by 5px, turned 50% grayscale, and slightly darkened (brightness at 80%). Filters can be combined in a single line.

2. Available Filter Functions:

• blur(px): Blurs the element by the specified number of pixels.
• grayscale(%): Converts the element to grayscale. `0%` is full color, `100%` is black and white.
• brightness(%): Adjusts brightness. `100%` is normal, values below darken the image, values above brighten it.
• contrast(%): Adjusts the contrast. `100%` is normal.
• invert(%): Inverts the colors of the element.

Understanding the CSS Box Model

The **CSS Box Model** is crucial for understanding how elements are sized and spaced on the page. It consists of four parts: content, padding, border, and margin. Here’s a breakdown:

1. Basic Structure of the Box Model:

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

In this example, the content is 200px wide, with 20px of padding, a 5px border, and 10px of margin.

2. Box-Sizing Property:

By default, the width and height of an element are calculated without including padding and borders. The `box-sizing` property changes this behavior:

div {
    box-sizing: border-box; /* Includes padding and border in width/height */
}

With `box-sizing: border-box;`, the width includes padding and borders, which simplifies layout calculations.

Best Practices:

• Use `box-sizing: border-box` to avoid confusion with element sizes.
• Always consider padding, borders, and margins when designing layouts.

Creating Unique Layouts with CSS Shapes and Clip Paths

**CSS Shapes** and **Clip Paths** allow you to create non-rectangular layouts and shapes. Here’s how:

1. Clip Path Basics:

The `clip-path` property defines which part of an element should be visible. You can create custom shapes using various functions:

div {
    clip-path: circle(50%);
}

In this example, the element will be clipped into a circle with a radius of 50% of the element’s size.

2. Using Polygon to Create Custom Shapes:

You can define complex shapes with the `polygon()` function:

div {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

This creates a diamond shape, with points defined at each corner.

3. Shape Outside for Text Wrapping:

The `shape-outside` property allows text to wrap around custom shapes:

img {
    float: left;
    shape-outside: circle(50%);
}

In this example, text will wrap around an image clipped into a circle.