Wold Wide Web

- commonly referred to as WWW, W3, or the Web—is a system of interconnected

public webpages accessible through the Internet.
- Web is a collection of information. i.e in the form of text / web pages /
websites.

Webpage
- A Webpage is a single document on the web, typically written in HTML
(Hypertext Markup Language) and accessible through a unique URL.
- Webpages can contain text, images, videos, and other multimedia elements.

Static Webpage

- These are the webpages which are common for everyone or These are the
webpages which will display the same information for all users.

Ex: wikipedia, javaTpoint, tutorialspoint,Personal blogs, informational

sites, and simple portfolios

- Characteristics:

- Fixed Content: The content does not change unless manually updated by
the developer.
- No Interactivity: Static webpages typically do not involve any user
interaction beyond basic navigation.
- Simple to Create: Static webpages are usually created using only HTML
and CSS.
- Performance: They load quickly because they don't require server-side
processing.

Dynamic Webpage
- These web pages display different information for users.
Ex: Instagram, youtube, linkedIn

- Characteristics:

- Interactive Content: The content can be tailored to the user, such

as showing personalized data or allowing users to interact with the page
(e.g., forms, search features).
- Server-Side Processing: Dynamic webpages often rely on server-side
languages like PHP, Python, or Node.js to fetch or manipulate data.
- Database Integration: They frequently interact with databases to
retrieve and display information dynamically (e.g., user profiles,
posts).
 Website

- A Website is a collection of related webpages hosted on a web server and

accessed through a common domain name.
- Examples include e-commerce sites, blogs, social media platforms, and
educational portals.

Network

- A Network is a group of interconnected devices (computers, servers, routers,

etc.) that can communicate with each other.
- The Internet is the largest and most well-known network, consisting of
millions of interconnected devices worldwide.
- Networks can be categorized into different types, such as LAN (Loc al Area
Network), WAN (Wide Area Network), and MAN (Metropolitan Area Network).

Single Page Application (SPA)

- A Single Page Application (SPA) is a web application that loads a single

HTML page and dynamically updates the content as the user interacts with the
app.

- Characteristics:

- Seamless User Experience: SPAs provide a smooth user experience

by not reloading the entire page for each interaction, reducing load
times.
- Client-Side Rendering: Most of the processing happens on the client
side (in the browser), using frameworks like React, Angular, or Vue.js.

- Examples: Gmail, Google Maps, Twitter, and many modern web apps.

Multi-Page Application (MPA)

- A Multi-Page Application (MPA) is a web application where each interaction

or request leads to the loading of a new page from the server.

- Characteristics:
- Traditional Structure: MPAs follow the traditional web structure
where each page is separate and involves a full -page reload.
- Server-Side Rendering: Most of the processing occurs on the server
side, where each request generates a new HTML page.

- Examples: E-commerce sites, news websites, and large corporate websites.

<!--! How the Web Works -->

- Client-Server Model: The web operates on a client-server model. The client

(usually a web browser) sends a request to a server (where the web site is
hosted), and the server responds with the requested webpage.

- HTTP/HTTPS Protocols: Communication between the client and server happens

over HTTP or HTTPS (secure version of HTTP). These protocols define how messages
are formatted and transmitted.

- DNS (Domain Name System): When a user enters a website’s URL, the DNS
translates the domain name into an IP address, which is used to locate the web
server where the website is hosted.

- Rendering: The server sends back the HTML, CSS, and JavaScript files to
the browser, which then renders the webpage for the user to view and interact
with.

- Browser: Browser is a client side application which is used to send requests

and get
back the responses from the server.

- URL: URL stands for uniform resource locator.

When we search for anything in the browser, It will generate an URL.
Ex: https://www.instagram.com

- Server: It is the place where all the websites are hoisted.

Ip address of all data were stored here.
<!-- ! Three-Tier Architecture -->

- Three-Tier Architecture is a software design pattern that divides an

application into three distinct layers, each with its own responsibilities:

1. Presentation Layer (Client Tier): This is the topmost layer where the
user interacts with the application. It typically includes the user interface
(UI) and the client-side logic (HTML, CSS, JavaScript).
2. Application Layer (Business Logic Tier): This middle layer processes
the business logic of the application. It handles the communication between the
presentation layer and the data layer, performing operations, calculations, and
decision-making.
3. Data Layer (Data Tier): The bottom layer is responsible for managing
data storage and retrieval. It interacts with databases or other storage systems
to store, query, and update data.

- Advantages of Three-Tier Architecture:

- Scalability: Each layer can be scaled independently to handle increased

load.
- Maintainability: The separation of concerns makes the system easier to
manage and update.
- Reusability: Components of each layer can be reused in other applications.
- Security: Each layer can implement its own security measures, adding
layers of protection.
 <!-- ! HTML -->

### Understanding the Full Form of HTML: Hypertext Markup Langu age

Hypertext

- Hypertext refers to text that contains links (called hyperlinks) to other

texts or documents.
- meaning users can jump from one document to another simply by clicking on
hyperlinks.

Markup

- Markup refers to the way tags are used to define the structure and
presentation of content in a document.
- The markup does not display directly on the webpage; instead, it instructs
the browser on how to render the content. For example, the `<p>` tag defines a
paragraph, and the `<h1>` tag defines the main heading.

<!--! Tags In HTML-->

### Notes on HTML Tags

1. What Are HTML Tags?

- Tags are predefined keywords in HTML that are enclosed in angular braces
(`< >`).
- Each tag has a specific purpose and used for, determining how content
within the tag is displayed or behaves on the webpage.

2. Syntax of HTML Tags

- The general syntax for HTML tags is as follows:

<tagname> content </tagname>

- Example:
- <p> Hello world </p>
- <b> Hello world </b>
 3. Types of HTML Tags
HTML tags are categorized into two types:

1. Paired Tags
- Definition: Paired tags require both an opening tag and a closing tag.
- Syntax: The closing tag is similar to the opening tag but includes a
forward slash (`/`).

- Example:

<p> Hello Web Dev </p>

- Explanation: In this example, `<p>` is the opening tag, and `</p>` is

the closing tag.

2. Unpaired Tags

- Definition: Unpaired tags, also known as self-closing tags, do not

require a closing tag.
- Example: <br> , <hr>, <input>
 <!-- ! Structure Of HTML -->

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

1. <!DOCTYPE html>

- The `<!DOCTYPE html>` declaration is the very first line in an HTML

document.
- Purpose: It tells the web browser which version of HTML the document is
written in.
- For modern HTML documents, use `<!DOCTYPE html>` to specify HTML5, the
latest standard.

2. <html>

- The `<html>` element is the root of an HTML document and contains all other
elements.
- Attributes: Typically includes the `lang` attribute to specify the language
of the document (e.g., `lang="en"` for English).

3. <head>

- The `<head>` section contains meta-information about the document, which

is not displayed directly on the webpage.

- Key Elements in the Head Section:

- <meta charset="UTF-8">: Specifies the character encoding for the
document, ensuring that text is displayed correctly.
- <title>: Sets the title of the webpage, which appears in the browser
tab.
- <meta name="viewport">: Ensures the page is responsive and displays
correctly on different devices.

4. <body>
- The `<body>` section contains the content that is displayed on the webpage,
including text, images, links, and other elements.
 <!-- ! Heading Tag -->

- Heading Tags are used in HTML to define headings and subheadings on

a webpage.
- They range from `<h1>` to `<h6>`, where `<h1>` is the highest (or
most important) level heading and `<h6>` is the lowest (or least
important).

Default Font Sizes for Heading Tags

- The default font size for each heading tag is defined in terms of em
units.
- 1 em is equivalent to 16 pixels (px), which is the standard size of
normal text in web browsers.

. Default Sizes for Each Heading

Tag

- `<h1>`: 2 em (32px)
- `<h2>`: 1.5 em (24px)
- `<h3>`: 1.17 em (18.72px)
- `<h4>`: 1 em (16px)
- `<h5>`: 0.83 em (13.28px)
- `<h6>`: 0.67 em (10.72px)

- Example:
<h1>Front-End Development</h1>

<!-- ! paragraph tag (<p> </p>) -->

- The `<p>` tag in HTML stands for paragraph.

- It is used to define and group a block of text as a paragraph,
separating it from other blocks of text on a webpage.

Syntax of the `<p>` Tag

- The `<p>` tag is a paired tag, meaning it has both an opening tag and
a closing tag.
-
<p>Content of the paragraph goes here.</p>
 <!--! Formatting Tags -->

- Formatting Tags are used in HTML to change the appearance of text or

content, applying different styles such as bold, italic, underline, and more.

List of Formatting Tags

1. `<b>` Tag
- used for: Displays the content in bold format.

- Example: <b>This text is bold.</b>

2. `<strong>` Tag
- used for: Displays the content in bold format, and conveys that the
information is important.

- Example: <strong>Important text in bold.</strong>

3. `<i>` Tag
- used for: Displays the content in italic format.

- Example: <i>This text is italic.</i>

4. `<em>` Tag
- used for: Displays the content in italic format and adds emphasis, an
alternative to the `<i>` tag.

- Example: <em>Emphasized italic text.</em>

5. `<u>` Tag
- used for: Underlines the content.

