#HTML5 #CSS #BOOTSTRAP	#JAVASCRIPT #JQUERY #REACT	#NODEJS #EXPRESSJS #MONGODB

What is a website ? Website is a collection of webpages which contains information in the form of text, images, graphics, videos and hyperlinks, etc.
What is Home Page? It is main or landing page in which a website contain introduction or information to show to the user, what is that website related to. e.g. - index.html, idex.php
What is a browser? Browser is a software or application which is use to interact with webpages or website.
Website Requirement

Domain Name Registration e.g. - index.in/com/edu/net
Hosting / Server e.g. - Hostinger, Godaddy
Designing / Deployment e.g. - Live server / Environment

Images

JPG/JPEG: Joint Photographic Experts Group
- Supports 16.7 million colors.
- Does not support background transparency.
GIF: Graphics Interchange Format
- Supports only 255 colors.
- Supports background transparency.
PNG: Portable Network Graphics
- Supports more than 255 colors.
- Supports background transparency.
SVG: Scalable Vector Graphics
- Vector-based format; infinitely scalable.
- Supports background transparency and animations.
BMP: Bitmap Image File
- Supports millions of colors.
- Does not support background transparency.
TIFF: Tagged Image File Format
- High-quality, lossless image format.
- Supports alpha channel for transparency.
WEBP: Web Picture Format
- Combines lossy and lossless compression.
- Supports transparency (alpha channel).
HEIF: High Efficiency Image Format
- High compression efficiency with excellent quality.
- Supports transparency and high color depth.
EPS: Encapsulated PostScript
- Vector-based format used for high-resolution graphics.
- Limited transparency support.
PDF: Portable Document Format (for images)
- Versatile format for sharing images with text and other elements.
- Supports transparency and various compression options.

Resolutions

Resolution of images	Print Media mm/cm/in/ft	Online Media Pixels)px)
Width/Height	300 DPI	72ppi
Color Mode	CMYK	RGB

![[Pasted image 20250114113912.jpg]] Example:

<!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>
    <h1>Hello, World!</h1>
</body>
</html>

Here's a collection of different HTML examples showcasing attributes, comments, and other basic elements:

1. HTML Tag Attributes

Attributes provide additional information about an element. Here's a variety of examples:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Attributes</title>
</head>
<body>
    <!-- Using 'href' attribute -->
    <a href="https://example.com" target="_blank" title="Visit Example">Visit Example</a><br>

    <!-- Using 'src' and 'alt' attributes -->
    <img src="example.jpg" alt="Sample Image" width="300" height="200"><br>

    <!-- Using 'placeholder' and 'required' attributes -->
    <input type="text" placeholder="Enter your name" required><br>

    <!-- Using 'style' attribute -->
    <p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>

    <!-- Using 'id' and 'class' attributes -->
    <div id="unique-id" class="common-class">Div with ID and class.</div>

    <!-- Using 'data-*' custom attribute -->
    <button data-info="customData">Click Me</button>
</body>
</html>

2. HTML Comments

Comments are not displayed on the webpage and are used for documentation or debugging:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Comments</title>
</head>
<body>
    <!-- This is a single-line comment -->

    <!-- 
        This is a 
        multi-line comment
    -->

    <p>This paragraph is visible.</p>
    <!-- <p>This paragraph is hidden and commented out.</p> -->
</body>
</html>

3. Form Elements with Attributes

HTML forms often use attributes for functionality:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <!-- Using 'name' and 'maxlength' attributes -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" maxlength="20" required><br>

        <!-- Using 'checked' attribute -->
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>

        <!-- Using 'selected' attribute -->
        <select name="country">
            <option value="india" selected>India</option>
            <option value="usa">USA</option>
        </select><br>

        <!-- Using 'disabled' attribute -->
        <input type="text" value="Disabled Input" disabled><br>

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

4. HTML Semantic Tags

Semantic tags define the structure of the content:

<!DOCTYPE html>
<html>
<head>
    <title>Semantic HTML</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is an example of an article element.</p>
        </article>
        <section>
            <h3>Section Heading</h3>
            <p>This is an example of a section element.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

5. HTML Table with Attributes

Tables with various attributes:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table</title>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

6. HTML Media Tags with Attributes

Using Audio and Video:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Media</title>
</head>
<body>
    <!-- Audio with controls -->
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio><br>

    <!-- Video with controls and autoplay -->
    <video width="320" height="240" controls autoplay muted>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Example 1

<!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 bgcolor="yellow">
    <h1>Lovely Professional University</h1>
    <hr style="border: 5px solid green; width: 50%; text-align: left; margin-left: 0;">
    <p>HTML</p>
    <p>CSS</p>
    <p>BOOTSTRAP</p>
    <p>JAVASCRIPT</p>
    <hr style="border: 5px solid red;">
</body>
</html>

Output:

Lovely Professional University

HTML

CSS

BOOTSTRAP

JAVASCRIPT

