Css

CSS Units

CSS units define the measurements for properties like width, height, margin, padding, font-size, etc. They determine how elements are sized and positioned on a web page.

Types of CSS Units:

1. Absolute Units: Fixed and not scalable.
• Examples: px (pixels), cm (centimeters), mm (millimeters), in (inches), pt (points), pc picas).
2. Relative Units: Flexible and scalable based on other elements or the viewport.
• Font-relative: em, rem, %.
• Viewport-relative: vw (width), vh (height), vmin, vmax.

Example:1

CSS Specificity

CSS Specificity is the set of rules that determines which CSS rule takes precedence when multiple rules target the same element. It is calculated based on the types of selectors used.

How Specificity Works

Each selector is assigned a weight based on the following rules (in order of priority):

1. Inline Styles (Highest Specificity)
• Example: style="color: red;" in HTML.
• Specificity: 1000.
2. IDs
• Example: #header { color: blue; }.
• Specificity: 0100.
3. Classes, Attributes, and Pseudo-classes
• Example: .button {}, [type="text"] {}, :hover {}.
• Specificity: 0010.
4. Elements and Pseudo-elements (Lowest Specificity)
• Example: h1 {}, p {}, ::before {}.
• Specificity: 0001.

Calculating Specificity

Specificity is written as a 4-part value: (a, b, c, d)

• a: Inline styles.
• b: Number of ID selectors.
• c: Number of class, attribute, and pseudo-class selectors.
• d: Number of element and pseudo-element selectors.

Example:1

CSS !important

The !important rule is used in CSS to override other styles, regardless of specificity. When applied to a property, it ensures that the property always takes precedence over conflicting rules in the style sheet.

Syntax

Key Characteristics of !important

1. Overrides Specificity:
• A rule with !important will override any other rule, even inline styles or higher-specificity selectors.
2. Last One Wins:
• If multiple !important rules apply to the same property, the one defined last in the CSS takes precedence.

Example

Explanation

1. The first <p> element gets its style from the general p { color: blue; } rule.
2. The second <p> element has an ID #special, which has higher specificity, so it turns green.
3. The third <p> element has both the ID #special and the class .override. The important rule in .override forces the text color to be red, overriding the green color from #special.

CSS Math Functions

CSS Math Functions allow you to perform calculations directly in CSS properties, enabling dynamic and responsive designs. They are particularly useful for layouts, sizes, and positioning.

Available CSS Math Functions

1. calc()
• Combines values with mathematical operations like addition, subtraction, multiplication, and division.
• Syntax:
• property: calc(expression);
• Example:
width: calc(100% - 50px);
2. min()
• Returns the smallest value from a list of values.
• Syntax:
• property: min(value1, value2, ...);
• Example:
width: min(50vw, 400px);
3. max()
• Returns the largest value from a list of values.
• Syntax:
• property: max(value1, value2, ...);
• Example:
font-size: max(16px, 2vw);
4. clamp()
• Returns a value within a defined range, ensuring it stays between a minimum and maximum.
• Syntax:
• property: clamp(min, preferred, max);
• Example:
width: clamp(300px, 50%, 800px);
5. round() (Upcoming feature in modern CSS)
• Rounds a value to the nearest integer or a specified precision.
  (Browser support may vary).

Example:1

Explanation of the Code

• calc(): Adjusts the width dynamically by subtracting 50px from the full width of the container.
• clamp(): Limits the width between 200px and 600px, preferring 50% of the parent size.
• min(): Restricts the height to a maximum of 50vh or 300px, whichever is smaller.

Example:2

CSS Counters

CSS Counters are a way to create and manipulate custom counters in your web pages. They allow developers to add numbers or counters to elements dynamically, such as for creating numbered lists, chapters, or sections.

CSS Properties for Counters

1. counter-reset
• Initializes or resets the counter.
• Example: counter-reset: my-counter;
2. counter-increment
• Increments the counter's value.
• Example: counter-increment: my-counter;
3. content
• Displays the counter in ::before or ::after pseudo-elements.
• Example: content: counter(my-counter);

Example:1

Example:2

Explanation of Code:

1. Initialize Counter:
• counter-reset: section; creates a counter named section at the start of the document.
• Each h2 increments the section counter and displays it using content: "Section " counter(section) ": ";.
2. Nested Counters:
• A new counter, subsection, is reset for each h3.
• The counter(section) and counter(subsection) display the section and subsection numbers in a nested format (e.g., 2.1, 2.2).

Use Cases for CSS Counters

1. Numbered Lists: Automatically number custom lists or headings.
2. Table of Contents: Dynamically number sections and subsections.
3. Page Numbers: Add page numbering for printed pages.
4. Custom Bullet Points: Replace default list bullets with numbers or symbols.

CSS Counters add dynamic numbering and are especially useful for structured documents like reports, manuals, or content-heavy websites.

CSS Website Layout

CSS Header

A CSS header is typically the top section of a webpage that contains elements like logos, navigation menus, titles, or banners. It is styled using CSS to make it visually appealing and functional.

Example

Explanation:

1. column-count: 3 : Divides the content into 3 equal columns.
2. column-gap: 30px : Adds 30px spacing between columns.
3. column-rule : Draws a 2px solid green line between columns.
4. column-span: all : Makes the heading span across all columns.

CSS Navigations

CSS Navigation is used to create menus, bars, and links that allow users to navigate through a website. Navigation menus can be styled using CSS for horizontal, vertical, dropdown, or sidebar navigation.

Types of CSS Navigation

1. Horizontal Navigation
2. Vertical Navigation
3. Dropdown Navigation
4. Sidebar Navigation

Each type can be styled and customized using properties like display, float, position, and flexbox.

1. Horizontal Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation</title>
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>


2. Vertical Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navigation</title>
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f4f4f4;
}

li a {
display: block;
color: #333;
padding: 10px;
text-decoration: none;
}

li a:hover {
background-color: #ddd;
color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<ul>
</body>
</html>


3. Dropdown Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Navigation</title>
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}

li {
float: left;
}