- Example: <u>This text is underlined.</u>

6. `<ins>` Tag
- used for: Underlines the content, an alternative to the `<u>` tag, often
used to indicate inserted text.

- Example: <ins>Inserted and underlined text.</ins>

7. `<strike>` Tag
- used for: Strikes off (crosses out) the content.

- Example: <strike>This text is struck off.</strike>

8. `<del>` Tag
- used for: Strikes off the content, an alternative to the `<strike>`
tag, often used to indicate deleted text.

- Example: <del>Deleted text.</del>

9. `<q>` Tag
- used for: Provides quotations around the content.

- Example: <q>This is a quoted text.</q>

10. `<mark>` Tag

- used for: Highlights the content with a yellow background color.

- Example: <mark>This text is highlighted.</mark>

11. `<big>` Tag

- used for: Displays the content with a larger font size.

- Example: <big>This text is larger.</big>

12. `<small>` Tag

- used for: Displays the content with a smaller font size.

- Example: <small>This text is smaller.</small>

13. `<sup>` Tag

- used for: Displays the content as superscript, raising it above
the baseline.

- Example: H²O

14. `<sub>` Tag

- used for: Displays the content as subscript, lowering it below
the baseline.

- Example: CO₂

15. `<code>` Tag

- used for: Displays the content in the "monospace" font family, often
used for code snippets.

- Example: <code>print("Hello, World!")</code>

16. `<pre>` Tag

- used for: Preserves both spaces and line breaks, displaying
content exactly as written, often used
for preformatted text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatting Tag</title>
</head>
<body>
<h1>Formatting Tag</h1>
<hr>
<p> <b>this is b tag</b></p>
<p> <strong>this is strong tag</strong> </p>
<p> <i>this is i tag</i> </p>
<p> <em>this is em tag</em> </p>
<p> <u>this is u tag</u> </p>
<p> <ins>this is ins tag</ins></p>
<p> <strike>this is strike tag</strike></p>
<p> <del>this is del tag</del></p>
<p> <mark> this is mark tag</mark></p>
<p>this is sup tag => a ² </p>
<p> (a+b)² = a ² + b² + 2ab</p>
<p> this is sub tag=> H₂O</p>
<p> H₂ + SO₄ = H₂SO₄</p>

<p> <q>this is q tag</q> </p>

<p>Swami Vivekananda said <q>Be not Afraid of anything. You will do
Marvelous work. it is Fearlessness that brings Heaven even in a moment <q>
</p>

<p> this is code tag=><code>cosole.log("hello from javaScript")</code></p>

<p> <code> System.out.println("hello from java") <br>

print("hi from python") </code>
</p>

<p> <small>this is small tag</small> </p>

<p> <big>this is big tag</big></p>

<p>
<pre>
this is pre tag
hello
hi
bye
</pre>
</p>
</body>
</html>
 <!-- ! HTML Elements -->

- An HTML Element is a combination of an opening tag, content, and a

closing tag.

- Basic Structure:

<tagname>Content goes here</tagname>

- Example: <p>This is a paragraph element.</p>

Classification of HTML Elements

1. Inline Level Elements

2. Block Level Elements
3. Inline-Block Level Elements

1. Inline Level Elements

Inline elements are displayed in the same line

here we cannot assign height and width properties directly to inline
elements.
- Examples: <b>,<i>,<span> etc.

2. Block Level Elements

These elements occupy the entire width of their parent container or
viewport, starting on a new line.
We can assign height and width properties to block -level elements.

- Examples: <h1>,<div>,<p>

3. Inline-Block Level Elements

- Characteristics:

These elements are displayed in the same line as neighboring elements,

similar to inline elements but here we can assign height and width properties
to inline-block elements, giving them block-like characteristics.

- Examples: `<img>`, `<input>`, `<button>`, `<select>`, `<textarea>`

 <!-- ! HTML Attributes -->

What are HTML Attributes?

- They provide additional information or functionality to HTML elements.

- Attributes are placed inside the opening tag of an element and typically
consist of a name-value pair.

Syntax of Attributes
- Attributes are added within the opening tag of an element and follow this
format:

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

<!-- ! HTML <img> Tag -->

- The `<img>` tag is used to add images into a web page.

- It is a self-closing tag, meaning it does not require a separate closing
tag.
- The `<img>` tag is an inline-block element, which means it behaves like
an inline element but can have width and height properties.

2. Syntax of the `<img>` Tag

- The basic syntax for the `<img>` tag includes the source of the image and
an optional alternate text:

<img src="path/to/image.jpg" alt="Description of image">

3. Attributes of the `<img>` Tag

- The `<img>` tag has several important attributes that define the image's
behavior and appearance:

- `src` (Source):
- Specifies the path to the image file.
- This path can be a relative URL (based on the location of the HTML
file) or an absolute URL (complete path).

- `alt` (Alternate Text):

- Provides alternative text for the image if it cannot be displayed.

- `height`:
 - Defines the height of the image in pixels or as a percentage of its
original size.

- `width`:
- Defines the width of the image in pixels or as a percentage of its
original size.

- Example:

<img src="images/photo.jpg" alt="A beautiful sunset" width="300">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Tag</title>
</head>
<body>
<h1>Image Tag</h1>
<p>here we will learn how to add image</p>

<!-- taking image from web -->

<img src="https://images.pexels.com/photos/994605/pexels-photo-
994605.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="sea image"
height="200" width="200">

<img src="https://images.pexels.com/photos/189349/pexels-photo-
189349.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="sun set"
height="200" width="300">

<!-- taking image from system -->

<img src="./images/garden.jpeg" alt="garden image" height="300">

</body>
</html>
 <!-- ! LIST IN HTML -->

- HTML lists allow you to group a set of related items together in a

structured format.
- Lists in HTML are categorized into three types:
1. Ordered List
2. Unordered List
3. Description List

1. Ordered List
- Purpose: Used to group related items in a sequential, numbered format. It
is often referred to as a Number List.
- Tags:
- <ol>: Denotes the start of an ordered list.
- <li>: Indicates each list item within the ordered list.
- Attributes:
- type: Specifies the type of numbering sequence.
- Values:
- 1 (default) - Numeric (1, 2, 3, ...)
- A - Uppercase letters (A, B, C, ...)
- a - Lowercase letters (a, b, c, ...)
- I - Uppercase Roman numerals (I, II, III, ...)
- i - Lowercase Roman numerals (i, ii, iii, ...)
- start: Specifies the starting number of the list.
- Values:
- 1 (default)
- Any other number to start the list from.
- reversed: Reverses the order of the list items.

2. Unordered List
- Purpose: Used to display a set of related items without any particular
order. Commonly referred to as a Bulleted List.
- Tags:
- <ul>: Indicates the start of an unordered list.
- <li>: Indicates each list item within the unordered list.
- Attributes:
- type: Specifies the type of bullet symbol.
- Values:
- disc (default) - Solid circle
- circle - Hollow circle
- square - Solid square
- none - No bullet, just plain list items
 3. Description List
- Purpose: Used to display a list of terms and their associated
descriptions. This is often used for glossaries, or to define terms and their
meanings.
- Tags:
- <dl>: Indicates the start of a description list.
- <dt>: Represents a description term.
- <dd>: Represents a description definition, providing more information
about the term.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List</title>
</head>
<body>
<h1>List</h1>
<p>here we will learn about list</p>
<hr />

<h2>Unordered List</h2>

<!-- by default it will give disc in unordered list -->

<ul>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<!-- type attribute we are using to change the list style -->

<ul type="circle">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>
 <ul type="square">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<ul type="none">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ul>

<!-- ! nested list -->

<h3>Nested List</h3>

<ul>
<l>Science</l>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Bio</li>
</ul>
<li>Arts</li>
<ul>
<li>Geography</li>
<li>History</li>
<li>English</li>
</ul>
<li>Commerce</li>
</ul>

<!-- ! Ordered List -->

<!-- by default it will give numbers for list style -->

<h2>Ordered List</h2>
<ol>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>
 <ol type="A">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="a">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="i">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<ol type="I">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<h2> reversed order list</h2>

<!-- it is used to reverse the order of the list style -->
<ol type="a" reversed>
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>

<h2> start attribute</h2>

<!-- start attribute is used to define the start point for integer list
style -->
<ol type="1" start="10">
<li>Milk</li>
<li>Tea</li>
<li>Coffee</li>
<li>Sugar</li>
</ol>
 <!-- ! Description List -->

<h2>Description List</h2>

<dl>
<dt>HTML</dt>
<dd>Hyper Text MarkUp language</dd>
</dl>

</body>
</html>
 <!-- ! TABLE -->

- An HTML table is used to organize data into rows and columns, providing a
structured layout for displaying information.

Basic Structure of an HTML Table

- An HTML table is composed of several elements:

- <table>: This tag defines the table itself.
- <tr>: Represents a table row.
- <th>: Represents a header cell within a table row, usually containing
column headings. It is bold and centered by default.
- <td>: Represents a standard data cell within a table row.

Attributes of the <table> Tag

- border: Specifies the width of the border around the table and cells. The
default value is 0 (no border).

- cellpadding: Specifies the amount of space between the cell content and
the cell border.