Example 2

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body bgcolor="yellow">

    <h1 align = "center">Lovely Professional University</h1>

    <h2 align = "center">Lovely Professional University</h2>

    <h3 align = "center">Lovely Professional University</h3>

    <h4 align = "center">Lovely Professional University</h4>

    <h5 align = "center">Lovely Professional University</h5>

    <h6 align = "center">Lovely Professional University</h6>

</body>

</html>

Output:

Lovely Professional University

1. Ordered List (<ol>)

An ordered list is used when the order of items matters. Items are numbered automatically by the browser.

Syntax:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Output:

First item
Second item
Third item

Attributes for <ol> :

type: Specifies the type of numbering (default is numbers).
- "1": Default numbering (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...).

Example:

<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ol>

Output:

A. Item A
B. Item B
C. Item C

2. Unordered List (<ul>)

An unordered list is used when the order of items does not matter. Items are displayed with bullets.

Syntax:

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Output:

Item one
Item two
Item three

Attributes for <ul>:

type: Specifies the style of the bullet points (this attribute is deprecated; CSS is preferred).
- "disc": Default bullet (•).
- "circle": Hollow circle (○).
- "square": Solid square (▪).

Example:

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

Output:

▪ Square bullet 1
▪ Square bullet 2
▪ Square bullet 3

3. Nesting Lists

Lists can be nested by placing one list inside another:

Example:

<ol>
    <li>Main Item 1</li>
    <li>Main Item 2
        <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
        </ul>
    </li>
    <li>Main Item 3</li>
</ol>

Output:

Main Item 1
Main Item 2
- Sub-item 1
- Sub-item 2
Main Item 3

Styling Lists with CSS

You can customize lists using CSS:

<ul style="list-style-type: circle; color: blue;">
    <li>Styled Item 1</li>
    <li>Styled Item 2</li>
</ul>

Output:

(○) Styled Item 1
(○) Styled Item 2

Use ordered lists when the sequence matters, and unordered lists when it does not. Both are essential tools for organizing content on a webpage.

HTML Tables

Tables in HTML are used to display data in a tabular format with rows and columns. They are structured using a combination of table-related tags.

Basic Structure of a Table

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Output:

Cell 1	Cell 2
Cell 3	Cell 4

Key Tags in a Table

<table>
The container element for the table.
<tr> (Table Row)
Defines a row in the table.
<td> (Table Data)
Represents a cell in a table (data cell).
<th> (Table Header)
Represents a header cell. By default, text inside <th> is bold and centered.

Example:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Output:

Header 1	Header 2
Data 1	Data 2

Table Attributes

border
Specifies the border width. (Deprecated; use CSS instead.)

<table border="1">
    <tr>
        <td>Border Example</td>
    </tr>
</table>

cellpadding
Adds padding inside each cell.

<table border="1" cellpadding="10">
    <tr>
        <td>Cell with Padding</td>
    </tr>
</table>

cellspacing
Adds space between cells.

<table border="1" cellspacing="5">
    <tr>
        <td>Cell Spacing Example</td>
    </tr>
</table>

width and height
Sets the width and height of the table or its cells.

<table border="1" width="50%">
    <tr>
        <td>50% Width Table</td>
    </tr>
</table>

Table Sections

<thead>
Defines the header section of the table.
<tbody>
Defines the body section of the table.
<tfoot>
Defines the footer section of the table.

Example:

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </tfoot>
</table>

Output:

Header 1	Header 2
Data 1	Data 2
Footer (spans 2 columns)

Merging Cells

colspan
Merges multiple columns into one.

<table border="1">
    <tr>
        <td colspan="2">Merged Columns</td>
    </tr>
</table>

rowspan
Merges multiple rows into one.

<table border="1">
    <tr>
        <td rowspan="2">Merged Rows</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 2</td>
    </tr>
</table>

Styling Tables with CSS

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Tables are a powerful way to organize and present data on a webpage. However, for complex designs, CSS Grid or Flexbox is often more suitable.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">TIME TABLE</h1>
    <table>
        <tr>
            <th>Day/Period</th>
            <th>I<br>9:30-10:20</th>
            <th>II<br>10:20-11:10</th>
            <th>III<br>12:00-12:40</th>
            <th>LUNCH<br>12:00-12:40</th>
            <th>IV<br>12:40-1:30</th>
            <th>V<br>1:30-2:20</th>
            <th>VI<br>2:20-3:10</th>
            <th>VII<br>3:10-4:00</th>
        </tr>
        <tr>
            <td>Monday</td>
            <td>Eng</td>
            <td>Mat</td>
            <td>Che</td>
            <td rowspan="5">LUNCH</td>
            <td>LAB</td>
            <td></td>
            <td></td>
            <td>Phy</td>
        </tr>
        <tr>
            <td>Tuesday</td>
            <td>LAB</td>
            <td></td>
            <td></td>
            <td>Eng</td>
            <td>Che</td>
            <td>Mat</td>
            <td>SPORTS</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>Mat</td>
            <td>Phy</td>
            <td>Eng</td>
            <td>Che</td>
            <td></td>
            <td>LIBRARY</td>
            <td></td>
        </tr>
        <tr>
            <td>Thursday</td>
            <td>Phy</td>
            <td>Eng</td>
            <td>Che</td>
            <td>LAB</td>
            <td></td>
            <td></td>
            <td>Mat</td>
        </tr>
        <tr>
            <td>Friday</td>
            <td>Phy</td>
            <td>Eng</td>
            <td>Che</td>
            <td>LAB</td>
            <td></td>
            <td></td>
            <td>Mat</td>
        </tr>
    </table>