li a, .dropdown-btn {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropdown-btn {
background-color: #4CAF50;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li> class="dropdown">
<a href="javascript:void(0)" class="dropdown-btn">Services</a>
<div class="dropdown-content">
<a href="#web">Web Development</a>
<a href="#app">App Development</a>
<a href="#seo">SEO</a>
</div>
</li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<ul>
</body>
</html>


4. Sidebar Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Navigation Example</title>
<style>

/* Sidebar container */
.sidebar {
height: 100%; /* Full-height */
width: 250px; /* Sidebar width */
position: fixed; /* Fix sidebar to the left */
top: 0;
left: 0;
background-color: #111; /* Dark background */
padding-top: 20px;
}

/* Sidebar links */
.sidebar a {
display: block;
padding: 10px 20px;
color: white;
text-decoration: none;
font-size: 18px;
}

/* Hover effect */
.sidebar a:hover {
background-color: #4CAF50; /* Green background */
color: white;
}

/* Main content */
.main-content {
margin-left: 260px; /* Space for sidebar */
padding: 20px;
}
</style>
</head>
<body>

<!-- Sidebar Navigation -->
<div class="sidebar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</div>

<!-- Main Content -->
<div class="main-content">
<h1>Welcome to My Website</h1>
<p>This is the main content area. The sidebar navigation stays fixed on the left side as you scroll through the page.</p>
</div>
</body>
</html>

CSS Toggle Bar

A Toggle Bar is a navigation menu or sidebar that can be shown or hidden (toggled) when a button or icon is clicked. It is commonly used in responsive designs for mobile-friendly navigation menus. This can be achieved using HTML, CSS, and optionally JavaScript for toggling the visibility.

Css columns

CSS columns are used to divide content into multiple columns, similar to how text is laid out in newspapers. The CSS Multi-Column Layout module provides properties to control the number, width, and spacing of columns.

Common Properties for CSS Columns

1. column-count: Specifies the number of columns.
2. column-width: Specifies the ideal width of columns (browser adjusts the number of columns to fit the width).
3. column-gap: Specifies the spacing between columns.
4. column-rule: Adds a line (rule) between columns.
5. column-rule-width, column-rule-style, column-rule-color: Customize the line between columns.
6. columns: A shorthand for setting both column-width and column-count.

Key Points

• Use column-count to control the number of columns explicitly.
• Use column-width to allow the browser to determine the number of columns based on width.
• Add column-rule for visual separation between columns.
• The properties are responsive, and the number of columns can adjust based on the viewport size.

These examples provide a foundation for creating multi-column layouts with CSS.

CSS Footer Bar

Here’s an example of a footer with menu links styled as a horizontal bar, fixed to the bottom of the page, with a height of 200px:

Explanation

1. Fixed Footer:
• position: fixed; ensures the footer stays at the bottom of the viewport regardless of scrolling.
• bottom: 0; aligns the footer at the very bottom of the page.
2. Footer Height:
• The height is explicitly set to 200px.
3. Menu Links:
• Displayed in a horizontal bar using flexbox.
• Links have hover effects for interactivity.
4. Padding:
• padding-bottom: 200px; is applied to the <body> to prevent content from overlapping the footer.

This creates a visually appealing and functional fixed footer with menu links at the bottom of the page!

CSS Image Gallery Using Flexbox

Here’s an example of how to create a responsive image gallery using CSS Flexbox:

Example:1

Explanation:

1. Flexbox Layout:
• display: flex creates a flexible container for the gallery.
• flex-wrap: wrap allows images to wrap to the next row if the space isn’t enough.
• gap: 15px creates spacing between the images.
• justify-content: center centers the images horizontally.
2. Image Styling:
• Fixed dimensions (width and height) ensure a consistent layout.
• object-fit: cover ensures images are cropped proportionally to fit their containers.
3. Hover Effect:
• transform: scale(1.1) adds a zoom effect on hover.
• box-shadow creates a shadow to emphasize the image.
4. Responsiveness:
• The flex-wrap property ensures the layout adapts to different screen sizes, making it naturally responsive.

This example demonstrates a simple and visually appealing image gallery using Flexbox, with responsive behavior and hover effects.

Example:2

Explanation:

1. Float Property:
• Each .gallery-item is floated to the left, creating a grid-like layout.
• Items wrap to the next row when there’s no space available.
2. Image and Content Styling:
• Images are set to width: 100% to fit their container.
• The text below each image is wrapped in a .content div, styled for padding, font size, and alignment.
3. Hover Effect:
• The transform: scale(1.05) enlarges the image slightly when hovered over, adding a nice interaction effect.
4. Clearfix Hack:
• The ::after pseudo-element is used to clear the float and maintain the structure of the gallery.
5. Responsiveness:
• Using percentage widths (30%) and margins ensures the layout adapts to different screen sizes.

This layout demonstrates a simple but effective way to pair images with descriptive content in a gallery format using floats.

CSS Attribute Selectors

CSS Attribute Selectors are used to style HTML elements based on their attributes or attribute values. They provide powerful and flexible ways to apply styles conditionally.

Types of CSS Attribute Selectors:

1. [attribute]

   Selects elements that have the specified attribute.

   [type] {
border: 2px solid blue;
}


   Example:

   • Styles all elements with a type attribute.
   
   
2. [attribute=value]

   Selects elements with the specified attribute and exact value.

   [type="text"] {
background-color: lightgray;
}


   Example:

   • Styles input elements where type="text."
   
   
3. [attribute~=value]

   Selects elements with a specified attribute containing a space-separated list of values, where one of them matches the given value.

   [class~="highlight"] {
color: red;
}


   Example:

   • Targets elements where the class attribute contains highlight in a list like class="box highlight shadow".
   
   
4. [attribute|=value]

   Selects elements with a specified attribute containing a hyphen-separated list of values that start with the given value.

   [lang|="en"] {
font-style: italic;
}


   Example:

   • Targets elements with lang="en" or lang="en-us".
   
   
5. [attribute^=value]

   Selects elements where the attribute value starts with the given value.

   [href^="https"] {
color: green;
}


   Example:

   • Styles links (<a>) that start with https.
   
   
6. [attribute$=value]

   Selects elements where the attribute value ends with the given value.

   [src$=".jpg"] {
border: 3px solid orange;
}


   Example:

   • Styles images (<img>) with a source ending in .jpg.
   
   
7. [attribute=value]*

   Selects elements where the attribute value contains the given value.

   [title*="important"] {
font-weight: bold;
}


   Example:

   • Styles elements with a title containing the word important.
   
   

Example:1

Css Introduction

CSS (Cascading Style Sheets) is a stylesheet language used to describe the appearance and formatting of HTML documents. It controls the layout, colors, fonts, spacing, and positioning of elements on a web page, making it an essential part of modern web design and development.

Key Features of CSS:

1. Separation of Content and Presentation:

HTML is used for structuring content, while CSS is used for styling and visual presentation. This separation allows for cleaner, more maintainable code.

2. Cascading Nature:

The "Cascading" part of CSS means that styles can be applied at different levels (e.g., inline, internal, or external) and will be prioritized based on their specificity and importance.

Why Using CSS?

CSS (Cascading Style Sheets) is crucial for web development because it controls the design and layout of web pages, enhancing their appearance and usability.

Key Benefits:

1. Separation of Style and Content: Keeps HTML structure clean while managing design separately.
2. Consistent Styling: Apply styles across multiple pages using one CSS file.
3. Responsive Design: Easily adapt layouts for different screen sizes.

Example:-

body {
background-color: #ffffff;
}

h1 {
color: green;
text-align: center;
}

p {
font-size: 16px;
margin: 15px;
}


CSS Selectors

CSS selectors are patterns that identify and target HTML elements for styling. They enable applying specific styles based on attributes like tag names, classes, IDs, or relationships between elements.

Types

1. Universal Selector (*)

The universal selector targets all elements on a web page.

Example:-

* {
margin: 0;
padding: 0;
}


Example: Removes the margin and padding from all elements.

2. Element (Tag) Selector

This selector targets all elements of a specific type or tag.

Example:-

p {
color: blue;
}


Example: Styles all <p> elements to have blue text.

3. Class Selector (.)

Targets elements with a specific class attribute. It is prefixed with a dot (.).

Example:-

.highlight {
background-color: white;
}


Example: Applies a white background to all elements with class="highlight".

4. ID Selector (#)

Targets a single element with a specific id attribute. Prefixed with a hash (#). Since IDs are unique, this selector applies to one element.

Example:-

#header {
font-size: 24px;
}


Example: Styles the element with id="header" to have a font size of 24px.

5. Attribute Selector

Targets elements based on their attributes. You can style elements with specific attributes or values.

Example:-

a[target="_blank"] {
color: red;
}


Example: Styles all links (<a>) with target="_blank" to have red text.

Variations:

• [attr]: Selects elements with the given attribute.
input[required] {
border: 2px solid red;
}

• [attr="value"]: Selects elements with the exact attribute value.
input[type="text"] {
background-color: lightyellow;
}

• [attr^="value"]: Selects elements where the attribute starts with the given value.
a[href^="https"] {
color: green;
}

• [attr*="value"]: Selects elements where the attribute contains the given value.
a[href*="example"] {
font-weight: bold;
}

• [attr$="value"]: Selects elements where the attribute ends with the given value.
img[src$=".jpg"] {
border: 3px solid blue;
}


6. Descendant Selector (Space)

Selects elements that are descendants of a specified parent element.

Example:-

div p {
color: green;
}


Example: Styles <p> elements inside any <div> with green text.

7. Child Selector (>)

Targets direct child elements of a specified parent.

Example:-

ul > li {
list-style-type: none;
}


Example: Removes bullets from direct <li> children of <ul>.

8. Adjacent Sibling Selector (+)

Selects an element that immediately follows another element.

Example:-

h1 + p {
font-weight: bold;
}


Example: Makes the first <p> after an <h1> bold.

9. General Sibling Selector (~)

Selects all sibling elements that follow a specified element.

Example:-

h2 ~ p {
color: gray;
}


Example: Styles all <p> elements after an <h2> as gray.

10. Pseudo-Class Selectors

Pseudo-classes define a special state of an element, such as :hover, :focus, or :nth-child().

Example:-

h2 ~ p {
color: gray;
}


Example: Styles all <p> elements after an <h2> as gray.

11. Pseudo-Element Selectors

Targets specific parts of an element, like the first line, first letter, or content before/after the element.

Example:-

p::first-line {
font-weight: bold;
}


Example: Makes the first line of all paragraphs bold.

12. Group Selector (,)

You can group multiple selectors together by separating them with a comma.

Example:-

h1, h2, h3 {
font-family: Arial, sans-serif;
}


Example: Applies the same font family to <h1>, <h2>, and <h3> elements.

These selectors provide powerful and flexible ways to style your HTML elements efficiently.

How To Add CSS Page In Html

CSS (Cascading Style Sheets) can be added to HTML in three main ways: inline, internal, and external. Each method is suited to different needs and has its advantages. Let’s go over each method with examples.

1. Inline CSS
• Inline CSS applies styles directly within an HTML element’s style attribute. This is useful for applying a unique style to a single element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline CSS Example</title>
</head>
<body>

<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>

</body>
</html>
• In this example, the <h1> element is styled directly with color and font-size properties.
2. Internal CSS
• Internal CSS is added within the <style> tag inside the <head> section of the HTML document. It applies styles to elements on the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}
</style>
</head>
<body>

<h1>Hello, World!</h1>
<p>This is an example of internal CSS.</p>

</body>
</html>
• Here, the styles for <h1> and <p> apply to all matching elements on the page.
3. External CSS
• External CSS involves linking an external .css file to the HTML document. This is the most efficient method for larger websites as it allows you to apply the same styles to multiple pages.

Example:-

1. Create an external CSS file (styles.css):
/* styles.css */
h1 {
color: red;
font-size: 24px;
}
p {
color: black;
font-size: 18px;
}


2. Link the CSS file to your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Hello, World!</h1>
<p>This is an example of external CSS.</p>

</body>
</html>

By using <link rel="stylesheet" href="styles.css"> in the <head> section, the CSS from styles.css is applied to the HTML page.

Syntax for CSS Comments

CSS comments are notes added to stylesheets for documentation or clarification, enclosed within /* and */. They do not affect the code’s functionality and are ignored by browsers, making them useful for explaining styles, organizing sections, or temporarily disabling code during debugging.

Key Points

• CSS Comment Start: /*
• CSS Comment End: */
• Single-line and Multi-line: CSS comments can be single or multi-line, as long as they are enclosed within /* and */.

Common Uses of CSS Comments

/* This is a single-line CSS comment */

h1 {
color: blue; /* This comment is at the end of a line */
}

/*
This is a multi-line comment in CSS.
It can span multiple lines.
*/

p {
font-size: 16px;
color: gray;
}

/* Temporarily Disable Code: */

/* h2 {
color: red;
} */

CSS Colors

1. Text Color
• The color property is used to set the color of the text content within an element. You can use color names, hex codes, RGB, RGBA, HSL, or HSLA values.
/* Sets the text color to blue */
p {
color: blue;
}

/* Sets the text color to a specific hex value */
h1 {
color: #FF5733;
}

/* Sets the text color with RGBA, allowing transparency */
span {
color: rgba(0, 128, 0, 0.8);
}


2. Background Color
• The background-color property is used to set the background color of an element. This can be applied to most elements like divs, buttons, sections, and more.
/* Sets the background color to light gray */
div {
background-color: lightgray;
}

/* Sets the background color using HSL */
section {
background-color: hsl(120, 60%, 70%);
}

/* Transparent background using RGBA */
header {
background-color: rgba(255, 0, 0, 0.3);
}
3. Border Color
• The border-color property sets the color of the border around an element. You can use color values directly with border-color or specify it as part of the shorthand border property along with width and style.
/* Sets border color only */
.box {
border-style: solid;
border-width: 2px;
border-color: #3498db;
}

/* Using shorthand to set color with width and style */
button {
border: 2px solid purple;
}

/* Different colors for each side of the border */
.container {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: orange;
border-style: solid;
border-width: 2px;
}

CSS Backgrounds

In CSS, the background of an element can be customized in multiple ways using different background properties. Here’s an overview of the main types and how they work.

Types of Background Properties

1. Background Color
• The background-color property sets a solid color for an element’s background. This can use color names, hex codes, RGB, RGBA, HSL, or HSLA.
div {
background-color: lightblue;
}

2. Background Image
• The background-image property allows you to set an image as the background of an element. The URL of the image is specified using url().
body {
background-image: url('background.jpg');
}

3. Background Repeat
• The background-repeat property controls whether and how the background image is repeated (tiled). Options include repeat, no-repeat, repeat-x, and repeat-y.
div {
background-image: url('pattern.png');
background-repeat: repeat-x; /* Repeats horizontally only */
}

4. Background Position
• The background-position property specifies the starting position of the background image. Values include keywords (e.g., top, bottom, center), percentages, or pixel values.
header {
background-image: url('header-bg.jpg');
background-position: center;
}

5. Background Size
• The background-size property controls the scaling of the background image. Options include cover, contain, or specific pixel/percentage values.
• cover: Scales the image to cover the entire area.
• contain: Scales the image to fit within the area.
header {
background-image: url('header-bg.jpg');
background-position: center;
}

6. Background Attachment
• The background-attachment property controls whether the background image scrolls with the page or stays fixed. Options include scroll, fixed, and local.
body {
background-image: url('background.jpg');
background-attachment: fixed; /* Background remains fixed */
}

7. Background Clip
• The background-clip property determines the area within which the background is painted. Options include border-box, padding-box, and content-box.
div {
background-color: lightcoral;
background-clip: padding-box; /* Background only within padding area */
}

8. Background Origin
• The background-origin property specifies where the background positioning starts. It also has options of border-box, padding-box, and content-box.
div {
background-image: url('image.jpg');
background-origin: content-box; /* Image starts at content box */
}

9. Multiple Backgrounds
• CSS allows multiple background images for a single element, separated by commas. Each background image can have its own settings for size, position, etc.
div {
background-image: url('image1.png'), url('image2.png');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}


CSS Borders

CSS borders are a versatile way to style the edges of HTML elements. You can control their color, width, style, and even add multiple borders. Here’s a look at the main types of CSS borders and how they work with examples.

1. Border Style
• The border-style property defines the type of line used for the border. Border styles include:
• solid: A single, solid line.
• dotted: A dotted line.
• dashed: A dashed line.
• double: A double line.
• none: No border.
• groove, ridge, inset, and outset: 3D-styled borders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Types</title>
<style>
.box {
width: 200px;
padding: 10px;
margin: 10px;
}

.solid { border: 3px solid black; }
.dotted { border: 3px dotted black; }
.dashed { border: 3px dashed black; }
.double { border: 3px double black; }
.groove { border: 3px groove black; }
.ridge { border: 3px ridge black; }
.inset { border: 3px inset black; }
.outset { border: 3px outset black; }
</style>
</head>
<body>


<div class="box solid">Solid Border</div>
<div class="box dotted">Dotted Border</div>
<div class="box dashed">Dashed Border</div>
<div class="box double">Double Border</div>
<div class="box groove">Groove Border</div>
<div class="box ridge">Ridge Border</div>
<div class="box inset">Inset Border</div>
<div class="box outset">Outset Border</div>

</body>
</html>

2. Border Width
• The border-width property sets the thickness of the border. You can use values in pixels, ems, or keywords (thin, medium, thick).
.box-thin {
border-style: solid;
border-width: thin;
}

.box-thick {
border-style: solid;
border-width: thick;
}

.box-custom {
border-style: solid;
border-width: 5px;
}


3. Border Color
• The border-color property changes the color of the border. You can use named colors, hex values, RGB, or HSL.
.box-red {
border-style: solid;
border-width: 2px;
border-color: red;
}

.box-gradient {
border-style: solid;
border-width: 2px;
border-color: rgba(0, 128, 0, 0.5);
}

4. Border Radius
• The border-radius property rounds the corners of a border. It can be set to a percentage or pixel value, allowing for everything from slightly rounded corners to fully circular borders.
.box-rounded { border: 2px solid black;
border-radius: 10px;
}

.box-circle {
border: 2px solid black;
border-radius: 50%; /* Makes element circular */
}

5. Individual Border Sides
• CSS allows setting different border properties for each side of an element: border-top, border-right, border-bottom, and border-left.
.box-individual {
border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 3px dotted green;
border-left: 5px double orange;
}

6. Shorthand Border Property
• The border shorthand property lets you define the border’s style, width, and color all at once.
.box-shorthand {
border: 3px solid purple; /* Width, style, and color in one line */
}

7. Multiple Borders (Using Outlines or Box Shadow)
• To create multiple borders, you can use a combination of outline and box-shadow along with border.
.box-multiple-borders {
border: 3px solid black;
outline: 3px dashed red;
box-shadow: 0 0 0 6px yellow; /* Additional outer border */
}

• Example of Different Borders:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Borders Example</title>
<style>
.box-rounded { border: 2px solid blue; border-radius: 10px; }
.box-individual { border-top: 2px solid red; border-right: 4px dashed green; border-bottom: 2px dotted blue; border-left: 3px solid orange; }
.box-shorthand { border: 3px solid purple; }
.box-multiple-borders { border: 3px solid black; outline: 2px dashed red; box-shadow: 0 0 0 5px yellow; }
</style>
</head>
<body>

<div class="box-rounded">Rounded Border</div>
<div class="box-individual">Individual Border Sides</div>
<div class="box-shorthand">Shorthand Border</div>
<div class="box-multiple-borders">Multiple Borders</div>


</body>
</html>

CSS Margins

CSS margins create space outside of an HTML element’s border, allowing you to control the distance between elements. Margins can be set individually for each side (top, right, bottom, left) or all sides at once

1. The margin Shorthand Property
• The margin property sets the margin for all four sides in one line:
• margin: 10px; — all sides 10px.
• margin: 10px 20px; — vertical (top & bottom) 10px, horizontal (left & right) 20px.
• margin: 10px 20px 30px; — Top margin 10px,right and left (horizontal) margins 20px and bottom margin 30px.
• margin: 10px 20px 30px 40px; — all sides (top, right, bottom, left).
.container1 {
margin: 10px;
}

.container2 {
margin: 10px 20px;
}

.container3 {
margin: 10px 20px 30px;
}

.container4 {
margin: 10px 20px 30px 40px;
}
2. Individual Margins
• You can also set margins for each side individually:
• margin-top: Space above the element.
• margin-right: Space to the right of the element.
• margin-bottom: Space below the element.
• margin-left: Space to the left of the element.
.box {
margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
}

3. Auto Margin for Centering
• Setting horizontal margins (margin-left and margin-right) to auto will center an element within its container, as long as the element has a defined width.
.centered-box {
width: 50%;
margin-left: auto;
margin-right: auto;
}

4. Negative Margins
• Negative values for margins are allowed and pull elements closer to their neighboring elements, or even overlapping them.
.overlapping-box {
margin-top: -10px;
margin-left: -5px;
}

5. Margin Collapse
• CSS Margin Collapse is a behavior where the vertical margins of adjacent block-level elements (top and bottom margins) combine into a single margin instead of adding up. This results in only the larger of the two margins being applied. Margin collapse helps simplify layouts by preventing unnecessary spacing between elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin Collapse Example</title>
<style>

.box1 {
background-color: lightblue;
height: 100px;
margin-bottom: 30px; /* Margin below the first box */
}

.box2 {
background-color: lightcoral;
height: 100px;
margin-top: 20px; /* Margin above the second box */
}
</style>
</head>
<body>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

</body>
</html>


CSS Padding

CSS Padding is the space between an element’s content and its border. It creates inner space within the element, pushing content away from the edges. Padding can be set on all sides at once or individually for each side (top, right, bottom, left).

1. Shorthand Padding Property
• Using the padding shorthand, you can define padding for all sides in one line:
• padding: 10px; — all sides 10px padding.
• padding: 10px 20px; — vertical (top & bottom) 10px, horizontal (left & right) 20px.
• padding: 10px 20px 30px; — Top padding 10px,right and left (horizontal) padding 20px and bottom padding 30px.
• padding: 10px 20px 30px 40px; — all sides (top, right, bottom, left).
.container {
padding: 10px 20px 30px 40px;
}
2. Individual Padding Properties
• You can set padding for each side individually:
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

• Example of CSS Padding in HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Example</title>
<style>

.box {
background-color: lightblue;
padding: 20px; /* Adds 20px padding on all sides */
border: 2px solid blue;
}
</style>
</head>
<body>

<div class="box">This box has padding inside, creating space between the content and border.</div>

</body>
</html>

CSS Height, Width and Max-width

In CSS, height, width, and max-width properties control the size of elements, helping to create flexible layouts that respond well to different screen sizes and resolutions.

1. width and height
• The width and height properties set the width and height of an element. These properties can use values in units like pixels (px), percentages (%), or view units (vw and vh for viewport width and height).
• width: Sets the horizontal size of an element.
• height: Sets the vertical size of an element.
.box {
width: 300px; /* Fixed width */
height: 200px; /* Fixed height */
}

.responsive-box {
width: 50%; /* Width is 50% of the parent container */
height: 100vh; /* Height is full viewport height */
}

2. max-width
• The max-width property defines the maximum allowable width for an element, helping create responsive layouts. If the content is smaller than max-width, the element shrinks to fit the content. If it grows beyond max-width, the element’s width is restricted to the defined value.
• max-width: Useful for responsive layouts to prevent elements from growing too large on larger screens.
.container {
max-width: 100%; /* Ensures the element never exceeds its container's width */
}

.image {
width: 100%;
max-width: 600px; /* Restricts image width to 600px on larger screens */
}
• Example Using Width, Height, and Max-width:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Width, Height, and Max-width</title>
<style>
.fixed-box {
width: 300px;
height: 150px;
background-color: lightblue;
}

.responsive-box {
width: 80%;
max-width: 500px; /* Restricts max width to 500px */
background-color: lightcoral;
padding: 20px;
}
</style>
</head>
<body>

<div class="fixed-box">This box has a fixed width and height.</div>
<div class="responsive-box">This box adjusts to 80% of the container but maxes out at 500px width.</div>

</body>
</html>
• Note:
  max-width Limits an element’s width, preventing it from expanding beyond a certain point, ideal for responsive designs.

CSS Box Model

The CSS Box Model defines how an element’s content, padding, border, and margin combine to determine its total size and spacing on a webpage.

Layers of the CSS Box Model

1. Content: The area where text, images, or other content is displayed; controlled by width and height.
2. Padding: Space between the content and border, creating inner space within the element. Padding can be customized for each side.
3. Border: Surrounds padding and content, creating an outline around the element. Border width, style, and color are customizable.
4. Margin: The outermost layer, creating space between the element and neighboring elements. Margins can collapse when adjacent elements meet.

Visualization of the CSS Box Model



Example:-

.box {
width: 300px; /* Width of the content area */
padding: 20px; /* Padding around content */
border: 2px solid black; /* Border width and style */
margin: 15px; /* Margin around the box */
}

• Content width: 300px.
• Total width including padding and border: 300px + (20px * 2 padding) + (2px * 2 border) = 344px.
• Total space taken by the element (including margin): 344px + (15px * 2 margin) = 374px.

Box-Sizing Property

The box-sizing property can change how the box model is calculated:

1. content-box (default): Only the content width/height is defined by width and height properties. Padding and border add extra space to the element.
2. border-box: Width and height include content, padding, and border, making the element’s total width and height stay as defined.

Example of box-sizing: border-box:

.box {
width: 300px;
padding: 20px;
border: 2px solid black;
box-sizing: border-box; /* Total width stays at 300px */
}

CSS Outline

The CSS Outline properties allow you to create a line around elements, which is particularly useful for highlighting elements when they are focused or interacted with. Unlike borders, outlines do not occupy space in the document flow, making them a flexible option for styling. Below are the main outline properties explained with examples.

1. outline
• The outline property is a shorthand property for setting all the individual outline properties in one declaration. It can include the width, style, and color of the outline.

Syntax:-

outline: [outline-width] [outline-style] [outline-color];

Example:-

.button {
outline: 2px solid blue; /* 2 pixels wide, solid line, blue color */
}

2. outline-color
• The outline-color property sets the color of the outline. If no color is specified, it defaults to the color of the element's text.
.input-field {
outline: 2px solid; /* Default color (usually black) */
outline-color: red; /* Setting the outline color to red */
}

3. outline-style
• The outline-style property specifies the style of the outline. Common styles include solid, dashed, dotted, double, and none.
.alert {
outline: 3px dashed orange; /* 3 pixels wide, dashed line, orange color */
}

4. outline-width
• The outline-width property defines the width of the outline. You can use specific values like thin, medium, and thick, or you can specify a length (e.g., 2px).
.box {
outline-width: thick; /* Setting the outline to a thick width */
outline-style: solid;
outline-color: green;
}

5. outline-offset
• The outline-offset property sets the space between the outline and the border edge of the element. This property can create a visual separation between the outline and the element itself.
.card {
outline: 2px solid black;
outline-offset: 10px; /* Creates a 10px space between outline and element */
}


Complete Example:-

Here’s a complete HTML and CSS example demonstrating all the outline properties:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Properties</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.button {
padding: 10px 20px;
background-color: #4CAF50; /* Green */
color: white;
border: none;
outline: 2px solid blue; /* Outline with width, style, color */
cursor: pointer;
}

.input-field {
padding: 10px;
margin-top: 20px;
outline: 2px solid;
outline-color: red; /* Red outline color */
}


.alert {
padding: 15px;
background-color: #ffeb3b; /* Yellow background */
outline: 3px dashed orange; /* Dashed outline */
}

.box {
padding: 20px;
margin-top: 20px;
outline-width: thick; /* Thick outline */
outline-style: solid;
outline-color: green; /* Green outline */
}

.card {
padding: 30px;
margin-top: 20px;
outline: 2px solid black; /* Black outline */
outline-offset: 10px; /* Space between outline and box */
}
</style>
</head>
<body>

<button class="button">Click Me!</button>
<input type="text" class="input-field" placeholder="Type here...">
<div class="alert">This is an alert box!</div>
<div class="box">This is a box with a thick outline.</div>
<div class="card">This is a card with an outline offset.</div>

</body>
</html>

CSS Text

In CSS, text properties allow you to style and control the appearance of text on your webpage. With these properties, you can adjust the font, size, alignment, color, spacing, and decoration of text elements. Here’s a breakdown of some essential CSS text properties:

1. Text Color
• color: Sets the color of the text.
.named-color {
color: red; /* Named color */
}

.hex-color {
color: #FF5733; /* Hexadecimal color */
}

.rgb-color {
color: rgb(60, 179, 113); /* RGB color */
}

.rgba-color {
color: rgba(60, 179, 113, 0.7); /* RGB color with opacity */
}

.hsl-color {
color: hsl(240, 100%, 50%); /* HSL color */
}

.hsla-color {
color: hsla(240, 100%, 50%, 0.5); /* HSL color with opacity */
}

2. Text Alignment
• text-align: Controls the alignment of text within its container. Options include left, right, center, and justify.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment Types</title>
<style>
.left-align { text-align: left; }
.right-align { text-align: right; }
.center-align { text-align: center; }
.justify-align { text-align: justify; }
.start-align { text-align: start; }
.end-align { text-align: end; }
</style>
</head>
<body>

<h2>Examples of Text Alignment</h2>

<p class="left-align">Left-aligned text: This text is aligned to the left side of the container.</p>
<p class="right-align">Right-aligned text: This text is aligned to the right side of the container.</p>
<p class="center-align">Center-aligned text: This text is centered within the container.</p>
<p class="justify-align">Justified text: This text is justified to cover the full width of the container, creating evenly spaced words for a clean look in paragraphs.</p>
<p class="start-align">Start-aligned text: This text aligns to the start of the document direction.</p>
<p class="end-align">End-aligned text: This text aligns to the end of the document direction.</p>

</body>
</html>
3. Text Decoration

The text-decoration property in CSS is used to add various decorative effects to text, such as underlines, overlines, line-throughs, and more. It allows you to control whether text decorations are applied and customize their style, color, and thickness.

• Underline (text-decoration: underline;)
• Overline (text-decoration: overline;)
• Line-Through (text-decoration: line-through;)
• None (text-decoration: none;)
• Multiple Decorations (text-decoration: underline overline;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS Text Decoration</title>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none;
}
.underline-overline {
text-decoration: underline overline;
}
</style>
</head>
<body>

<h2>Examples of Text Decoration</h2>

<p class="underline">This text has an underline.</p>
<p class="overline">This text has an overline.</p>
<p class="line-through">This text has a line-through.</p>
<a href="#" class="no-decoration">This link has no underline.</a>
<p class="underline-overline">This text has both underline and overline.</p>

</body>
</html>

Additional Properties with text-decoration

• text-decoration-color: Specifies the color of the text decoration.
• text-decoration-style: Sets the style of the decoration, such as solid, double, dotted, dashed, or wavy.
• text-decoration-thickness: Adjusts the thickness of the text decoration (available in some browsers).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Additional Properties with text-decoration</title>
<style>
.colored-underline {
text-decoration: underline;
text-decoration-color: red;
}
.dashed-underline {
text-decoration: underline;
text-decoration-style: dashed;
}
.thick-underline {
text-decoration: underline;
text-decoration-thickness: 3px;
}
</style>
</head>
<body>

<h2>Examples of Additional Properties with text-decoration</h2>

<p class="colored-underline">This text has a red underline.</p>
<p class="dashed-underline">This text has a dashed underline.</p>
<p class="thick-underline">This text has a thick underline.</p>

</body>
</html>
4. Text Transformation

The text-transform property in CSS controls the capitalization of text within an element.

• none
• capitalize
• uppercase
• lowercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Transformation Example</title>
<style>

.no-transform { text-transform: none; }
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
</style>
</head>
<body>

<h2>Examples of Text Transformation</h2>

<p class="no-transform">This text has no transformation.</p>
<p class="capitalize">this text will be capitalized.</p>
<p class="uppercase">this text will be in uppercase.</p>
<p class="lowercase">THIS TEXT WILL BE IN LOWERCASE.</p>

</body>
</html>
5. Letter and Word Spacing

CSS provides several properties for controlling text spacing, which help with readability and visual presentation.

• Letter Spacing
• Word Spacing
• Line Height
• Text Indentation
• White Space
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Spacing Example</title>
<style>

.letter-spacing { letter-spacing: 2px; }
.word-spacing { word-spacing: 5px; }
.line-height { line-height: 1.8; }
.text-indent { text-indent: 30px; }
.nowrap { white-space: nowrap; }
</style>
</head>
<body>

<h2>Examples of Text Spacing Properties</h2>

<p class="letter-spacing">This text has increased letter spacing.</p>
<p class="word-spacing">This text has increased word spacing.</p>
<p class="line-height">This paragraph has a taller line height, giving more vertical space between lines of text.</p>
<p class="text-indent">This paragraph has an indentation at the start of the first line.</p>
<p class="nowrap">This text has no wrapping, so it stays on one line.</p>

</body>
</html>
6. Font Style and Weight

The font-style property in CSS specifies the style of the text (normal, italic, oblique), while the font-weight property determines the thickness of the text (normal, bold, or numeric values). These properties are used to enhance text appearance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Style and Weight Example</title>
<style>

.styled-text {
font-style: italic; /* Italic style */
font-weight: bold; /* Bold weight */
}
</style>
</head>
<body>

<p class="styled-text">This text is italic and bold.</p>

</body>
</html>
7. Text Shadow

The text-shadow property in CSS allows you to add shadows to text, giving it a three-dimensional or stylistic appearance. This property supports multiple shadows, each with adjustable position, blur radius, and color.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Shadow Examples</title>
<style>

<!-- Format: text-shadow: offsetX offsetY color; -->
.basic-shadow { text-shadow: 2px 2px gray; }
<!-- Format: text-shadow: offsetX offsetY blurRadius color; -->
.blurred-shadow { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }
<!-- Format: text-shadow: offsetX1 offsetY1 blurRadius1 color1, offsetX2 offsetY2 blurRadius2 color2, ...; -->
.multiple-shadows { text-shadow: 1px 1px 2px black, -1px -1px 2px red; }
.inset-shadow { text-shadow: 0px 1px 2px black; }
.glow { color: #fff; text-shadow: 0px 0px 8px #ff00ff; }
.three-d { text-shadow: 1px 1px #555, 2px 2px #333, 3px 3px #111; }
</style>
</head>
<body>

<h2>CSS Text Shadow Examples</h2>

<p class="basic-shadow">Basic shadow effect.</p>
<p class="blurred-shadow">Blurred shadow effect.</p>
<p class="multiple-shadows">Multiple shadows effect.</p>
<p class="inset-shadow">Faux inset shadow effect.</p>
<p class="glow">Glowing text effect.</p>
<p class="three-d">3D text shadow effect.</p>


</body>
</html>

CSS Fonts

CSS fonts are essential for controlling the typography of web pages, enabling designers to specify the font families, sizes, weights, and styles for text elements. Here’s a breakdown of how to use CSS to manage fonts effectively:

1. Font Families
• You can specify a font family using the font-family property. It's best practice to include a fallback list of font families.
body {
font-family: 'Arial', 'Helvetica', sans-serif; /* Fallbacks */
}
2. Font Size
• The font-size property sets the size of the font. You can use various units like px, em, rem, %, etc.
h1 {
font-size: 2em; /* Relative to the parent element */
}

p {
font-size: 16px; /* Absolute size */
}
3. Web Fonts
• To use custom fonts, you can import them via @font-face or use services like Google Fonts.

Using @font-face:

@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2'),
url('MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'MyCustomFont', sans-serif;
}
• Responsive Typography
• Using viewport units (vw, vh) or CSS clamp() allows for more responsive typography.

CSS Icons

1. Font Icons
• Step 1: Include Font Awesome
  (Add the following line to the <head> section of your HTML document to link to Font Awesome):
• Step 2: Use Icons in Your HTML
  (You can now use Font Awesome icons by including the appropriate class names in <i> or <span> elements. Here’s a simple example where we create a navigation menu with icons):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Font Awesome Icons Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
.nav {
list-style-type: none;
padding: 0;
}
.nav li {
margin: 10px 0;
}
.nav a {
text-decoration: none;
color: #333;
display: flex;
align-items: center;
}
.nav a i {
margin-right: 8px; /* Space between icon and text */
color: #007bff; /* Icon color */
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>

<ul class="nav">
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#"><i class="fas fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
<li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>

</body>
</html>
2. SVG Icons
• Certainly! Here’s an example of using SVG icons directly within HTML. SVGs are great because they’re scalable, lightweight, and can be styled with CSS.
• Using SVG Icons Inline
  (In this example, we’ll use a simple SVG icon (a star) as part of a rating system.):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Icon Example</title>
<style>
.rating {
display: flex;
align-items: center;
}
.star {
width: 24px; /* Icon width */
height: 24px; /* Icon height */
fill: #ffcc00; /* Star color */
margin-right: 4px;
cursor: pointer;
transition: fill 0.3s ease;
}
.star:hover {
fill: #ff9900; /* Hover color */
}
</style>
</head>
<body>

<h2>Rating:<h2>

<div class="rating">
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L14.9 8.7L22 9.3L16.6 14L18.4 21L12 17.3L5.6 21L7.4 14L2 9.3L9.1 8.7L12 2z"/>
</svg>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L14.9 8.7L22 9.3L16.6 14L18.4 21L12 17.3L5.6 21L7.4 14L2 9.3L9.1 8.7L12 2z"/>
</svg>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L14.9 8.7L22 9.3L16.6 14L18.4 21L12 17.3L5.6 21L7.4 14L2 9.3L9.1 8.7L12 2z"/>
</svg>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L14.9 8.7L22 9.3L16.6 14L18.4 21L12 17.3L5.6 21L7.4 14L2 9.3L9.1 8.7L12 2z"/>
</svg>
<svg class="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L14.9 8.7L22 9.3L16.6 14L18.4 21L12 17.3L5.6 21L7.4 14L2 9.3L9.1 8.7L12 2z"/>
</svg>
</div>

</body>
</html>
3. CSS Pseudo-Elements for Icons
• Certainly! Here’s an example of using CSS pseudo-elements (::before or ::after) to create an icon for a button. This technique is lightweight and perfect for adding small, decorative icons without adding extra HTML elements.
• Adding a Simple Home Icon with CSS Pseudo-Elements
  In this example, we’ll use a Unicode character for a "home" icon to style a navigation button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pseudo-Elements Icon Example</title>
<style>
/* Styling the button */
.icon-button {
display: inline-flex;
align-items: center;
font-size: 16px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: Arial, sans-serif;
}

/* Adding an icon with ::before pseudo-element */
.icon-button::before {
content: "🏠"; /* Unicode for house icon */
font-size: 18px;
margin-right: 8px; /* Space between icon and text */
}
</style>
</head>
<body>

<button class="icon-button">Home</button>

</body>
</html>
4. Image Icons (PNG, JPEG, GIF)
• In this example, we’ll display a small "search" icon (as a PNG file) next to a search input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Icon Example</title>
<style>

/* Styling for the search container */
.search-container {
display: flex;
align-items: center;
border: 1px solid #ddd;
padding: 5px;
border-radius: 5px;
max-width: 300px;
}


/* Styling for the search icon */
.search-icon {
width: 20px; /* Width of the icon */
height: 20px; /* Height of the icon */
margin-right: 8px; /* Space between icon and input */
}


/* Styling for the input field */
.search-input {
border: none;
outline: none;
font-size: 16px;
width: 100%;
}
</style>
</head>
<body>

<div class="search-container">
<!-- Image icon as PNG -->
<img src="search-icon.png" alt="Search" class="search-icon">
<input type="text" placeholder="Search..." class="search-input">
</div>

</body>
</html>
5. CSS Background Image Icons
• Certainly! Here’s an example of using a CSS background image icon. This method is useful for adding decorative icons without extra HTML elements and can be handy for buttons, links, or list items.
• In this example, we’ll create a "download" button with a PNG icon as the background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Image Icon Example</title>
<style>

/* Styling for the download button */
.download-button {
display: inline-flex;
align-items: center;
padding: 10px 15px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: Arial, sans-serif;
background-image: url('download-icon.png'); /* Path to the image */
background-repeat: no-repeat; /* Prevents the icon from repeating */
background-position: left center; /* Positions the icon on the left */
background-size: 20px 20px; /* Sets the icon size */
padding-left: 40px; /* Space for the icon */
}
</style>
</head>
<body>

<button class="download-button">Download</button>

</body>
</html>
6. Favicons (HTML Head Icons)
• Certainly! Here’s an example of adding a favicon to your website. Favicons are small icons displayed in the browser tab, bookmarks, or other browser areas, helping with brand recognition and easy navigation.
• Create or download an icon image. It’s common to use a 16x16 or 32x32 pixel image saved as .ico, .png, or .svg.
• Name it favicon.ico (the standard name for favicon files) and place it in your website’s root directory.
• Add the following code in the <head> section of your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favicon Example</title>

<!-- Favicon Link -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Alternative formats for favicon -->
<!-- For PNG -->
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">

<!-- For SVG -->
<link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>
<body>

<h1>Hello, World!</h1>
<p>Check the browser tab for the favicon.</p>

</body>
</html>

CSS Links

• In CSS, links can be styled using pseudo-classes to control their appearance based on their state (e.g., normal, hover, active, visited). Here’s an overview of styling links in CSS:
• CSS provides several pseudo-classes for styling links in different states
• :link: Styles unvisited links.
• :visited: Styles links that have already been visited by the user.
• :hover: Styles links when the mouse pointer hovers over them.
• :active: Styles links at the moment they are clicked or activated.

Syntax for Styling Text Links

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Link Styles</title>
<style>

/* Basic link styles */
a:link {
color: #007bff; /* Blue for unvisited links */
text-decoration: none;
}

a:visited {
color: #6c757d; /* Gray for visited links */
}

a:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline; /* Underline on hover */
}

a:active {
color: #dc3545; /* Red when active (clicked) */
}
</style>
</head>
<body>

<p>
<a href="https://www.example.com" target="_blank">Visit Example Site</a>
</p>

</body>
</html>

Syntax for Styling Link Button

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Link Button</title>
<style>

/* Basic styling for link buttons */
.btn {
display: inline-block; /* Makes the link behave like a button */
padding: 10px 20px; /* Space inside the button */
font-size: 16px;
color: white; /* Text color */
background-color: #007bff; /* Button color */
text-decoration: none; /* Removes underline from the link */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s; /* Smooth hover effect */
}

/* Hover effect */
.btn:hover {
background-color: #0056b3; /* Darker color on hover */
}
</style>
</head>
<body>

<a href="#" class="btn">Click Me</a>

</body>
</html>

CSS Lists

In CSS, lists are customized using properties that modify the appearance of both ordered (<ol>) and unordered (<ul>) lists. Common list properties include list-style-type, list-style-image, and list-style-position.

1. Unordered Lists (<ul>)
• Description: An unordered list displays items without any particular order, commonly styled with bullets (such as circles, squares, or custom images).
• CSS Properties:
• list-style-type: Sets the bullet style (e.g., disc, circle, quare).
• list-style-image: Allows replacing bullets with an image.
• list-style-position: Places bullets inside or outside the text.
ul {
list-style-image: url('marker.png');
}

ul {
list-style-position: inside;
}

<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


2. Ordered Lists (<ol>)
• Description: An ordered list displays items in a specific sequence, typically numbered or lettered (such as 1, 2, 3 or A, B, C).
• CSS Properties:
• list-style-type: Sets the numbering style (e.g., decimal, upper-alpha, lower-roman).
• list-style-image: Adds a custom image marker (not commonly used in ordered lists).
• list-style-position: Positions the numbering inside or outside the text area.
ol {
list-style-image: url('marker.png');
}

ol {
list-style-position: inside;
}

<ol style="list-style-type: upper-alpha;">
<li>Step A</li>
<li>Step B</li>
<li>Step C</li>
</ol>
3. Shorthand Property
• list-style (Shorthand): Combines the three properties (list-style-type, list-style-image, and list-style-position) in a single line.
ul {
list-style: square inside;
}



Example:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Lists Example</title>
<style>
/* Unordered list with square bullets inside */
ul.custom-ul {
list-style-type: square;
list-style-position: inside;
}

/* Ordered list with Roman numerals and image markers */
ol.custom-ol {
list-style-type: upper-roman;
list-style-image: url('marker.png');
}
</style>
</head>
<body>

<h2>Unordered List with Custom Style</h2>
<ul class="custom-ul">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>

<h2>Ordered List with Custom Style</h2>
<ol class="custom-ol">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

</body>
</html>

CSS Tables

CSS tables are used to style HTML tables, enhancing their readability and visual structure. With CSS, you can customize aspects like borders, padding, layout, and alignment, making tables easier to interpret.

Example of basic table

1. Basic Table Styling
• Description: Basic styling properties control borders, padding, and alignment within table cells.
• Common Properties:
• border: Sets the table border style (e.g., solid, dashed).
• padding: Adds space inside each cell.
• text-align: Aligns the text in each cell (left, center, right).
table, th, td {
border: 1px solid black;
padding: 8px;
}
2. Border Collapsed vs. Separated Tables
• Description: Controls whether table borders are collapsed into a single border or separated.
• Property:
• border-collapse: Defines how cell borders are displayed. Options:
• collapse: Merges adjacent cell borders into a single border.
• separate: Keeps borders separate for each cell.
table {
border-collapse: collapse; /* Or 'separate' */
}
3. Table Width and Height
• Description: Sets the overall size of the table and adjusts column width or row height.
• Property:
• width: Sets the width of the entire table or specific columns.
• height: Sets the table or row height.
table {
width: 100%; /* Full width of the container */
}
4. Table Layout
• Description: Controls how table cells are sized, especially when dealing with dynamic content.
• Property:
• table-layout: Specifies the algorithm used to determine the layout of a table.
• auto: The table is automatically sized based on content.
• fixed: The width of columns is fixed, allowing faster layout rendering.
table {
table-layout: fixed;
}
5. Styling Alternating Rows (Zebra Stripes)
• Description: Adds alternating row colors for better readability.
• Method:Use nth-child selector to apply styles to odd/even rows.
tr:nth-child(even) {
background-color: #f2f2f2;
}
6. Caption Styling
• Description: Styles the table caption, which is the title or heading of the table.
• Properties:
• caption-side: Sets the caption above or below the table (top or bottom).
• text-align: Aligns the caption text.
caption {
caption-side: top;
font-weight: bold;
}
7. Column and Row Grouping
• Description: Styles specific columns or groups of rows with <colgroup> and <thead>, <tbody>, <tfoot>.
• Method:Use for column styling and <thead>, <tbody>, <tfoot> for row grouping.
<table>
<colgroup>
<col style="background-color: #f2f2f2;">
</colgroup>
<thead>
<tr><td>Header</td></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>

8. Table of CSS Table Properties:

Example:-

CSS Display Properties

The display property in CSS is used to control how an element is displayed or structured in the document layout. It defines the layout behavior of an element, impacting how it interacts with other elements in the DOM. Here’s a brief overview of common types of display values:

1. display: block
• Behavior: Elements take up the full width available, start on a new line, and push other elements to the next line.
• Examples: <div>, <p>, <h1>
2. display: inline
• Behavior: Elements only take up as much width as their content requires. They do not start on a new line.
• Examples: <span>, <a>
3. display: inline-block
• Behavior: Elements are inline but allow width and height settings, and margins and padding affect surrounding elements.
• Use Case: Useful for creating button-like elements or images with text alignment.
4. display: none
• Behavior: The element is completely removed from the layout, occupying no space at all.
• Use Case: Hide elements without deleting them from the document structure.
5. display: flex
• Behavior: Creates a flex container, allowing for flexible item alignment and spacing within the container.
• Use Case: Responsive layouts where items need to adjust positions and sizes.
6. display: hidden
• Behavior: Hides the element visually but leaves the space it occupies intact.
• Use Case: Temporarily hiding elements while keeping layout intact.

Examples:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Property Examples</title>
<style>

/* Display block */
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}

/* Display inline */
.inline-element {
display: inline;
background-color: lightcoral;
padding: 5px;
margin: 5px;
}

/* Display inline-block */
.inline-block-element {
display: inline-block;
background-color: lightgreen;
padding: 10px;
width: 100px;
margin: 5px;
}

/* Display none */
.none-element {
display: none;
background-color: yellow;
padding: 10px;
margin: 5px;
}

/* Display flex */
.flex-container {
display: flex;
justify-content: space-around;
background-color: lavender;
padding: 10px;
}

.flex-item {
background-color: lightpink;
padding: 10px;
margin: 5px;
width: 100px;
text-align: center;
}

/* Visibility hidden */
.visibility-hidden-element {
visibility: hidden;
background-color: lightgray;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>

<h2>CSS Display Property Examples</h2>

<!-- display: block -->
<div class="block-element">Block Element (takes full width)</div>

<!-- display: inline -->
<span class="inline-element">Inline Element 1</span>
<span class="inline-element">Inline Element 2</span>

<!-- display: inline-block -->
<div class="inline-block-element">Inline-block 1</div>
<div class="inline-block-element">Inline-block 2</div>

<!-- display: none (does not appear) -->
<div class="none-element">This is hidden with display: none.</div>

<!-- display: flex -->
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>

</div>

<!-- visibility: hidden -->
<div class="visibility-hidden-element">This element is hidden with visibility: hidden but takes up space.</div>

</body>
</html>

CSS width and max-width

In CSS, both width and max-width are used to define the size of an element, but they serve different purposes, especially when working with responsive web design.

1. width:
• The width property specifies the width of an element.
• It can be set in units like px, %, em, rem, etc.
• When used in responsive design, you can set the width to a percentage to make the element resize based on the viewport.
.element {
width: 50%; /* 50% of the container's width */
}
2. max-width:
• The max-width property specifies the maximum width an element can take.
• This is useful when you want an element to be responsive but not exceed a certain width, even on large screens.
• It's commonly used to prevent elements from becoming too large on wide screens.
.element {
width: 100%; /* Takes full width of the container */
max-width: 1200px; /* But never exceeds 1200px */
}

Example:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Box</title>
<style>

/* Base styles for the box */
.responsive-box {
width: 100%; /* Take up 100% of the parent container */
max-width: 800px; /* But never exceed 800px */
background-color: #4CAF50;
padding: 20px;
margin: 0 auto; /* Center the box horizontally */
color: white;
text-align: center;
}

/* Adjust the box size for smaller screens */
@media (max-width: 600px) {
.responsive-box {
width: 90%; /* Take up 90% of the screen width on small screens */
}
}

/* Adjust the box size for medium screens */
@media (max-width: 1024px) {
.responsive-box {
width: 80%; /* Take up 80% of the screen width on medium screens */
}
}
</style>
</head>
<body>

<div class="responsive-box">
<h1>Responsive Box</h1>
<p>This box adjusts its width based on the screen size!</p>
</div>

</body>
</html>



Explanation:

1. Base Styles (.responsive-box):
• The .responsive-box element has a width: 100%, meaning it takes up the full width of its parent container.
• The max-width: 800px ensures that the box will not grow beyond 800px in width, even on larger screens.
• The margin: 0 auto centers the box horizontally.
2. Responsive Media Queries:
• For small screens (max-width: 600px), the box will take up 90% of the screen width.
• For medium screens (max-width: 1024px), the box will take up 80% of the screen width.

CSS Position

In CSS, the position property is essential for controlling the placement of elements on a web page.

1. Static
• Syntax:- position: static;
• Description: This is the default value for HTML elements. The element follows the normal document flow and is not affected by top, right, bottom, or left properties.
• Use Case: Most commonly used when you want the element to flow naturally with other elements.
2. Relative
• Syntax:- position: relative;
• Description: The element is positioned relative to its original position in the document flow. You can use top, right, bottom, and left to offset it from this initial position.
• Use Case: Useful when you want to shift an element slightly from its default location without removing it from the document flow.
3. Absolute
• Syntax:- position: absolute;
• Description: The element is positioned relative to its closest positioned ancestor (an ancestor with a position other than static). If no such ancestor is found, it will be positioned relative to the <html> element. top, right, bottom, and left properties can move it from this reference point.
• Use Case: Ideal for elements that need to be placed independently of the regular flow of content, such as overlays or pop-up boxes.
4. Fixed
• Syntax:- position: fixed;
• Description: The element is positioned relative to the viewport, meaning it will stay in place even when the page is scrolled. top, right, bottom, and left properties control its exact position on the viewport.
• Use Case: Commonly used for sticky navigation bars or back-to-top buttons that need to remain visible regardless of scroll position.
5. Sticky
• Syntax:- position: sticky;
• Description: The element behaves like a relative element until it reaches a specified scroll position, at which point it becomes fixed within its containing block. top, right, bottom, and left are used to define when the "stickiness" should start.
• Use Case: Useful for elements like headers that stay visible while scrolling down until a certain point.
6. Inherit
• Syntax:- position: inherit;
• Description: The element inherits the position property of its parent element.
• Use Case: Helpful when you want an element to follow the positioning rules of its container without setting it explicitly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inherit Example</title>
<style>

/* Parent with a specific position */
.parent {
position: relative; /* This sets the position context */
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px;
}

/* Child inherits position from parent */
.child {
position: inherit; /* Inherits 'relative' from the parent */
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: coral;
}

/* Another example with absolute positioning */
.absolute-parent {
position: absolute; /* Absolute positioning */
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: lightgreen;
}

.absolute-child {
position: inherit; /* Inherits 'absolute' from the parent */
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: darkorange;
}
</style>
</head>
<body>

<div class="parent">
<div class="child">Inherits Relative</div>
</div>

<div class="absolute-parent">
<div class="absolute-child">Inherits Absolute</div>
</div>

</body>
</html>
7. Table of CSS position Properties:


Examples:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Examples</title>
<style>

.box {
width: 100px;
height: 100px;
margin: 10px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}

/* Static */
.static-box {
position: static;
background-color: gray;
}

/* Relative */
.relative-box {
position: relative;
top: 20px; /* Moves 20px down from its normal position */
background-color: green;
}

/* Absolute */
.absolute-container {
position: relative; /* This positions container to anchor absolute child */
width: 200px;
height: 200px;
background-color: lightgray;
margin: 20px 0;
}

.absolute-box {
position: absolute;
top: 10px;
left: 10px;
background-color: blue;
}

/* Fixed */
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
background-color: red;
}

/* Sticky */
.sticky-box {
position: sticky;
top: 0; /* Sticks to the top of the viewport when scrolling reaches this point */
background-color: orange;
}
</style>
</head>
<body>

<div class="box static-box">Static</div>

<div class="box relative-box">Relative</div>

<div class="absolute-container">
<div class="box absolute-box">Absolute</div>
</div>

<div class="box fixed-box"<>/span>Fixed</div>

<div class="box sticky-box">Sticky</div>

<p>Scroll down to see how the sticky element behaves when scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam nisl...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>

</body>
</html>

CSS Z-index

The z-index property in CSS controls the stacking order of positioned elements along the z-axis (depth). Elements with a higher z-index value appear above those with lower values when they overlap.

Key Points About z-index

1. Works with Positioned Elements: z-index only applies to elements that have a position value of relative, absolute, fixed, or sticky. It won’t work on elements with position: static;.
2. Higher Values on Top: Elements with higher z-index values will appear above elements with lower values.
3. Negative Values: z-index can take negative values, which will place the element below others with a higher z-index.
Syntax
.element {
position: relative; /* Must be positioned to use z-index */
z-index: 10;
}

Example:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Z-Index Example</title>
<style>

/* Base styling for all boxes */
.box {
width: 100px;
height: 100px;
position: absolute;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}

/* Different z-index values */
.box1 {
background-color: red;
top: 50px;
left: 50px;
z-index: 1;
}

.box2 {
background-color: green;
top: 80px;
left: 80px;
z-index: 2;
}

.box3 {
background-color: blue;
top: 110px;
left: 110px;
z-index: 3;
}
</style>
</head>
<body>

<div class="box box1">Z-Index 1</div>
<div class="box box2">Z-Index 2</div>
<div class="box box3">Z-Index 3</div>

</body>
</html>

Explanation:

• Red Box (box1): z-index: 1; - Positioned at the lowest layer.
• Green Box (box2): z-index: 2; - Stacks above the red box.
• Blue Box (box3): z-index: 3; - Stacks above both the red and green boxes.

CSS Overflow

The CSS overflow property specifies how content is handled when it overflows the dimensions of its container. It determines whether to clip, hide, or provide scrollbars for overflowing content.

Syntax

Values of overflow:-

1. visible (Default):
• Content overflows the container and is visible outside its boundaries.
• No clipping is applied.
.box {
width: 100px;
height: 100px;
overflow: visible;
}
2. hidden:
• Content that overflows the container is clipped and not visible.
• No scrollbars are provided.
.box {
width: 100px;
height: 100px;
overflow: hidden;
}
3. scroll:
• Scrollbars are added, allowing users to scroll through the overflowing content, even if the content fits within the container.
.box {
width: 100px;
height: 100px;
overflow: scroll;
}
4. auto:
• Scrollbars appear only when the content overflows.
• If the content fits, no scrollbars are displayed.
.box {
width: 100px;
height: 100px;
overflow: auto;
}
5. inherit:
• The element inherits the overflow value from its parent.
.box {
overflow: inherit;
}

Additional Overflow Properties:-

1. overflow-x: Controls the horizontal overflow (visible, hidden, scroll, or auto).
.box {
overflow-x: scroll;
}
2. overflow-y: Controls the vertical overflow (visible, hidden, scroll, or auto).
.box {
overflow-y: hidden;
}
3. overflow: clip (Newer):
• Content is clipped, and no scrollbars are provided, similar to hidden, but it doesn’t allow scrolling even programmatically.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Overflow Example</title>
<style>

.container {
width: 200px;
height: 100px;
border: 2px solid black;
margin: 20px auto;
padding: 10px;
font-size: 14px;
}

/* Overflow visible */
.visible {
overflow: visible;
background-color: lightblue;
}

/* Overflow hidden */
.hidden {
overflow: hidden;
background-color: lightgreen;
}

/* Overflow scroll */
.scroll {
overflow: scroll;
background-color: lightpink;
}

/* Overflow auto */
.auto {
overflow: auto;
background-color: lightyellow;
}
</style>
</head>
<body>

<h2>CSS Overflow Example</h2>
<p>Note: You have to add the more content in div box, you get more clarification on that.</p>
<div class="container visible">
<strong>Overflow: visible</strong><br>
This content will overflow the box and remain visible outside of it.
</div>

<div class="container hidden">
<strong>Overflow: hidden</strong><br>
This content will overflow the box but will be clipped, so you won't see it outside the box.
</div>

<div class="container scroll">
<strong>Overflow: scroll</strong><br>
This content will overflow the box and scrollbars will appear. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.
</div>

<div class="container auto">
<strong>Overflow: auto</strong><br>
This content will show scrollbars only if it overflows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.
</div>

</body>
</html>



Overflow Table:

CSS Float

The float property in CSS is used to position an element to the left or right of its container, allowing other elements to wrap around it.

Syntax:

Values of float

1. left:
• The element is floated to the left of its container.
• Content flows to the right of the floated element.
2. right:
• The element is floated to the right of its container.
• Content flows to the left of the floated element.
3. none (Default):
• The element is not floated and behaves as a block element in normal document flow.
4. inherit:
• The element inherits the float value from its parent.

Example

Explanation

• Left Float: The blue box is floated to the left; subsequent content wraps to its right.
• Right Float: The green box is floated to the right; subsequent content wraps to its left.
• No Float: The red box stays in the normal document flow.
• Clearfix: The clearfix ensures the parent container (.container) encompasses the floated elements.

CSS clear Example

CSS clearfix

When elements inside a container are floated, the container's height might collapse because floated elements are removed from the normal document flow. The clearfix technique ensures the container includes its floated children.

CSS clearfix Example

When to Use Clear or Clearfix

• clear:
• Use it when you want a specific element to avoid overlapping with floated elements.
• For example, a footer below floated content.
• clearfix:
• Use it when you want a parent container to properly include floated child elements.
• Commonly used in layouts with floated grid systems or floated navigation menus.

Key Differences

Both are essential for managing layouts with floated elements effectively.

CSS inline-block

The display property in CSS determines how an element is visually displayed in the document. Three common values are block, inline, and inline-block.

1. display: block
• Behavior: The element is a block-level element.
• Characteristics:
• Starts on a new line.
• Takes up the full width available by default.
• You can set width, height, margin, and padding.
• Examples: <div>, <p>, <section>, <header>, <footer>.
2. display: inline
• Behavior: The element is inline.
• Characteristics:
• Does not start on a new line.
• Takes up only as much width as needed (content width).
• Does not allow setting width or height.
• Respects margin and padding, but only horizontally.
• Examples: <span>, <a>, <strong>, <em>.
3. display: inline-block
• Behavior: A combination of inline and block behaviors.
• Characteristics:
• Does not start on a new line (like inline).
• Allows setting width, height, margin, and padding (like block).
• Sits inline with other elements but behaves like a block.
• Examples: Custom buttons, small boxes, aligned icons.

Examples

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display: block | inline | inline-block</title>
<style>

.block {
display: block;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
}

.inline {
display: inline;
background-color: lightgreen;
margin: 5px;
padding: 5px;
}

.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightcoral;
margin: 5px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>

<h2>Display: block</h2>
<div class="block">I am block</div>
<div class="block">I also start on a new line</div>

<h2>Display: inline</h2>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>

<h2>Display: inline-block</h2>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>

</body>
</html>



When to Use

• Block: Use for structuring layouts or containers.
• Inline: Use for styling text or small inline elements.
• Inline-Block: Use for elements that need to be inline but have block-like properties (e.g., custom buttons, badges, etc.).