- cellspacing: Specifies the amount of space between the borders of

adjacent cells.

- width and height: Specifies the dimensions of the table. These can be set
in pixels or as a percentage of the containing element.

Merging Cells

- colspan: Merges two or more columns within a row.

- rowspan: Merges two or more rows within a column.

Advanced Table Elements

- <caption>: Adds a title or description to the table. It appears above the

table by default.

- <thead>: Groups the header content (typically <th> elements) in a table.

- <tbody>: Groups the body content (typically <td> elements) in a table.

- <tfoot>: Groups the footer content in a table.

#### 1. ** Anchor Tag **
- The **anchor tag (`<a>`)** is used to create hyperlinks, which allow
users to navigate from one webpage to another or to different sections within
the same webpage.
- It can also be used to link to other types of resources, such as images,
files, or email addresses.

#### 2. **Basic Syntax**

<a href="URL">Link Text</a>

- **`href`**: The most important attribute of the anchor tag. It specifies

the destination URL of the link.
- **Link Text**: The clickable text or content that the user interacts
with.

#### 3. **Attributes of the Anchor Tag**

- **`href` (Hypertext Reference)**: Specifies the URL to which the link
points.

- **`target`**: Specifies where to open the linked document. Common values

include:
- **`_blank`**: Opens the link in a new tab or window.
- **`_self`** (default): Opens the link in the same tab or window.

- **`title`**: Provides additional information when the user hovers over

the link.

#### 4. **Types of Links**

- **External Link**: A link that points to a different website or resource.

- **Internal Link**: A link that points to a different section within the

same website or page.

- **Anchor Link (Same Page)**: Links to a specific section within the same
page using an ID.

#### 5. **Email Links**

- it will go to email.

#### 6. **Download Links**

- we can download a file .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>link</title>
</head>
<body>
<h1 id="link">link</h1>

<a href="#heading2">
<p><i>go to heading 2</i></p>
</a>

<!-- going to different webpage -->

<h2>it will go to different webpage</h2>

<a href="https://www.google.com/" >

google
</a>
<a href="https://x.com/?lang=en">
twitter
</a>

<!-- navigate to differnet html file from my system -->

<h2>it will go to different file that I have created </h2>

<a href="./task/resume.html">
go to resume
</a>

<!-- target attribute -->

<h2>it will open in new tab</h2>

<a href="https://www.google.com/" target="_blank">
google
</a>

<a href="https://www.hotstar.com/in/home?ref=%2Fin" target="_blank">

hello
</a>
<a href="./list.html" target="_blank">
go to list
</a>
 <h2> making image as hyper image</h2>
<a href="https://en.wikipedia.org/wiki/Ironman" target="_blank">
<img src="https://www.shutterstock.com/image-vector/ironman-art-
design-vector-logo-260nw-2276342089.jpg" alt="ironman" height="150">
</a>

<h2> making email and phno hyperlink</h2>

<p>Email : <a href="mailto:tony@gmail.com">tony@gmail.com</a> </p>

<p>phone : <a href="tel:+917878675645">+917878675645</a> </p>

<h2>title attribute</h2>

<a href="https://www.amazon.in "> amazon</a>

<h1> this heading 1</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
dolorum quibusdam doloremque expedita nam aliquid, consectetur fugiat quia
aliquam! </p>

<h2 id="heading2">this is heading2</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione
sunt corporis molestiae,
</p>

<!-- download -->

<a href="./resume.pdf">resume</a>

<a href="#link">
<p>go to top</p>
</a>

</body>
</html>
 <!-- ! marquee tag -->

The <marquee> tag is used to create scrolling text or other elements in a

webpage.

Syntax

<marquee behavior="" direction="">Content</marquee>

- Content: The text, images, or other HTML elements that will scroll inside
the <marquee> tag.

Attributes of the <marquee> Tag

- direction:
- Specifies the direction in which the content should scroll.
- Values:
- left (default) → Scrolls content from right to left.
- right → Scrolls content from left to right.
- up → Scrolls content from bottom to top.
- down → Scrolls content from top to bottom.

- behavior:
- Specifies the scrolling behavior of the content.
- Values:
- scroll (default) → Content scrolls continuously.
- slide → Content slides in, then stops.
- alternate → Content alternates back and forth (bounces).

- scrollamount:
- Specifies the speed of the scrolling content.
- Values:
- Any number (default is 6).
- Larger numbers make the content scroll faster.

- loop:
- Specifies how many times the content should scroll.
- Values:
- Any number (default is infinite scrolling).

- height:
- Specifies the height of the marquee container.
- Values:
- Any valid height value (e.g., pixels, percentage).
 - width:
- Specifies the width of the marquee container.
- Values:
- Any valid width value (e.g., pixels, percentage).

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

<marquee behavior="scroll" direction="right" scrollamount="20">

<img
src="https://i.pinimg.com/originals/8a/6b/19/8a6b1994f66c2d5e6967ad1655300762.
gif" alt="" height="200">
</marquee>

<marquee behavior="scroll" direction="" scrollamount="20">

<img
src="https://i.pinimg.com/originals/80/bd/b2/80bdb25f4cd1ac2d9666428f37553932.
gif" alt="" height="200">
</marquee>

<h1>Today's News Headlines</h1>

<marquee behavior="scroll" direction="left">

Breaking: New technology trends are emerging worldwide!
| Sports Update: Local team wins the championship!
| Weather Alert: Heavy rain expected in the northern region.
</marquee>

<h2>Important Alerts</h2>

<marquee behavior="scroll" direction="right">

Alert: System maintenance is scheduled for tonight at 12 AM.
| Warning: Road closure on Main Street due to construction work.
</marquee>
<marquee behavior="scroll" direction="right" scrollamount="20">
<img
src="https://media2.giphy.com/avatars/Quadrosautomoveis/qXmfT3rgamfY.gif"
alt="" height="200">
</marquee>
</body>
</html>
<!-- ! Audio -->

<audio> Tag
The <audio> tag is used to embed sound content in a webpage, such as music or
other audio files.

Attributes of <audio> Tag

- controls:
- Displays audio controls like play, pause, and volume.

- autoplay:
- Automatically starts playing the audio once it loads.

- loop:
- Repeats the audio indefinitely.

- muted:
- Mutes the audio.

<!-- ! Video -->

<video> Tag
The <video> tag is used to embed video content into a webpage.

Attributes of <video> Tag

- controls:
- Displays video controls like play, pause, volume, and fullscreen.

- autoplay:
- Automatically plays the video when the page loads.

- loop:
- Repeats the video indefinitely.

- muted:
- Mutes the video by default.

- width and height:

- Specifies the width and height of the video.
<!-- ! iframe -->

<iframe> Tag
The <iframe> tag is used to embed another HTML document or external content
into the current webpage.
It is often used to embed videos, maps, or other websites.

Attributes of <iframe> Tag

- src:
- Specifies the URL of the embedded content.

- width and height:

- Defines the size of the embedded iframe.

- frameborder:
- Defines whether the iframe should have a border. 0 for no border and 1 for
border.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Media</title>
</head>
<body>
<h1>we will add audio here </h1>

<audio src="./images/despacito.mp3" controls loop muted></audio>

<h2> here we will add video </h2>

<video src="./images/bahubali.mp4" controls height="200" width="300"

poster="https://preview.redd.it/bahubali-appreciation-post-v0-
59jqk7sjj87d1.jpeg?auto=webp&s=f71a57cc07fc363017e9b7a568cf0a39794e4667"></vid
eo>

<h1> adding other webpage in my webpage</h1>

<iframe src="./anchor.html" frameborder="1" height="400"

width="600"></iframe>
 <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.776766621145!2
d80.20752337442899!3d13.049876613158599!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
1!3m3!1m2!1s0x3a5266e9de03452f%3A0x595d793b70b1e8f!2sQSpiders%20Vadapalani!5e0
!3m2!1sen!2sin!4v1726486450879!5m2!1sen!2sin" width="300" height="300"
style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>

<h1> Adding youtube vdo in my webpage</h1>

<iframe width="560" height="315"

src="https://www.youtube.com/embed/EXeTwQWrcwY?si=IEuXi6yF9BoDbzDQ"
title="YouTube video player" frameborder="0"></iframe>
</body>
</html>
 <!-- ! Forms -->

Forms in HTML are used to collect user information.

Forms are block-level elements, while most of the form elements inside them
are inline-level.

Tags Used in Forms:

1. <form>:
- It is a semantic element that defines the beginning of the form.
- It contains all the form-related elements.

Example:

<form action="/submit" method="post">

<!-- form elements go here -->
</form>

2. <label>:
- Specifies the purpose of the input field.
- It's linked to the <input> field using the for attribute, which matches
the id of the input element.

Example:

<label for="userName">Name:</label>
<input type="text" id="userName">

3. <input>:
- Used to collect user data.
- There are various types such as text, email, password, number, etc.

Example:

<input type="email" id="userEmail">

4. <select>:
- Creates a dropdown list from which users can select options.

Example:

<label for="skills">Skills:</label>
<select id="skills">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>

5. <optgroup>:
- Groups options together within a dropdown list for better organization.

6. <option>:
- Defines the options within a dropdown list.