</body>
</html>

Output:

TIME TABLE

Day/Period	I 9:30-10:20	II 10:20-11:10	III 12:00-12:40	LUNCH 12:00-12:40	IV 12:40-1:30	V 1:30-2:20	VI 2:20-3:10	VII 3:10-4:00
Monday	Eng	Mat	Che	LUNCH	LAB			Phy
Tuesday	LAB				Eng	Che	Mat	SPORTS
Wednesday	Mat	Phy	Eng		Che		LIBRARY
Thursday	Phy	Eng	Che		LAB			Mat
Friday	Phy	Eng	Che		LAB			Mat

HTML Forms

HTML forms are used to collect user input, which can be sent to a server for processing. Forms are essential for user interaction on web pages, such as login pages, registration forms, or feedback forms.

Basic Structure of a Form

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

<form>: The container for form elements.
- action: Specifies the URL where the form data will be sent.
- method: Specifies the HTTP method (GET or POST).

Form Elements

1. Input Fields

The <input> element is the most commonly used form element. It allows users to enter data.

Common Types of <input>:

<form>
    <!-- Text Input -->
    <label for="text">Text:</label>
    <input type="text" id="text" name="text"><br>

    <!-- Password Input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>

    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <!-- Number Input -->
    <label for="number">Number:</label>
    <input type="number" id="number" name="number" min="1" max="100"><br>

    <!-- Date Input -->
    <label for="date">Date:</label>
    <input type="date" id="date" name="date"><br>

    <!-- Checkbox -->
    <label><input type="checkbox" name="subscribe" checked> Subscribe</label><br>

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

    <!-- File Input -->
    <label for="file">Upload File:</label>
    <input type="file" id="file" name="file"><br>

    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>

2. Labels

The <label> element improves accessibility by associating text with form elements.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

3. Textarea

The <textarea> element is used for multi-line text input.

<form>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

The <select> element creates a dropdown menu.

<form>
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="india">India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>
</form>

5. Buttons

<form>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button" onclick="alert('Clicked!')">Click Me</button>
</form>

Form Attributes

action
Specifies the URL to which the form data will be submitted.
method
- GET: Sends data via URL parameters (visible in the URL).
- POST: Sends data in the request body (more secure for sensitive data).
target
Specifies where to display the response (e.g., _blank, _self, _parent, _top).
enctype
Specifies the encoding type of the form data.
- application/x-www-form-urlencoded (default)
- multipart/form-data (for file uploads)
- text/plain
novalidate
Disables form validation.

Form Validation

HTML provides built-in form validation using attributes:

required
Ensures the field must be filled before submission.
```
<input type="text" name="name" required>
```

pattern
Validates input using a regular expression.

<input type="text" name="zipcode" pattern="[0-9]{5}">

maxlength and minlength
Limits the length of input.

<input type="text" name="username" maxlength="10" minlength="3">

min and max
Sets numeric input limits.

<input type="number" name="age" min="18" max="99">

step
Specifies the step interval for numeric or range inputs.
```
<input type="number" name="step-example" step="5">
```

Styling Forms with CSS