7. <fieldset>:
- Groups form elements together and provides a border around them.

Example:

<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name">
</fieldset>

8. <legend>:
- Provides a caption for the <fieldset> group.

9. <textarea>:
- Used to collect multi-line text input.
- The rows and cols attributes specify the visible height and width.

Example:

<textarea rows="5" cols="30"></textarea>

10. <button>:
- Creates a clickable button in the form. It can be used to submit or
reset the form based on the type attribute.

Example:

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

Attributes of the <form> Tag:

1. action: Specifies the URL where form data will be submitted.

Example:

<form action="/submit-data">

2. method: Specifies how the data is sent to the server (GET or POST).
- GET: Sends data in the URL, not secure.
- POST: Sends data securely in the HTTP body.

Example:

<form method="post">

3. autocomplete: Defines whether form inputs should have auto-complete enabled

(on or off).

Example:

<form autocomplete="on">
 Attributes of the <input> Tag:

1. type: Specifies the type of input field (e.g., text, email, password,
etc.).
2. id: Provides a unique identifier for the input element.
3. name: Associates a name with the input field, used for form submission.
4. value: Defines the initial value of the input field.
5. required: Makes the field mandatory to fill before submission.
6. readonly: Prevents users from modifying the input field value.
7. disabled: Disables the input field.
8. min, max, minlength, maxlength: Used to define the minimum and maximum
values or lengths for input.
9. placeholder: Displays a hint text inside the input field.
10. autofocus: Automatically focuses on the input field when the page loads.
11. step: Specifies the legal number intervals for numeric fields (e.g.,
step="2" means 2, 4, 6, etc.).

### Values of type Attribute in HTML <input> Tag

The type attribute of the <input> tag in HTML determines the kind of input
field displayed on the webpage. Here are the common values of the type
attribute:

1. text:
- Allows users to enter regular text.
- Default input type.

Example:

<input type="text">

2. email:
- Used for email input. It automatically validates the input for an email
format.

Example:

<input type="email">
3. password:
- Displays input as masked characters (dots or asterisks), hiding the
user's input.

Example:

<input type="password">

4. number:
- Allows users to enter numerical values. It can have min, max, and step
attributes for validation.

Example:

<input type="number" min="1" max="100" step="1">

5. tel:
- Allows users to input telephone numbers. It doesn't enforce specific
validation but provides a numeric keyboard on mobile devices.

Example:

<input type="tel">

6. radio:
- Creates a radio button, allowing users to select one op tion from a group.

Example:

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

7. checkbox:
- Creates a checkbox, allowing users to select multiple options
independently.

Example:

<input type="checkbox" value="subscribe"> Subscribe

8. button:
- Creates a clickable button. Typically, you can use JavaScript to define
what happens when it’s clicked.

Example:

<input type="button" value="Click Me">

9. submit:
- Creates a submit button that submits the form data to the server.

Example:

<input type="submit" value="Submit Form">

10. reset:
- Resets all the form fields to their default values.

Example:

<input type="reset" value="Reset Form">

11. search:
- Creates a search input field, often styled with a "clear" button to
reset the search query.

Example:

<input type="search">

12. date:
- Allows users to select a date using a date picker.

Example:

<input type="date">

13. time:
- Allows users to select a time.

Example:

<input type="time">
14. week:
- Allows users to select a specific week in a year.

Example:

<input type="week">

15. month:
- Allows users to select a specific month and year.

Example:

<input type="month">

16. color:
- Allows users to select a color from a color picker.

Example:

<input type="color">

17. image:
- Creates a submit button in the form of an image.

Example:

<input type="image" src="submit.png" alt="Submit">

18. file:
- Allows users to upload files from their device.

Example:

<input type="file">
19. url:
- Specifies a URL input field. It automatically validates the input for
URL format.

Example:

<input type="url">

20. range:
- Creates a slider input that allows users to select a numeric value
within a specific range.

Example:

<input type="range" min="1" max="100">

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

<form action="" autocomplete="off" method="">

<fieldset>
<legend>User Info</legend>
<label for="uname">Name</label>
<input
type="text"
id="uname"
placeholder="enter your name"
name=""
required
maxlength="6"
/>
<br /><br />

<label for="uemail">Email</label>
<input
type="email"
name="email"
id="uemail"
placeholder="enter your email"
/>
 <br /><br />

<label for="upass">Password</label>
<input
type="password"
name="pass"
id="upass"
placeholder="enter password"
minlength="6"
/>
<br /><br />
</fieldset>

<fieldset>
<legend>Personal Info</legend>

<label for="uage">Age</label>
<input type="number" name="" id="uage" /> <br /><br />

<label for="phno">Ph no</label>

<input type="tel" name="" id="phno" /> <br><br>

<label for="address">Address</label> <br><br>

<textarea name="" id="address" rows="10" cols="20"></textarea>
</fieldset>

<fieldset>
<legend>Timing</legend>

<label for="date">Date</label>
<input type="date" name="" id="date" /> <br /><br />

<label for="time">Time</label>
<input type="time" name="" id="time" /> <br /><br />

<label for="week">Week</label>
<input type="week" name="" id="week" /> <br /><br />

<label for="month">Month</label>
<input type="month" name="" id="month" /> <br /><br />
</fieldset>

<fieldset>
<legend>CheckBox-RadioButton</legend>

<label for="">Subject</label> <br /><br />

<input type="checkbox" name="" id="html" value="html" />
<label for="html">HTML</label>
 <input type="checkbox" name="" id="css" value="css" />
<label for="css">CSS</label>

<input type="checkbox" name="" id="js" value="js" />

<label for="js"> JavaScript</label>

<br /><br />

<label for="">Gender</label> <br /><br />

<input type="radio" name="gender" id="" value="male" /> Male
<br /><br />
<input type="radio" name="gender" id="" value="female" /> Female
<br /><br />
<input type="radio" name="gender" id="" value="others" /> Others
<br /><br />
</fieldset>

<fieldset>
<legend>Select options</legend>
<label for="">Select Subject</label> <br /><br />
<select name="subject" id="">
<optgroup label="Frontend">
<option value="HTML">html</option>
<option value="CSS">css</option>
<option value="JS">javascript</option>
</optgroup>
<optgroup label="backend">
<option value="java">java</option>
<option value="python">python</option>
<option value="c">c</option>
</optgroup>
</select>
</fieldset>

<fieldset>
<legend>buttons</legend>

<label for="num">select number</label>

<input type="range" name="number" id="num" min="10" max="20" />
<br /><br />
<input type="submit" value="sign up" />
<input type="reset" value="reset" />
</fieldset>

</form>
</body>
</html>
 <!-- ! Inline CSS -->

It is the way of writing the css in same line.

for this we need style attribute .

<!--! Internal CSS : -->

it is the way of writing the css in same html file by using <style> tag.

<!--? notes -->

when we will apply inline and internal css on same elemen t.

inline css will be applyed.

<!--? syntax of selector -->

selectorName {
propertyName : value ;
propertyName : value;
.
.
.
propertyName:value
}

example :

p {
color:blue;
font-sixe: 20px;
}
 <!-- ! external css -->

here we are writing our css code in separate css file.

for creating css file we need .css ext
then we have to link our css file with our html file.
for that we need <link> tag.
in <link> tag we have two attributes. (rel, href)

<link rel="stylesheet" href="./style.css">

<!--! Notes -->

if we apply inline, internal and external css on the same element. the
inline css will be applyed.

internal and external css has same priority. which one will be at the end
, that will be applyed.

<!-- ! Selectors -->

<!--? types : -->

1. Simple Selector
2. Combinator Selector
3. Pseudo Class Selector
4. Pseudo Element Selector
5. Attribute Selector

<!--! 1. Simple Selectors -->

TagName
Grouping (,)
Universal (*)
Id Name (#)
Class Name (.)

<!-- ? TagName: -->

○ To target the element based on tagname itself we have to use

tagName selector.
○ The symbol was the tagname itself.
 <!-- ? Id Name: -->

○ To target the elements uniquely we have to use an id name.

○ In CSS id name can be duplicated also there is no problem,
<!--! But once we moved to advanced languages, Repetition of id name
will not work. So it is highly recommended not to use it from now on. -->
○ The Symbol used is hash (#).

<!-- ? Class Name: -->

○ To target the specific elements on the basis of class name we have to

use class name.
○ Class attribute allows multiple identifier names in the same
attribute.
○ Class names can be repetitive also.
○ The symbol used is dot (.)

<!--? Grouping: -->

○ To target multiple elements at a time we have to use a grouping

selector.
○ Whenever we need to pass similar properties for multiple elements
we can use a grouping selector.
○ The symbol used to combine all elements is comma (,)

<!--? Universal: -->

○ It will target all the elements in the document including body tag
too.
○ The symbol used is asterisk (*).
simpleSelector.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple selector</title>
<link rel="stylesheet" href="./simpleSelector.css">
</head>
<body>

<div class="box">
<h1>this is h1 tag</h1>
<p id="p1">this is paragraph tag</p>
<p id="p2">this is another paragraph tag</p>
<a href="">this is anchor tag</a>
<p class="para">this is para</p>
<button>click</button>
<button>submit</button>
</div>

<div class="box">
<p class="para" >this is another para in another div</p>
</div>
</body>
</html>
simpleSelector.css

/* ! universal selector */

*{
color:chocolate
}

/* ! tagname selector */

p{
color:red;
}

/* ! id selector */

#p1{
color:blue;
}

/* ! group */

#p2, #p1,button{
color:blue;
}

/* ! class */

.box{
background-color: aqua;
}

.para{
color:red;
}
 <!--! Combinator Selector -->

It is a combination of 2 simple selectors.

Based on the relation b/w 2 elements the css will target the elements.
They are:

1. Descendent Selector ( )
2. Direct Child Selector (>)
3. Adjacent Sibling Selector (+)
4. General Sibling Selector (~)

<!-- ? Descendent Selector: -->

○ It will target all the children, grandchildren , great grandchildren and

so on.
○ The symbol used is space ( ).

<!-- ? Direct Child Selector: -->

○ It will target only the children but not grandchildren , great

grandchildren and so on.
○ The symbol used is greater than ( > ).

<!--? Adjacent Sibling Selector: -->

○ It will target only the first sibling of the element.

○ The symbol used is plus ( + ).

<!-- ? General Sibling Selector: -->

○ It will target all the siblings of the element.

○ The symbol used is plus ( ~ ).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Combinator Selector</title>
<link rel="stylesheet" href="./combinator.css" />
</head>
<body>
<div class="container">
<h1>this is heading 1</h1>
<p>Lorem ipsum dolor sit amet.</p>

<div class="container2">
<p>this is another paragraph</p>
</div>

<p>hiiiiiiiiiiii</p>
</div>

<div class="container3">
<h1>this is heading inside con3</h1>
<p>this is para inside container3</p>

<p id="p1">para-1</p>
<p>para-2</p>
<p>para-3</p>
<p>para-4</p>
<p>para-5</p>
<p>para-6</p>
</div>
</body>
</html>
/* ! descendant selector */

.container3 p{
color:green;
}

.container p{
color:red;
}

/* ! direct child selector */

.container > p{
color:red;
}

.container > .container2 > p{

color:blue;
}

/* ! adjacent sibling selector */

.container3 > #p1 + p{

color:blue;
}

/* ! General Sibling selector */

.container3 > #p1 ~ p{
color:aqua
}
 <!-- ! div And span Tag -->

<div> Tag (Block-Level Element)

- The <div> tag is a block-level container used to group elements together

for styling and layout purposes. It doesn't inherently have any meaning or
style.

- Characteristics:
- Block-level element: Occupies the full width available.
- Can contain any HTML elements such as text, images, other divs, forms,
etc.
- Useful for dividing a webpage into sections.

- Usage:
- Ideal for creating large structural sections like headers, footers,
content areas, and navigation menus.
- Helps in applying CSS styles and JavaScript functionality to groups of
elements.

<span> Tag (Inline-Level Element)

- The <span> tag is an inline-level container used to group text or other

inline elements. Like <div>, it has no default styling or meaning but is
useful for applying specific styles to inline content.

- Characteristics:
- Inline-level element: Occupies only the space it needs (doesn't start on a
new line).
- Cannot contain block-level elements (like <div>, <h1>, etc.).
- Mainly used for styling a specific part of the text or inline elements.

- Usage:
- Ideal for applying styles or JavaScript to a small portion of text or
elements within a larger block of content.
- Commonly used within paragraphs (<p>) to style or modify part of the text.

### When to Use:

- Use <div>: When you need to group large sections of content or create page
layout structures.
- Use <span>: When you want to apply styles or modify small parts of inline
content without affecting the overall layout.
 <!-- ! semantic tags -->

- Definition:
Semantic tags are HTML elements that clearly describe their meaning both to
the browser and to developers.
Unlike non-semantic tags (<div>, <span>), semantic tags provide meaning to the
content enclosed within them.

- Purpose: The primary purpose of semantic tags is to improve the structure,

readability, and accessibility of web pages, making it easier for search
engines, screen readers, and developers to understand the layout and content.

### Common Semantic Tags

1. <header>
- Definition: Represents the introductory section or a group of navigation
links in a webpage.
- Usage: Typically contains logo, site name, and navigation elements.
- Example:

<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>

2. <nav>
- Definition: Represents a section of the page that links to other pages or
to parts within the same page.
- Usage: Usually used for navigation bars or menus.
- Example:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
3. <main>
- Definition: Represents the main content of the webpage that is unique to
the document, excluding headers, footers, and sidebars.
- Usage: Used for the central content of the webpage.
- Example:

<main>
<h2>Welcome to Our Website</h2>
<p>This is the primary content of the page.</p>
</main>

4. <article>
- Definition: Represents an independent piece of content that could be
independently distributed or reused, such as blog posts, news articles, or
user comments.
- Usage: Used for self-contained, reusable content.
- Example:

<article>
<h3>Blog Post Title</h3>
<p>This is a blog post description.</p>
</article>

5. <section>
- Definition: Represents a generic section of a document or application.
Used to group related content together.
- Usage: Used for thematic grouping of content.
- Example:

<section>
<h2>Our Services</h2>
<p>We provide high-quality services to our customers.</p>
</section>

6. <aside>
- Definition: Represents content that is tangentially related to the
content around it, such as sidebars or pull quotes.
- Usage: Typically used for supplementary content.
- Example:

<aside>
<h4>Related Articles</h4>
<p>Check out these articles for more information.</p>
</aside>
7. <footer>
- Definition: Represents the footer of a section or page, typically
containing copyright information, links to privacy p olicies, or contact
details.
- Usage: Found at the bottom of the page or section.
- Example:
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

8. <figure>
- Definition: Represents self-contained content, like images, diagrams, or
illustrations, along with their caption.
- Usage: Used for media elements with captions.
- Example:

<figure>
<img src="image.jpg" alt="A beautiful scenery">
<figcaption>Beautiful mountain scenery at sunrise.</figcaption>
</figure>

9. <figcaption>
- Definition: Used to define a caption for a <figure> element.
- Usage: Describes or gives context to the content within the <figure>.
- Example: (See the example for <figure> above)

10. <mark>
- Definition: Represents text that has been highlighted for reference
purposes.
- Usage: Used to emphasize or highlight parts of the text.
- Example:

<p>The most <mark>important</mark> part of this paragraph is marked.</p>

11. <details>

- Definition: The <details> tag is used to create a collapsible section that

users can open and close to reveal or hide additional information.

- Purpose: Provides a way to display optional or hidden information, which can

be toggled by the user.
- Behavior: By default, the content inside the <details> tag is hidden, but it
can be revealed when the user clicks on it.

- Syntax:
<details>
<summary>Click to view more details</summary>
<p>This is additional information that can be toggled. </p>
</details>

12. <summary>

- Definition: The <summary> tag is used inside the <details> tag to provide a
heading or summary of the content that can be toggled.
- Purpose: Acts as a label or title that is clickable, and clicking on it
reveals or hides the associated content.
- Behavior: It is always visible and is used to control the visibility of the
rest of the content within the <details> tag.

- Syntax:

<details>
<summary>Click here for details</summary>
<p>Hidden content goes here.</p>
</details>
 <!-- ! Pseudo-Classes Selector -->

<!--? : hover -->

The `:hover` pseudo-class applies when the user designates an element (with
some pointing device), but does not activate it. Typically used to change the
appearance of a link when the user hovers over it.

<!--? :first-child -->

The `:first-child` pseudo-class applies to the first child of a specified

element.

<!--? :last-child -->

The `:last-child` pseudo-class applies to the last child of a specified

element.

<!--? :nth-child() -->

The `:nth-child()` pseudo-class matches elements based on their position in a

group of siblings. It takes a single argument that can be a number, keyword,
or formula. (an+b)

<!--? :first-of-type -->

The `:first-of-type` pseudo-class applies to the first element of its type

within a parent.

<!--? :last-of-type -->

The `:last-of-type` pseudo-class applies to the last element of its type

within a parent.

<!--? :link -->

The `:link` pseudo-class applies to links that have not yet been visited.

<!--? :active -->

The `:active` pseudo-class applies during the period in which the element is
being activated (e.g., between the times the user presses the mouse button and
releases it).
<!--? :visited -->

The `:visited` pseudo-class applies once the link has been visited by the
user.
 <!-- ! Pseudo-elements Selector -->

Pseudo-elements in CSS are used to style specific parts of an element.

### ::before

The `::before` pseudo-element can be used to insert content before the content
of an element. It is often used to add decorative content or icons.

<!--? syntax -->

selector::before {
content: "content"; <!--! Required property -->

<!-- Other CSS properties -->

}

### ::after

The `::after` pseudo-element can be used to insert content after the content
of an element. It is often used to add decorative content or to clear floats.

<!-- ? syntax -->

selector::after {
content: "content"; <!--! Required property -->

<!-- Other CSS properties -->

}

### ::first-line
The `::first-line` pseudo-element applies styles to the first line of a block -
level element. It is useful for creating drop caps or emphasizing the first
line of text.

### ::first-letter
The `::first-letter` pseudo-element applies styles to the first letter of a
block-level element. It is often used to create drop caps.