<style>
    form {
        width: 300px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    label {
        display: block;
        margin-bottom: 5px;
    }

    input, select, textarea, button {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }

    button:hover {
        background-color: #45a049;
    }
</style>

Example: Complete Registration Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <style>
        /* Add your CSS here */
    </style>
</head>
<body>
    <form action="/submit" method="POST">
        <h2>Registration Form</h2>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <label for="gender">Gender:</label>
        <select id="gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4"></textarea>

        <button type="submit">Register</button>
    </form>
</body>
</html>

Forms are fundamental to web development, enabling user interaction and data collection. For advanced functionality, JavaScript and server-side processing are often used alongside forms.

Example

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center">
        <tr>
            <td>Name</td>
            <td><input type="text" name="name" id="name" placeholder="Enter your full name"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="email" name="email" id="email" placeholder="Enter you email"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password" placeholder="Enter Password"></td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>
                <input type="radio" value="Male" name="gender" id="male"> Male
                <input type="radio" value="Female" name="gender" id="female"> Female
            </td>
        </tr>
        <tr>
            <td>City</td>
            <td>
                <select name="city" id="city">
                    <option value="Delhi">Delhi</option>
                    <option value="Mumbai">Mumbai</option>
                    <option value="Kolkata">Kolkata</option>
                    <option value="Chennai">Chennai</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                NCC
            </td>
            <td>
                <input type="checkbox" name="hobby" id="hobby1" value="A"> A
                <input type="checkbox" name="hobby" id="hobby2" value="B"> B
                <input type="checkbox" name="hobby" id="hobby3" value="C"> C
            </td>
        </tr>
        <tr>
            <td>Address
            <td>
                <textarea name="address" id="address" cols="25" rows="5" placeholder="Enter your address"></textarea>
            </td>
            </td>
        </tr>
        <tr>
            <td>
                Pick Your resume
            </td>
            <td>
                <input type="file" name="file" id="file">
            </td>
        </tr>
        <tr>
            <td>
                Pick Your Color
            </td>
            <td>
                <input type="color" name="color" id="color">
            </td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit"></td>
            <td><input type="reset" value="reset"></td>
        </tr>
    </table>
</body>

</html>

Output:

Name
Email
Password
Gender	Male Female
City
NCC	A B C
Address
Pick Your resume
Pick Your Color

Block and Inline Elements in HTML

HTML elements are categorized as block-level or inline based on how they behave in the document structure and how they affect the layout of the webpage.

Block-Level Elements

Block-level elements occupy the full width of their parent container, starting on a new line. These elements create a "block" of content.

Characteristics:

Always start on a new line.
Occupy the entire width available (by default).
Can contain other block-level elements or inline elements.

Common Block-Level Elements:

<div>: A generic container for grouping content.
<p>: Represents a paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
<ul> and <ol>: Unordered and ordered lists.
<li>: List item.
<table>: Table container.
<section>: Defines a section of the document.
<article>: Represents an independent piece of content.
<header>, <footer>, <nav>: Semantic elements.

Example:

<div>
    <h1>Block Elements</h1>
    <p>This is a paragraph inside a block-level container.</p>
</div>

Output:

The <h1> and <p> will appear on separate lines, taking the full width of the container.

Inline Elements

Inline elements do not start on a new line. Instead, they flow along with the text or other inline elements on the same line.

Characteristics:

Do not start on a new line.
Occupy only the width of their content.
Cannot contain block-level elements (only inline elements or text).

Common Inline Elements:

<span>: A generic inline container for text.
<a>: Hyperlink.
<strong>: Bold text.
<em>: Italicized text.
<b>: Bold text (non-semantic).
<i>: Italicized text (non-semantic).
<img>: Displays an image.
<label>: Label for form elements.
<code>: Inline code snippet.

Example:

<p>
    This is <strong>bold</strong> and this is <em>italic</em> text.
</p>

Output:

The <strong> and <em> tags will style the text inline without breaking the flow of the paragraph.

Key Differences Between Block and Inline Elements

Feature	Block-Level Elements	Inline Elements
New Line	Starts on a new line	Does not start on a new line
Width	Occupies the full width of the container	Occupies only as much width as necessary
Containment	Can contain both block and inline elements	Can contain only text or other inline elements
Default Behavior	Acts as a "container block"	Acts as "inline text or content"

Advantages of CSS

CSS Save Time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many we pages.
Page load faster - If you are using CSS, you don't need to write HTML tag attributes every time.
Easy Maintenance - To make a global change the style, and all the elements in all the web pages will be updated automatically.
Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page.
Multiple Device Compatibility - Stylesheet allow content to be optimized for more than one type of devices.
Global we standards - Now HTML attributes are being deprecated and give user instruction use CSS.

Types of CSS

**Internal CSS
**External CSS
**Inline CSS ![[anatomy-of-a-css-rule.gif]]

Example

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>
        Cascading Style Sheet
    </h1>
    <p>
        CSS is a language that describes the style of an HTML document.
    </p>
    <h1>
        Internal CSS
    </h1>
    <p>
        An internal CSS is used to define a style for a single HTML page.
    </p>
    <h1>
        External CSS
    </h1>
    <p>
        An external style sheet is used to define the style for many HTML pages.
    </p>
    <h1>
        Inline CSS
    </h1>
    <p>
        An inline CSS is used to apply a unique style to a single HTML element.
    </p>
</body>
</html>

Ways to Apply CSS

Inline CSS
CSS applied directly to an HTML element using the style attribute.
Example:
```
<p style="color: red; font-size: 20px;">This is red text.</p>
```
Internal CSS
CSS added within a <style> tag inside the <head> of an HTML document.
Example:
```
<style>
    p {
        color: blue;
        font-size: 18px;
    }
</style>
```
External CSS
CSS written in a separate file (e.g., styles.css) and linked to the HTML using a <link> tag.
Example:
```
<link rel="stylesheet" href="styles.css">
```

Selectors in CSS

Selectors target HTML elements for styling.

Basic Selectors

Type Selector: Targets elements by their tag name.
```
p {
    color: green;
}
```

Class Selector: Targets elements by their class.

<p class="highlight">Styled paragraph.</p>

.highlight {
    color: orange;
}

ID Selector: Targets a specific element by its ID.

<p id="unique">Unique paragraph.</p>

#unique {
    color: purple;
}