### ::selection
The `::selection` pseudo-element applies styles to the portion of a document
that has been highlighted by the user (e.g., selected with the mouse).
### ::marker
The `::marker` pseudo-element is used to style the marker box of a list item
(i.e., the bullet points or numbers).

### Combining Pseudo-elements with Pseudo-classes

we can also combine pseudo-elements with pseudo-classes for more advanced

styling.

**Example:**

p:hover::first-letter {
color: red;
}

<!-- ! Attribute Selectors -->

It will target the elements based on attribute name.

Instead of creating new id names and class names we can use existing
attributes.

1. [attr]: represents elements with an attribute name of attr.

2.[attr=value]:Represents element with an attribute name of attr whose value

is exactly value.
 <!-- ! CSS Units -->

<!-- ! what is units ? -->

A unit is a standard for the measurement of physical

quantities of the same kind.

<!-- ! Types Of Units -->

<!--? 1. Absolute Units : -->

The absolute length units are fixed and a length expressed

in any of these will appear as exactly that size.

<!--? 2. Relative Units -->

Relative length units specify a length relative to another

length property.

<!-- ! Types Of Absolute Units -->

1.MM(milli meter)
2.CM(Centi-meter)
3.Px(Pixel)

<!-- ! Types Of Relative Units -->

<!--? 1. % -->

Relative to the parent element

<!--? 2. vw -->

Viewport Width: One vw is equal to 1% of the width of the

viewport (the browser window size).

<!--? 3. vh -->

Viewport Height: One vh is equal to 1% of the height of

the viewport.
<!--? 4. em -->

Relative to the font-size of the element: One em is equal

to the current font size of the element. If the font size
of the element is 16px, then 1em equals 16px. The size is
relative to the parent element's font size if used in
other properties.

<!--? 5. rem -->

Relative to the font-size of the root element (typically

<html>): One rem is equal to the font size of the root
element. This provides a consistent measurement across the
entire document.
 <!-- ! Font Property -->

Font Properties:

1. font-style

- Specifies the style of the font.

- Values: normal, italic, oblique.

- Example: font-style: italic;.

2. font-weight

- Specifies the weight (or boldness) of the font.

- Values: normal, bold, bolder, lighter, or numeric values (100
to 900).

- Example: font-weight: bold;.

3. font-size

- Specifies the size of the font.

- Values: absolute sizes (px,mm,cm), relative sizes (em, rem, %),
or keywords (small, medium, large, etc.).

- Example: font-size: 16px;.

4. font-family

- Specifies a prioritized list of font family names and/or

generic family names.
- Values: font family names (e.g., "Arial", Georgia) and generic
families (serif, sans-serif, monospace).

- Example: font-family: "Arial", sans-serif;.

Note: we can add google fonts also.

 <!-- ! Text Property -->

Text properties in CSS are used to control the appearance and formatting of
text on a webpage.
These properties allow you to modify various aspects of the text, such as its
color, size, spacing, alignment, decoration, and transformation.

Text Alignment:

text-align:

- Aligns the text within an element.

- Values: left, right, center, justify, start, end.

- Example: text-align: center;.

Text Decoration:

text-decoration:

- Specifies the decoration added to text.

- Values: none, underline, overline, line-through.

- Example: text-decoration: underline;.

text-decoration-line:

- Sets the type of text decoration.

- Values: none, underline, overline, line-through, blink.

- Example: text-decoration-line: line-through;.

text-decoration-color:

- Sets the color of the text decoration.