Combinators

Descendant Selector: Targets elements nested within another element.
```
div p {
    color: red;
}
```
Group Selector: Targets multiple elements.
```
h1, h2, p {
    color: black;
}
```

Basic Styling Properties

1. Text Styling

color: Sets the text color.
```
p {
    color: blue;
}
```
font-size: Adjusts the text size.
```
p {
    font-size: 16px;
}
```

font-family: Sets the font.

p {
    font-family: Arial, sans-serif;
}

text-align: Aligns text (e.g., left, center, right, justify).
```
h1 {
    text-align: center;
}
```

2. Box Model

The box model consists of:

Content: The content of the box.
Padding: Space between content and the border.
Border: The outer edge of the box.
Margin: Space outside the border.

Example:

div {
    width: 300px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

3. Background Styling

background-color: Sets the background color.
```
body {
    background-color: lightgray;
}
```

background-image: Adds an image as the background.

body {
    background-image: url('background.jpg');
}

background-size: Adjusts the background image size (e.g., cover, contain).
```
body {
    background-size: cover;
}
```

4. Borders

border: Sets the border style, width, and color.
```
div {
    border: 2px solid red;
}
```
border-radius: Rounds the corners of an element.
```
div {
    border-radius: 10px;
}
```

5. Spacing

margin: Space outside the element.
```
p {
    margin: 20px;
}
```
padding: Space inside the element.
```
p {
    padding: 10px;
}
```

Positioning and Layout

Position Property

static (default): Normal flow.
relative: Positioned relative to its normal position.
absolute: Positioned relative to its nearest positioned ancestor.
fixed: Positioned relative to the viewport.
sticky: Toggles between relative and fixed depending on scroll.

Example:

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

Flexbox

A layout model for aligning items in a container.

Example:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Responsive Design

Responsive design ensures a website looks good on all devices.

Media Queries

Used to apply styles based on screen size.

Example:

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

Units

Relative: %, em, rem, vh, vw.
Absolute: px, cm, mm.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        h1{
            color: red;
            text-align: center;
            border: 2px solid black;
            padding: 30px;
            margin: 20px;
            background-color: lightblue;
        }
        img{
            margin: 90px;
            border: 2px solid black;
            padding: 10px;
            border-radius: 10px;
            background-color: aqua;
            cursor: pointer;            
        }
        body{
            background-color: lightgreen;
        }
        img:hover{
            transform: scale(1.1);
            background-color: rgb(255, 0, 0);
            border: 5px dashed black;
        }
    </style>
</head>
<body>
    <h1>Cascading Style Sheet</h1>
    <img src="k1.png" alt="k1" width="500px">
    <img src="k2.png" alt="k2" width="500px">
    <img src="k3.png" alt="k3" width="500px">
    <img src="k4.png" alt="k4" width="500px">
</body>
</html>

Example

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Divs Example</title>
    <style>
        .bordered-div {
            border: 2px solid black;
            text-align: center;
            padding: 20px;
            margin-bottom: 20px;
        }
        .text-div {
            padding: 20px;
            margin-bottom: 20px;
            background-color: #f0f0f0;
        }
        .list-div {
            padding: 20px;
            background-color: #e0f7fa;
        }
        .list-div ol {
            color: #00796b;
        }
    </style>
</head>
<body>
    <div class="bordered-div">
        <h1>Heading</h1>
    </div>
    <div class="text-div">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, quae..</p>
    </div>
    <div class="list-div">
        <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
            <li>Fourth item</li>
        </ol>
    </div>
</body>
</html>

Example

Create a box, inside the box there will be an image which rotates on hover, don't overflow the box

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rotating Image on Hover</title>
     <style>
          .box {
               width: 300px;
               height: 300px;
               overflow: hidden;
               border: 2px solid #000;
               align-items: center;
               margin: 0 auto;
          }
          .box img {
               transition: transform 0.5s ease;
          }
          .box:hover img {
               transform: rotate(15deg) scale(1.3);
          }
     </style>
</head>
<body>
     <div class="box">
          <img src="shop.jpg" alt="Rotating Image" width="100%" height="100%">
     </div>
</body>
</html>

**CSS Combinators

In CSS, combinators are used to define the relationships between selectors. They allow you to target elements based on their position in relation to other elements in the HTML structure.

Types of CSS Combinators

Descendant Combinator (Space)
The descendant combinator targets elements that are descendants (children, grandchildren, etc.) of a specified parent element.
Syntax:
```
parent descendant {
    /* styles */
}
```
- It selects all elements that are inside the parent element, regardless of depth.
Example:
```
div p {
    color: red;
}
```
- This will apply red text color to all <p> elements that are inside a <div>.

Child Combinator (>)
The child combinator targets elements that are direct children of a specified element.
Syntax:
```
parent > child {
    /* styles */
}
```
- It selects elements that are immediate children of the parent element.
Example:
```
div > p {
    color: blue;
}
```
- This will apply blue text color only to <p> elements that are direct children of a <div>.

Adjacent Sibling Combinator (+)
The adjacent sibling combinator targets an element that is immediately preceded by a specified element.
Syntax:
```
element1 + element2 {
    /* styles */
}
```
- It selects the first element that is immediately adjacent (next to) the specified element.
Example:
```
h2 + p {
    color: green;
}
```
- This will apply green text color to the first <p> element that follows a <h2>.

General Sibling Combinator (~)
The general sibling combinator targets elements that are siblings of a specified element, but not necessarily immediately adjacent.
Syntax:
```
element1 ~ element2 {
    /* styles */
}
```
- It selects all elements that are siblings of the first element, but not necessarily right after it.
Example:
```
h2 ~ p {
    color: orange;
}
```
- This will apply orange text color to all <p> elements that are siblings of a <h2>.

Summary of Combinators

Combinator	Description	Example	Effect
Descendant ( )	Targets descendants of an element (any depth).	div p { color: red; }	All <p> inside <div> are red.
Child (>)	Targets immediate children of an element.	div > p { color: blue; }	Direct <p> children of <div> are blue.
Adjacent Sibling (+)	Targets the first sibling immediately after an element.	h2 + p { color: green; }	The first <p> after <h2> is green.
General Sibling (~)	Targets all siblings after an element.	h2 ~ p { color: orange; }	All <p> elements after <h2> are orange.

Use Cases for CSS Combinators

Descendant Combinator: When you want to apply styles to elements that are inside a specific parent, no matter how deeply nested.
Child Combinator: When you want to target only direct children of a parent element.
Adjacent Sibling Combinator: When you need to style the first element that follows another element.
General Sibling Combinator: When you want to style all elements that are siblings of a particular element.

**CSS Selectors

CSS selectors are used to target HTML elements that you want to style. They allow you to define which elements on a page will receive the styles defined in your CSS. There are different types of CSS selectors based on how they select elements.

1. Basic Selectors

**1.1. Universal Selector (*)**

The universal selector targets all elements on the page.
Example:
```
* {
    color: blue;
}
```
This will make the text color blue for all elements.

1.2. Type Selector (Element Selector)

The type selector targets elements by their tag name.
Example:
```
p {
    font-size: 16px;
}
```
This will apply a font size of 16px to all <p> elements.

1.3. Class Selector (.)

The class selector targets elements that have a specific class.
Example:
```
.highlight {
    background-color: yellow;
}
```
This will apply a yellow background to all elements with the class highlight.

1.4. ID Selector (#)

The ID selector targets a specific element by its unique ID.
Example:
```
#header {
    font-size: 24px;
}
```
This will apply a font size of 24px to the element with the ID header.

2. Grouping Selectors

You can group multiple selectors to apply the same style to different elements.

Syntax:

selector1, selector2, selector3 {
    /* styles */
}

Example:
```
h1, h2, p {
    color: green;
}
```
This will apply the green color to all <h1>, <h2>, and <p> elements.

3. Attribute Selectors

Attribute selectors target elements based on their attributes.

3.1. Presence of an Attribute

Syntax:
```
[attribute] {
    /* styles */
}
```
Example:
```
[type="text"] {
    border: 1px solid gray;
}
```
This will apply a gray border to all elements with the attribute type="text" (like <input type="text">).

3.2. Attribute Value Contains

Syntax:

[attribute*="value"] {
    /* styles */
}

Example:
```
[class*="button"] {
    background-color: blue;
}
```
This will apply a blue background to all elements whose class attribute contains "button".

3.3. Attribute Value Starts With

Syntax:

[attribute^="value"] {
    /* styles */
}

Example:
```
[class^="btn"] {
    font-weight: bold;
}
```
This will apply bold font weight to all elements whose class starts with "btn".

4. Pseudo-Classes

Pseudo-classes are used to define the special state of an element.

4.1. :hover

Targets an element when it is hovered over by the mouse.
Example:
```
a:hover {
    color: red;
}
```
This will change the link color to red when hovered.

4.2. :first-child

Targets the first child element of a parent.
Example:
```
p:first-child {
    font-weight: bold;
}
```
This will make the first <p> element inside any parent bold.

4.3. :last-child

Targets the last child element of a parent.
Example:
```
p:last-child {
    margin-bottom: 0;
}
```
This will remove the bottom margin from the last <p> element in a parent.

4.4. :nth-child()

Targets a specific child based on its position (e.g., 1st, 2nd, 3rd, etc.).
Example:
```
li:nth-child(odd) {
    background-color: lightgray;
}
```
This will apply a light gray background to odd-numbered list items.

4.5. :not()

Excludes elements that match the specified selector.
Example:
```
p:not(.highlight) {
    color: gray;
}
```
This will apply gray color to all <p> elements that do not have the class highlight.

5. Pseudo-Elements

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

5.1. ::before

Inserts content before an element's content.
Example:
```
p::before {
    content: "Note: ";
    font-weight: bold;
}
```
This will prepend the text "Note: " before the content of every <p>.

5.2. ::after

Inserts content after an element's content.
Example:
```
p::after {
    content: " (end)";
    color: red;
}
```
This will append " (end)" to the content of every <p>, colored in red.

6. Combinator Selectors

Combinators define relationships between selectors.

6.1. Descendant Combinator (Space)

Targets elements that are descendants of a specified element.
Example:
```
div p {
    color: red;
}
```
This will apply red color to all <p> elements inside <div> elements.

6.2. Child Combinator (>)

Targets direct children of a specified element.
Example:
```
div > p {
    color: blue;
}
```
This will apply blue color only to <p> elements that are direct children of a <div>.

6.3. Adjacent Sibling Combinator (+)

Targets the first sibling element immediately after the specified element.
Example:
```
h1 + p {
    color: green;
}
```
This will apply green color to the first <p> element immediately following an <h1>.

6.4. General Sibling Combinator (~)

Targets all sibling elements that follow the specified element.
Example:
```
h1 ~ p {
    color: orange;
}
```
This will apply orange color to all <p> elements that are siblings of an <h1>.

7. Combining Multiple Selectors

You can combine different types of selectors for more specific targeting.

7.1. Combining Class and Element Selector

Example:
```
p.highlight {
    font-size: 18px;
}
```
This will apply a font size of 18px to <p> elements with the class highlight.

7.2. Combining Class and ID Selector

Example:
```
#header.highlight {
    background-color: blue;
}
```
This will apply a blue background color to the element with the ID header and the class highlight.

Summary of Common Selectors

Selector	Description	Example
*	Universal selector (all elements)	* { color: red; }
element	Targets elements by their tag name	p { font-size: 14px; }
.class	Targets elements by class name	.button { background-color: blue; }
#id	Targets elements by ID	#header { font-size: 24px; }
element1 element2	Descendant selector (element2 inside element1)	div p { color: green; }
element1 > element2	Child selector (element2 is a direct child of element1)	ul > li { margin-left: 20px; }
element1 + element2	Adjacent sibling selector (element2 follows element1)	h1 + p { color: gray; }
element1 ~ element2	General sibling selector (element2 follows element1)	h1 ~ p { font-style: italic; }
element:nth-child(n)	Selects elements based on their position	p:nth-child(odd) { background-color: yellow; }

Understanding CSS selectors is essential for styling elements efficiently and creating a visually appealing and responsive web design.

Bootstrap

Bootstrap is a popular open-source CSS framework designed to help developers create responsive and visually appealing web designs quickly and efficiently. It includes pre-designed components, responsive grid systems, utilities, and extensive styling for typography, forms, buttons, and more.

Typography in Bootstrap

Bootstrap provides built-in utilities and styles for typography, making it easy to style text, headings, and other text-based elements consistently. Here's a breakdown of its key typography features:

1. Headings

Bootstrap provides default styles for all HTML heading elements (<h1> to <h6>), which can be customized using classes.

Examples:

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Custom Heading Sizes:

You can use classes like .h1, .h2, etc., to make text appear like a heading without using the actual heading tags.

<p class="h1">This is styled like an h1 heading</p>

2. Display Headings

For larger and more prominent headings, Bootstrap provides "display" classes.

Examples:

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

3. Lead Text

The .lead class is used to emphasize introductory text by slightly increasing its font size and changing the weight.

Example:

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

4. Inline Text Elements

Bootstrap includes styles for inline text elements:

Element	Description	Example Code
<mark>	Highlights text.	<mark>Highlighted text</mark>
<small>	Displays smaller text.	<small>Small text</small>
<strong>	Makes text bold.	<strong>Bold text</strong>
<em>	Emphasizes text (italic).	<em>Italic text</em>
<abbr>	Displays abbreviations with a dotted underline.	<abbr title="HyperText Markup Language">HTML</abbr>
<code>	Formats text as inline code.	<code>Inline code</code>
<kbd>	Denotes user input (keyboard keys).	<kbd>Ctrl + C</kbd>
<s>	Strikethrough text.	<s>Strikethrough text</s>

5. Text Alignment

Bootstrap provides utility classes for text alignment:

Class	Description
.text-start	Aligns text to the left.
.text-center	Centers the text.
.text-end	Aligns text to the right.

Example:

<p class="text-center">This text is centered.</p>
<p class="text-end">This text is right-aligned.</p>

6. Text Transform

Classes to change the case of text:

Class	Description
.text-lowercase	Transforms text to lowercase.
.text-uppercase	Transforms text to uppercase.
.text-capitalize	Capitalizes the first letter of each word.

Example:

<p class="text-uppercase">uppercase text</p>
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-capitalize">capitalize each word</p>

7. Font Weight and Italics

Bootstrap includes classes to control font weight and style:

Class	Description
.fw-bold	Bold text.
.fw-semibold	Semi-bold text.
.fw-normal	Normal weight text.
.fw-light	Light-weight text.
.fst-italic	Italic text.
.fst-normal	Normal (non-italic) text.

Example:

<p class="fw-bold">Bold text</p>
<p class="fw-light fst-italic">Light italic text</p>

8. Text Colors

Bootstrap includes classes for text colors:

Class	Description
.text-primary	Primary text color.
.text-secondary	Secondary text color.
.text-success	Green text (success).
.text-danger	Red text (error/danger).
.text-warning	Yellow text (warning).
.text-info	Cyan text (info).
.text-light	Light text.
.text-dark	Dark text.
.text-body	Default body color.
.text-muted	Muted (gray) text.

Example:

<p class="text-primary">Primary colored text</p>
<p class="text-danger">Danger colored text</p>

9. Text Decoration

Bootstrap provides classes for text decoration:

Class	Description
.text-decoration-underline	Underlines the text.
.text-decoration-line-through	Strikethrough the text.
.text-decoration-none	Removes all text decoration.

Example:

<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strikethrough text</p>

10. Responsive Typography

Bootstrap allows typography to be responsive with classes like .fs-* for font sizes and .text-* for alignment.

Font Size Utilities:

.fs-1 (largest) to .fs-6 (smallest).

Example:

<p class="fs-1">This is large text</p>
<p class="fs-6">This is small text</p>

Responsive Text Alignment:

Use text-{breakpoint}-{alignment} for responsive alignment.

Example:

<p class="text-sm-start text-md-center text-lg-end">
    Responsive text alignment
</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <h1 class="text-secondary">Hello LPU</h1>
    <h1 class="text-success">Hello LPU</h1>
    <h1 class="text-danger">Hello LPU</h1>
    <h1 class="text-primary">Hello LPU</h1>
    <h1 class="text-warning">Hello LPU</h1>
    <h1 class="text-info">Hello LPU</h1>
    <h1 class="text-light">Hello LPU</h1>
    <h1 class="text-dark">Hello LPU</h1>
    <h1 class="text-muted">Hello LPU</h1>
    <h1 class="text-white">Hello LPU</h1>
    <h1 class="text-black">Hello LPU</h1>
    <h1 class="text-body">Hello LPU</h1>
    <h1 class="text-white bg-primary">Hello LPU</h1>
    <h1 class="text-white bg-secondary">Hello LPU</h1>
    <h1 class="text-white bg-success">Hello LPU</h1>
    <h1 class="text-white bg-danger">Hello LPU</h1>
    <h1 class="text-white bg-warning">Hello LPU</h1>
    <h1 class="text-white bg-info">Hello LPU</h1>
    <h1 class="text-white bg-light">Hello LPU</h1>
    <h1 class="text-white bg-dark">Hello LPU</h1>
</body>
</html>

What is Mern Stack? | Comprehensive Notes | HTML CSS

1. HTML Tag Attributes

2. HTML Comments

3. Form Elements with Attributes

4. HTML Semantic Tags

5. HTML Table with Attributes

6. HTML Media Tags with Attributes

Example 1

Output:

Lovely Professional University

Example 2

Output:

Lovely Professional University

Lovely Professional University

Lovely Professional University

Lovely Professional University

Lovely Professional University

Lovely Professional University

1. Ordered List (<ol>)

Syntax:

Output:

Attributes for <ol> :

Output:

2. Unordered List (<ul>)

Syntax:

Output:

Attributes for <ul>:

Output:

3. Nesting Lists

Output:

Styling Lists with CSS

HTML Tables

Basic Structure of a Table

Output:

Key Tags in a Table

Output:

Table Attributes

Table Sections

Output:

Merging Cells

Styling Tables with CSS

Example

Output:

TIME TABLE

HTML Forms

Basic Structure of a Form

Form Elements

1. Input Fields

Common Types of <input>:

2. Labels

3. Textarea

4. Dropdown (Select Box)

5. Buttons

Form Attributes

Form Validation

Styling Forms with CSS

Example: Complete Registration Form

Example

Output:

Block and Inline Elements in HTML

Block-Level Elements

Characteristics:

Common Block-Level Elements:

Example:

Output:

Inline Elements

Characteristics:

Common Inline Elements:

Example:

Output:

Key Differences Between Block and Inline Elements

Advantages of CSS

Types of CSS

Example

Ways to Apply CSS

Selectors in CSS

Basic Selectors

Combinators

Basic Styling Properties

1. Text Styling

**1.1. Universal Selector (*)**