- Values: any color value (#ff0000, rgb(255, 0, 0), blue, etc.).

- Example: text-decoration-color: red;.

text-decoration-style:

- Sets the style of the text decoration.

- Values: solid, double, dotted, dashed, wavy.

- Example: text-decoration-style: dashed;.

 Text Indentation:

text-indent:

- Specifies the indentation of the first line in a text block.

- Values: length values (px, em, %, etc.).

- Example: text-indent: 20px;.

Text Transformation:

text-transform:
- Controls the capitalization of text.
- Values: none, capitalize, uppercase, lowercase.

- Example: text-transform: uppercase;.

Text Shadow:

text-shadow:
- Adds shadow to text.
- Values: none or a combination of h-shadow, v-shadow, blur-radius, and
color.

- Example: text-shadow: 2px 2px 5px gray;.

Letter and Word Spacing:

letter-spacing:
- Sets the spacing between characters.
- Values: length values (px, em, etc.).

- Example: letter-spacing: 2px;.

word-spacing:
- Sets the spacing between words.
- Values: length values (px, em, etc.).

- Example: word-spacing: 4px;.

line-height:
- The line-height property is used to specify the space between lines:
- A line height of 1.5 means the space between lines is 1.5 times the font
size.

- Example: line-height: 0.8;

 <!-- ! Box Model -->

#### Definition:

- The CSS box model represents the structure of an element in terms of its
content, padding, border, and margin.

#### Components of the Box Model:

1. **Content**:

- The actual content of the element, such as text, images, or other media.
- Example: `width` and `height` properties define the size of the
content area.

2. **Padding**:

- The space between the content and the border.

- Example: `padding: 20px;` (applies padding equally to all sides).

3. **Border**:

- A line surrounding the padding (if any) and the content.

- Can be styled with different widths, colors, and styles.
- Example: `border: 1px solid black;` (sets a 1px solid black border).

4. **Margin**:

- The space outside the border, separating the element from adjacent
elements.
- Example: `margin: 10px;` (applies margin equally to all sides).

#### Box Model Properties:

1. **Width and Height**:

- Define the size of the content area.
- Example: `width: 100px; height: 50px;`.

2. **Padding**:
- Can be set individually for each side: `padding-top`, `padding-right`,
`padding-bottom`, `padding-left`.
- Example: `padding: 10px 20px 30px 40px;` (top, right, bottom, left).
3. **Border**:
- Can be set individually for each side: `border-top`, `border-right`,
`border-bottom`, `border-left`.
- Example: `border: 2px dashed red;` (applies to all sides).
- Detailed properties: `border-width`, `border-style`, `border-color`.

4. **Margin**:
- Can be set individually for each side: `margin-top`, `margin-right`,
`margin-bottom`, `margin-left`.
- Example: `margin: 5px 10px;` (top/bottom, right/left).

#### Box-Sizing Property:

- **`box-sizing`**:

- Defines how the total width and height of an element are calculated.
- `content-box` (default): width and height include only the content.
- `border-box`: width and height include content, padding, and border.
- Example: `box-sizing: border-box;`.
 <!-- ! Border Property -->

#### Definition:
- The `border` property in CSS is used to define the border around an element.

#### Key Border Properties:

1. **`border-width`**:

- Specifies the thickness of the border.

- Can be set individually for each side (top, right, bottom, left) or for
all sides at once.
- Accepts values in length units (e.g., `px`, `em`, `rem`) or predefined
keywords:
- `thin`, `medium`, `thick` (default: `medium`).

- Example:
```css
border-width: 2px;
border-width: 2px 4px 6px 8px; /* top right bottom left */
```

2. **`border-style`**:

- Specifies the style or type of the border.

- Common styles include:
- `none`: No border (default).
- `solid`: A solid line.
- `dashed`: A dashed line.
- `dotted`: A dotted line.
- `double`: Two solid lines.
- `inset`: An inset effect (appears as though the content is embedded).
- `outset`: An outset effect (appears as though the content is coming
out).
- Example:
```css
border-style: solid;
border-style: dotted dashed solid double; /* top right bottom left */
```
3. **`border-color`**:

- Specifies the color of the border.

- Can be set using:
- Named colors (e.g., `red`, `blue`).
- Hex codes (e.g., `#ff0000`).
- RGB/RGBA values (e.g., `rgb(255, 0, 0)`).
- HSL/HSLA values (e.g., `hsl(0, 100%, 50%)`).
- Can be set for each side or all sides at once.
- Example:
```css
border-color: black;
border-color: red green blue yellow; /* top right bottom left */
```

4. **`border-radius`**:

- Rounds the corners of the border, creating a curved effect.

- Can be set in length units (e.g., `px`, `em`) or as a percentage.
- Can be applied to all corners or individually.
- Example:
```css
border-radius: 10px; /* all corners */
border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right,
bottom-left */
border-radius: 50%; /* perfect circle/ellipse */
```

5. **`border`** (Shorthand):

- Combines `border-width`, `border-style`, and `border-color` into a single

property.
- Syntax: `border: [width] [style] [color];`
- Example:
```css
border: 2px solid black;
```
6. **Individual Border Sides**:
- Borders can be styled individually for each side using:
- `border-top`
- `border-right`
- `border-bottom`
- `border-left`

- Example:

```css
border-top: 5px solid red;
border-right: 10px dashed blue;
border-bottom: 3px dotted green;
border-left: 2px double yellow;
```
 <!-- ! FlexBox -->

#### Definition:
- Flexbox is a CSS layout model that allows you to design a flexible and
responsive layout structure without using positioning.

#### Key Concepts:

- **Flex Container**: The parent element where `display: flex;` is applied.

- **Flex Items**: The direct children of a flex container.

#### Flex Container Properties:

1. **`display: flex;`**:
- Defines a flex container, enabling flex context for all its direct
children.

- Example: `display: flex;`

2. **`flex-direction`**:

- Specifies the direction of the flex items in the flex container.

- Values:
- `row`: Default, items arranged horizontally (left to right).
- `row-reverse`: Items arranged horizontally (right to left).
- `column`: Items arranged vertically (top to bottom).
- `column-reverse`: Items arranged vertically (bottom to top).

- Example: `flex-direction: row;`.

3. **`flex-wrap`**:

- Controls whether flex items should wrap onto multiple lines.

- Values:
- `nowrap`: Default, all flex items will be on one line.
- `wrap`: Flex items will wrap onto multiple lines, from top to bottom.
- `wrap-reverse`: Flex items will wrap onto multiple lines, from bottom
to top.

- Example: `flex-wrap: wrap;`.

4. **`justify-content`**:

- Aligns flex items along the main axis (horizontally if `flex-direction:

row;`).
- Values:
- `flex-start`: Items align to the start of the container.
- `flex-end`: Items align to the end of the container.
- `center`: Items align at the center.
- `space-between`: Items are evenly distributed, with the first item at
the start and last at the end.
- `space-around`: Items are evenly distributed with equal space around
them.
- `space-evenly`: Items are distributed with equal space between them.

- Example: `justify-content: space-between;`.

5. **`align-items`**:
- Aligns flex items along the cross axis (vertically if `flex-direction:
row;`).
- Values:
- `stretch`: Default, items stretch to fill the container.
- `flex-start`: Items align to the start of the cross axis.
- `flex-end`: Items align to the end of the cross axis.
- `center`: Items align at the center of the cross axis.

- Example: `align-items: center;`.

6. **`align-content`**:

- Aligns flex lines when there's extra space in the cross axis.
- Values (similar to `justify-content` but applied to multiple lines):
- `flex-start`, `flex-end`, `center`, `space-between`, `space-around`,
`stretch`.

- Example: `align-content: space-around;`.

#### Flex Item Properties:

1. **`order`**:

- Controls the order of the flex items within the container.

- Default is `0`, higher numbers appear later.
- Example: `order: 2;`.

2. **`flex-grow`**:

- Defines the ability of a flex item to grow if necessary.

- Default is `0`, meaning items won’t grow unless specified.
- Example: `flex-grow: 1;` (item will take up remaining space).

3. **`flex-shrink`**:

- Defines the ability of a flex item to shrink if necessary.

- Default is `1`, meaning items will shrink to avoid overflow.
- Example: `flex-shrink: 0;` (item won’t shrink).

4. **`flex-basis`**:

- Defines the default size of an element before the remaining space is

distributed.
- Can be set in length units (px, em, etc.) or `auto`.
- Example: `flex-basis: 200px;`.

5. **`align-self`**:

- Allows the default alignment (set by `align-items`) to be overridden for

individual flex items.
- Values: `auto`, `flex-start`, `flex-end`, `center`, `baseline`,
`stretch`.
- Example: `align-self: flex-end;`.
 <!-- ! background Property -->

### **Background Property in CSS**

The `background` property in CSS is a shorthand property used to set all

background-related properties in one declaration.
It can include the following individual properties:

1. **`background-color`**:

- Sets the background color of an element.

- You can specify colors using names (`red`), hex codes (`#ff0000`), RGB
(`rgb(255, 0, 0)`), RGBA (`rgba(255, 0, 0, 0.5)`), HSL (`hsl(0, 100%, 50%)`),
or HSLA (`hsla(0, 100%, 50%, 0.5)`).

```css
background-color: lightblue;
```

2. **`background-image`**:

- Sets an image as the background of an element.

- You can use a URL to specify an image, or use `none` to remove a
background image.

```css
background-image: url('image.png');
```

3. **`background-repeat`**:

- Defines how the background image is repeated.

- Values:
- `repeat`: Repeats the image both horizontally and vertically.
- `repeat-x`: Repeats the image horizontally only.
- `repeat-y`: Repeats the image vertically only.
- `no-repeat`: Does not repeat the image.

```css
background-repeat: no-repeat;
```
4. **`background-position`**:

- Specifies the initial position of the background image.

- Values can be keywords (`top`, `bottom`, `left`, `right`, `center`), or
coordinates (`50% 50%` or `10px 20px`).

```css
background-position: 100% 100%;
```

5. **`background-size`**:

- Specifies the size of the background image.

- Values:
- `auto`: Default. Keeps the original size.
- `cover`: Scales the image to cover the entire element (image may be
cropped).
- `contain`: Scales the image to fit within the element (image won't be
cropped).
- Specific sizes (`100px 50px`, `50% 50%`).

```css
background-size: cover;
```

6. **`background-attachment`**:

- Determines whether the background image is fixed relative to the viewport

or scrolls with the content.
- Values:
- `scroll`: Background image scrolls with the element's content.
- `fixed`: Background image stays fixed relative to the viewport.
- `local`: Background scrolls with the element’s content, but not the
entire page.

```css
background-attachment: fixed;
 Project Code For Background

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Project</title>
<link rel="stylesheet" href="./task.css">
</head>
<body>
<section id="section-1">
<div>
<h1>this section1</h1>
<p>this is para</p>
</div>
</section>
<section id="section-2">
<div>
<h1>this is section2</h1>
<p>this is para</p>
</div>
</section>
<section id="section-3">
<div>
<h1>this is section3</h1>
<p>this is para</p>
</div>
</section>
<section id="section-4">
<div>
<h1>this is section4</h1>
<p>this is para</p>
</div>
</section>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

section {
width: 100%;
height: 100vh;
background-image: url("https://images.pexels.com/photos/189349/pexels -
photo-189349.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" );
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-attachment: fixed;
}

section>div> h1{
color: white;
font-size: 64px;
text-transform: capitalize;
font-weight: bold;
text-shadow: 2px 2px 5px #181818;
}
section>div> p{
color: #fff;
font-size: 40px;
text-transform: capitalize;
text-shadow: 2px 2px 5px #212121;
}

#section-2{
background-image: url("https://images.pexels.com/photos/994605/pexels -
photo-994605.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" );
}

#section-3{
background-image: url('https://images.pexels.com/photos/38136/pexels -
photo-38136.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}

#section-4{
background-image: url('https://images.pexels.com/photos/1482193/pexels -
photo-1482193.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' );
}
 <!-- ! overflow -->

CSS overflow Property

The overflow property in CSS controls how content is handled when it overflows
its containing element's box.
This is particularly important when dealing with elements that have a fixed
size, such as divs, where the content may extend beyond the boundaries of the
element.

# Syntax
overflow: visible | hidden | scroll | auto ;

Values

1. visible (default)

- Description: Content is not clipped and is rendered outside the element's

box.
This is the default behavior for most elements.
- Use Case: When we want the overflowing content to be fully displayed
without any clipping.

- Example:
.box {
overflow: visible;
}

2. hidden

- Description: The overflow is clipped, and the rest of the content is

hidden. No scrollbars are provided to view the hidden content.
- Use Case: Useful when we want to ensure that the content does not spill
over outside the element's boundaries.

- Example:
.box {
overflow: hidden;
}
3. scroll

- Description: The overflow is clipped, but a scrollbar is provided to

scroll and view the hidden content. The scrollbar appears whether or not the
content actually overflows.
- Use Case: Use this when you want to ensure that the user can always
scroll to see all the content.

- Example:

.box {
overflow: scroll;
}

4. auto

- Description: Similar to scroll, but the scrollbar is only added if the

content overflows. If there is no overflow, no scrollbar is visible.
- Use Case: Commonly used for responsive designs where scrollbars are only
needed when the content is too large for its container.

- Example:

.box {
overflow: auto;
}
 <!-- ! Color -->

RGB:- (Red, Green, Blue)

RGBA:- (Red, Green, Blue ,Alpha)
HSL:- (Hue, Saturation, Lightness)
HSLA:- (Hue, Saturation, Lightness,Alpha)
HEXADECIMAL (#00ff00)

<!--? RGB -->

RGB color specified with the rgb() function.

Syntax: rgb(red, green, blue).
Each parameter (red, green, blue) defines the, intensity of the color and can
be an integer between 0 and 255 or a percentage value (from 0% to 100%).

<!--? RGBA -->

RGBA color values are an extension of RGB color values with an alpha, channel
which specifics the opacity of the object.
An RGBA color is specified with rgba() function.
Syntax: rgba(red, green, blue, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully
opaque).

<!--? HSL -->

HSL stands for hue, saturation, and lightness and represents a cylindrical -
coordinate representation of colors.
An HSL color value is specified with hsl() function.

Syntax: hsl(hue, saturation, lightness).

Hue is a degree on the color wheel (from 0 to 360). 0 is red, 120 is green,
240 is blue.
Saturation is percentage value. 0% means a shade of gray and 100% is the full
color.
Lightness is also a percentage, 0% is black, 100% is white.

<!--? HSLA -->

HSLA color values are an extension of HSL color values with an alpha, channel
which specifics the opacity of the object.
An HSLA color value is specified with hsla() function.
Syntax: hsla(hue, saturation, lightness, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully
opaque).
<!--? HEXADECIMAL COLOR -->

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG

(green), and BB (blue) hexadecimal integers specify th e components of the
color. All values must be between 00 and FF.

<!--? HEXADECIMAL COLOR WITH TRANSPARENCY -->

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two

additional digit between 00 and FF.
 CSS Position Property

### **Position Property in CSS**

It determines how an element is positioned in the document flow and how it

interacts with other elements.

### **Position Values:**

1. **`static`** (default):
- The default positioning for all HTML elements.
- Elements are positioned according to the normal document flow
- `top`, `right`, `bottom`, `left`, and `z-index` properties do not apply.

**Example**:
```css
div {
position: static;
}
```

2. **`relative`**:

- The element is positioned relative to its normal position in the document

flow.
- The `top`, `right`, `bottom`, and `left` properties can be used to adjust
the element's position relative to its original position.
- Other elements' positions are not affected.

**Example**:
```css
div {
position: relative;
top: 20px;
left: 10px;
}
```

In this example, the `div` is shifted 20px down and 10px to the right from
where it would normally be positioned.
3. **`absolute`**:

- The element is removed from the normal document flow and positioned
relative to its nearest positioned ancestor (i.e., an ancestor with a
`relative`, `absolute`, or `fixed` position).
- If no such ancestor exists, it is positioned relative to the initial
containing block (usually the viewport).
- `top`, `right`, `bottom`, and `left` properties are used to position the
element.

**Example**:
```css
div {
position: absolute;
top: 50px;
left: 30px;
}
```

In this example, the `div` is positioned 50px from the top and 30px from
the left of its nearest positioned ancestor.

4. **`fixed`**:

- The element is removed from the normal document flow and positioned
relative to the viewport.
- The element stays fixed in position even when the page is scrolled.
- `top`, `right`, `bottom`, and `left` properties are used to position the
element.

**Example**:
```css
div {
position: fixed;
top: 10px;
right: 10px;
}
```

In this example, the `div` remains fixed 10px from the top and right of the
viewport, even when the page is scrolled.
5. **`sticky`**:

- The element is positioned based on the user's scroll position.

- It toggles between `relative` and `fixed`, depending on the scroll
position.
- The element behaves like `relative` until a given offset position is met,
then it behaves like `fixed`.
- The `top`, `right`, `bottom`, or `left` properties define the threshold
where the element becomes sticky.

**Example**:
```css
div {
position: sticky;
top: 0;
}
```

In this example, the `div` will stick to the top of the viewport once the
user scrolls past it.

<!-- ! z-index -->

- The `z-index` property controls the stacking order of positioned elements

(elements with `relative`, `absolute`, `fixed`, or `sticky` position).
- Higher `z-index` values stack elements in front of those with lower values.

**Example**:
```css
div {
position: absolute;
z-index: 1;
}
```
 <!-- ! transition -->

The transition property in CSS is used to create smooth animations when

changing the properties of an element.
It allows you to control the speed of these property changes over a specified
duration, rather than having them occur instantaneously.

Syntax

transition: property duration timing-function delay;

### Components of a Transition

1. property

- Description: Specifies the CSS property that the transition effect is

applied to (e.g., width, height, background-color, etc.).
- Special Value: all - Applies the transition to all changeable properties.

- Example:
transition: background-color 0.5s ease;

2. duration

- Description: Specifies the length of time the transition takes to

complete. The duration is defined in seconds (s) or milliseconds (ms).

- Example:
transition: background-color 1s;

3. timing-function

- Description: Defines the speed curve of the transition. It controls how

the intermediate states of the transition are calculated.

- Common Values:
- ease: Starts slow, then fast, then ends slow (default value).
- linear: Constant speed from start to end.
- ease-in: Starts slow, then fast.
- ease-out: Starts fast, then slow.
- ease-in-out: Starts slow, speeds up, then slows down.

- Example:
transition: width 2s ease-in;
4. delay

- Description: Specifies a delay before the transition starts. This can be

in seconds (s) or milliseconds (ms).
- Example:

transition: height 0.5s ease 0.3s;

### Shorthand Property

The transition property is often written in shorthand to include all the above
components. You can omit any component, and it will use the default value.

Example:

transition: all 0.3s ease-in-out;

<!-- ! transform -->

Definition:

- The transform property in CSS allows you to apply various transformations to

an element, such as moving, rotating, scaling, or skewing it.

Transform Functions:

1. translate():

- Moves the element from its current position.

- translate(x, y) moves the element horizontally by x and vertically by y.

- Example: transform: translate(50px, 100px); (moves the element 50px to

the right and 100px down).

2. rotate():

- Rotates the element around a fixed point (the center by default).

- rotate(angle) rotates the element by the specified angle in degrees.

- Example: transform: rotate(45deg); (rotates the element 45 degrees

clockwise).
3. scale():

- Resizes the element.

- scale(x, y) scales the element by x horizontally and y vertically.

- Example: transform: scale(2, 1.5); (doubles the width and increases the
height by 50%).

4. skew():

- Skews the element along the X and Y axes.

- skew(x-angle, y-angle) skews the element by the specified angles.
- Example: transform: skew(30deg, 10deg); (skews the element 30 degrees
along the X-axis and 10 degrees along the Y-axis).

Transform Origin:

- transform-origin:
- Defines the point around which the transformation occurs.
- Can be set using values like center, top, bottom, left, right, or specific
coordinates.
- Example: transform-origin: top;
 <!-- ! animation -->

- CSS Animations allow you to create smooth transitions and dynamic effects by
animating changes to CSS properties over time.

#### Key Components of CSS Animations:

1. **`@keyframes` Rule**:
- Defines the stages of the animation and the styles at each stage.
- You can specify the styles at different percentages of the animation's
duration or use keywords like `from` (equivalent to `0%`) and `to` (equivalent
to `100%`).

- **Example**:
```css
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
```

2. **Animation Properties**:

- These properties are used to apply and control the animation on an

element.

- **`animation-name`**: Specifies the name of the `@keyframes` animation to

apply.

**Example**: `animation-name: slideIn;`

- **`animation-duration`**: Defines how long the animation takes to

complete one cycle.
- Example: `animation-duration: 2s;` (2 seconds)

- **`animation-timing-function`**: Specifies the speed curve of the

animation.
- Common values:
- `linear`: Constant speed from start to finish.
- `ease`: Starts slow, speeds up, and then slows down at the end.
- `ease-in`: Starts slow and then speeds up.
- `ease-out`: Starts fast and then slows down.
- `ease-in-out`: Slow start, fast middle, slow end.
 - **`animation-delay`**: Sets a delay before the animation starts.
- Example: `animation-delay: 1s;` (starts after 1 second)

- **`animation-iteration-count`**: Defines how many times the animation

should repeat.
- Common values:
- `infinite`: Loops the animation indefinitely.
- A specific number (e.g., `3`).
- **Example**: `animation-iteration-count: infinite;`

- **`animation-direction`**: Specifies whether the animation should play

forward, backward, or alternate between the two.
- Values:
- `normal`: Plays the animation forwards.
- `reverse`: Plays the animation backwards.
- `alternate`: Alternates between forward and reverse on each cycle.
- **Example**: `animation-direction: alternate;`

- **`animation-fill-mode`**: Determines how the element should be styled

before the animation starts and after it ends.
- Values:
- `none`: Default, no styles applied before/after the animation.
- `forwards`: Retains the final styles after the animation ends.
- `backwards`: Applies the starting styles before the animation begins.
- `both`: Applies both `forwards` and `backwards` behaviors.
- **Example**: `animation-fill-mode: forwards;`

3. **Shorthand Property**:
- The `animation` property can be used to set all the animation properties
in one line.
- **Syntax**: `animation: name duration timing-function delay iteration-
count direction fill-mode play-state;`
- **Example**:
```css
.box {
animation: slideIn 2s ease-in-out 1s infinite alternate forwards;
}
```
 <!-- ! media query -->

#### Definition:
- **Media queries** are a CSS technique that allows you to apply styles to
elements based on the characteristics of the device or screen displaying the
content. They are essential for creating responsive web designs that adapt to
different screen sizes, orientations, and resolutions.

#### Basic Syntax:

- The basic structure of a media query involves the `@media` rule followed by
a media type and one or more expressions to check for specific conditions.

```css
@media (condition) {
/* CSS rules here */
}
```

#### Common Media Features (Conditions):

1. **Width and Height**:

- **`min-width`**: Target screens that are at least a certain width.
- **`max-width`**: Target screens that are no wider than a certain width.
- **`min-height`**: Target screens that are at least a certain height.
- **`max-height`**: Target screens that are no taller than a certain
height.
- **Example**:
```css
@media (min-width: 600px) {
/* Styles for screens wider than 600px */
}
```

2. **Orientation**:
- **`orientation: portrait`**: Targets devices with a portrait orientation
(height is greater than width).
- **`orientation: landscape`**: Targets devices with a landscape
orientation (width is greater than height).
- **Example**:
```css
@media (orientation: landscape) {
/* Styles for landscape mode */
}
```
#### we can also give range for applying media query :

- **Example**:
```css
@media (min-width: 600px) and (max-width: 1200px) {
/* Styles for screens between 600px and 1200px wide */
}
```