By Mr.

SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 1 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Subject: Computer Applications || Class 10 || CBSE || 2024-2025
Chapter – 5 || HTML 3 || Audio, Video and Forms
The <audio> tag in HTML
It is used to embed sound files (like music or voice recordings) into web pages.
It allows you to play audio directly within the browser, and you can include controls like play, pause, and
volume adjustment.
Currently there are three supported file format for HTML 5 audio tag.

1. mp3
2. wav
3. ogg

Basic Structure of the <audio> Tag:

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

Explanation:

1. <audio> Tag: This is the main tag that embeds the audio. It's like a container for your sound files.
2. Attributes:

 controls: This adds the default audio player controls (play, pause, volume, etc.).
 You can also add other attributes like:

 autoplay: Automatically starts playing the audio when the page loads (but often not
recommended for user experience).
 loop: Repeats the audio in a loop after it finishes.
 muted: Starts the audio in a muted state.
 preload: Preloads the audio before it's played (none, metadata, or auto).

3. <source> Tag: You can provide multiple formats (e.g., MP3, OGG) inside the <audio> tag using
<source>.

 src: Path to the audio file.

 type: Specifies the format of the audio (e.g., audio/mpeg for MP3, audio/ogg for OGG).

4. Fallback Content: If the browser doesn't support the <audio> tag, this text will display to inform
the user that audio playback is unavailable.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 2 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

In the above example:

 The browser tries to play the audio in MP3 format. If the browser doesn't support MP3, it will try
to use the OGG format.
 The user will see a basic audio player with controls.

Common Attributes and What They Do:

 controls: Shows play, pause, and volume control.

 autoplay: Starts playing the audio when the page loads.
 loop: Makes the audio play repeatedly in a loop.
 muted: Starts the audio muted.
 preload: Preloads the audio file when the page loads.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<audio> Yes Yes Yes Yes Yes

<audio src="https://assets.codepen.io/6093409/drums.mp3" controls>

Your browser does not support the audio element.
</audio>
===========================================================================
<audio controls>
<source src="https://assets.codepen.io/6093409/drums.ogg" type="audio/ogg">
<source src="https://assets.codepen.io/6093409/drums.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
===========================================================================
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 3 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
<audio src="https://assets.codepen.io/6093409/drums.mp3" controls autoplay>
Your browser does not support the audio element.
</audio>
===========================================================================
<audio src="https://assets.codepen.io/6093409/drums.mp3" controls autoplay muted>
Your browser does not support the audio element.
</audio>
===========================================================================

<audio src="https://assets.codepen.io/6093409/drums.mp3" controls loop>

Your browser does not support the audio element.
</audio>
===========================================================================

===========================================================================

HTML Video Tag

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a movie
clip, song clip on the web page.

Currently, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg

The <video> tag in HTML is used to embed video files into web pages. It allows users to watch videos
directly in their browser, and you can include controls like play, pause, volume, and fullscreen.

Basic Structure of the <video> Tag:

<video width="320" height="240" controls>
<source src="your-video-file.mp4" type="video/mp4">
<source src="your-video-file.webm" type="video/webm">
Your browser does not support the video tag.
</video>
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 4 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Explanation:

1. <video> Tag: This is the main tag that embeds the video. It's like a container for your video files.
2. Attributes:

 controls: Adds the default video player controls (play, pause, volume, fullscreen, etc.).
Without this, the video will play automatically without user controls.
 width and height: Define the size of the video in pixels (e.g., 320x240).
 autoplay: Automatically starts playing the video when the page loads.
 loop: Makes the video play repeatedly in a loop.
 muted: Starts the video with no sound.
 preload: Preloads the video file before the user clicks play (none, metadata, or auto).

3. <source> Tag: You can provide multiple formats (e.g., MP4, WebM) to ensure the video works on
different browsers.

 src: The path to your video file.

 type: Specifies the format of the video (e.g., video/mp4 for MP4, video/webm for WebM).

4. Fallback Content: If the browser doesn’t support the <video> tag, the fallback content (e.g., text)
will be shown to inform users that video playback is unavailable.

Example:

<video width="640" height="360" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

In this example:

 The browser will try to play the video in MP4 format. If the browser doesn’t support MP4, it will
try WebM.
 The video player will be 640x360 pixels and include playback controls.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 5 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Common Attributes and What They Do:

 controls: Displays video controls (play, pause, volume, fullscreen, etc.).

 autoplay: Automatically starts the video when the page loads (can annoy users, so use carefully).
 loop: Makes the video replay automatically after finishing.
 muted: Starts the video with the sound turned off.
 preload: Preloads the video before it's played, which can be set to none, metadata, or auto

preload="auto"

Poster:

This specifies an image to be shown while the video downloads or until the user hits the play button.

<video src=”movie.mp4″ poster=”thumbnail.jpg”></video>

Supported browsers:

 Google Chrome 3

 Edge 12

 Firefox 3.5

 Opera 10

 Safari 3.1
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 6 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
HTML forms
HTML forms are used to collect user input and send it to a server for processing. Forms are essential for
any website where you need user interaction, such as logging in, signing up, searching, or submitting
data.

Forms allow collecting and sending data to a server.

Basic Structure of an HTML Form:

<form action="submit-form.php" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="username" required><br><br>

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

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

</form>

Explanation:

1. <form> Tag: The <form> tag is the container for the form elements (like text fields, radio buttons,
etc.).
 action: Specifies the URL where the form data will be sent (e.g., a server-side script or API).
 method: Defines how the data will be sent. Common methods:
 POST: Sends data securely (often used for sensitive data).

 GET: Appends form data to the URL (useful for searches but not secure for sensitive

data).
2. Form Elements: Inside the <form> tag, you place different types of input fields to collect data.
Below are some common types:
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 7 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Common Form Elements:
1. Text Input (<input type="text">): Used for one-line text input.

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

oid: Links the input to a label.

oname: Identifies the field when data is submitted.
orequired: Makes the field mandatory.
2. Password Input (<input type="password">): Used for entering passwords (characters are hidden).

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

3. Email Input (<input type="email">): Validates input as an email address.

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

4. Radio Buttons (<input type="radio">): Lets users select one option from a group.

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female

5. Checkbox (<input type="checkbox">): Lets users select one or more options.

<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">

6. Drop-down Menu (<select>): A list where users can select one or more options.

<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>

7. Submit Button (<input type="submit">): A button to submit the form data.

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

8. Textarea (<textarea>): A multi-line text input.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 8 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Example of a Complete Form:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required><br><br>

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

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br><br>

<label for="subscribe">Subscribe to newsletter:</label>

<input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br>

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

</form>
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 9 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

Exercise Time
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 10 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 11 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 12 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

Chapter – 6 || C.S.S. || Cascading Style Sheets

Static vs. Dynamic Web Pages is a fundamental concept in web development.
1. Static Web Pages
A static web page is a simple web page where the content does not change or respond to user interaction.
These pages are pre-built and served as-is to every visitor.

Key Features:

 Fixed content: The content is hard-coded in HTML and does not change unless manually updated
by a developer.
 No interaction: They do not involve user interaction, such as form submission or personalization.
 No server-side processing: No scripting language (like PHP or Python) is used on the server side.
The page is created entirely using HTML, CSS, and sometimes JavaScript.
 Faster to load: Since there's no server-side processing, static pages generally load faster.
 Easy to build: Static websites are easier and quicker to build and deploy because they do not
require complex coding.

Examples:

 A personal portfolio page.

 A company’s basic information website (e.g., About Us, Contact Us pages).
 A brochure-style website.

Technologies Used:

 HTML
 CSS
 Basic JavaScript (for simple functionality like form validation or animations)

2. Dynamic Web Pages:

A dynamic web page generates content on the fly, based on user input, database interaction, or other
factors. These pages can change their content dynamically depending on various conditions.

Key Features:

 Interactive and personalized: They can display different content based on user input (e.g.,
search results, logged-in user info).
 Server-side processing: They rely on server-side technologies (like PHP, ASP.NET, Node.js, etc.)
to generate content dynamically.
 Database-driven: Dynamic pages often fetch data from a database, making it easy to display
large, constantly changing datasets (e.g., products in an online store).
 Real-time updates: The content can be updated in real-time without manually editing the HTML.
 More complex to build: They require back-end coding, server-side scripts, and a database.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 13 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

Examples:

 Social media platforms (Facebook, Twitter).

 E-commerce websites (Amazon, eBay).
 News portals where content is regularly updated.
 Web applications with user accounts, forms, and real-time data (like Gmail).

Technologies Used:

 HTML, CSS, JavaScript (for frontend).

 Server-side languages like PHP, Python, Ruby, Node.js.
 Databases like MySQL, MongoDB, PostgreSQL.

Comparison Summary:

Feature Static Web Pages Dynamic Web Pages

Content Fixed, same for all users Changes based on user input or database

Server-Side No server-side processing Requires server-side processing

Interaction Minimal or none Highly interactive and user-specific

Performance Fast Slower due to processing

Complexity Easy to build More complex, requires back-end coding

Example Portfolio site, brochure site E-commerce, social media, web apps

Conclusion:

 Static pages are simple, fast, and suitable for websites with fixed content.
 Dynamic pages are more flexible, interactive, and necessary for websites that need to display
varying content, user data, or real-time updates.

===========================================================================
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 14 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
DHTML (Dynamic HTML) is a term that refers to the combination of web technologies used to
create interactive and animated websites.
What is DHTML?

 DHTML is not a single technology but a collection of technologies that work together to create
dynamic and interactive web content. It primarily involves:

 HTML (for the structure),

 CSS (for the presentation),
 JavaScript (for interactivity), and
 DOM (Document Object Model) (to manipulate the HTML elements dynamically).

Advantages of DHTML:

 Interactivity: Makes websites more interactive by responding to user actions in real-time.

 Reduced Server Load: Changes are made on the client-side without needing to reload the page or
contact the server for every update.
 Improved User Experience: Faster and smoother interactions enhance the user experience

===========================================================================

CSS (Cascading Style Sheets) is a style sheet language used to describe the
presentation and layout of a document written in HTML
CSS is a powerful tool for web design and development, enabling developers to create
visually appealing and responsive websites.
In simple terms:
 HTML is like the structure or skeleton of a webpage.
 CSS is like the clothes and makeup that make the webpage look attractive.

Benefits of CSS

1. Improved Design and Layout

2. Faster Page Loading: External CSS files are stored in the browser’s cache, so they don't need to be
loaded again for each page, speeding up the site.
3. Enhanced User Experience
4. Easier Maintenance: If you need to make changes to the design, you only need to update the CSS
file, making website maintenance simpler.
5. Responsive Web Design
6. Saves Time: You can write CSS once and use it across multiple pages. This reduces the need to
repeat the same styling code on every page.
7. Browser Compatibility
8. Control Over Print Styles
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 15 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
9. Advanced Layout Techniques
10. Consistency: You can change the design in one place, and it will be reflected across the entire site.

===========================================================================

Basic Syntax of CSS

selector {
property: value;
}

 Selector: This targets the HTML element(s) you want to style (e.g., h1, p, .class, #id).
 Property: This is the style attribute you want to change (e.g., color, font-size, margin).
 Value: This specifies the value of the property (e.g., red, 16px, 10%).

Types of CSS

1. Inline CSS:
o Styles are applied directly within an HTML element using the style attribute.
o Example:

<h1 style="color: blue;">Hello World!</h1>

2. Internal CSS:
o Styles are defined within a <style> tag inside the <head> section of an HTML document.

<head>
<style>
h1 {
color: green;
}
</style>
</head>

3. External CSS:
o Styles are defined in a separate CSS file and linked to the HTML document using the <link>
tag.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

o In styles.css:

h1 {
color: red;
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 16 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
CSS Selectors
Here are some common types of selectors:

1. Element Selector: Targets all instances of a specific HTML element.

p{
color: blue;
}

2. Class Selector: Targets elements with a specific class. Classes are defined with a dot (.) before the
class name.

.myClass {
font-size: 20px;
}

3. ID Selector: Targets a specific element with a unique ID. IDs are defined with a hash (#) before the
ID name.

#myId {
background-color: yellow;
}

4. Attribute Selector: Targets elements based on their attributes.

a[href="https://example.com"] {
color: green;
}

5. Pseudo-classes: Targets elements in a specific state (e.g., when hovered).

a:hover {
text-decoration: underline;
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 17 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
CSS Box Model
The CSS box model describes how the size of an element is determined and how spacing is managed.
Each box consists of:

 Content: The actual content of the box (text, images).

 Padding: Space between the content and the border (inside the box).
 Border: A border surrounding the padding and content.
 Margin: Space outside the border, separating the element from others.

Diagram of Box Model:

+-----------------------------+
| Margin |
| +-------------------------+ |
|| Border ||
| | +---------------------+ | |
| | | Padding |||
| | | +---------------+ | | |
| | | | Content | | | |
| | | +---------------+ | | |
| | +---------------------+ | |
| +-------------------------+ |
+-----------------------------+

CSS Properties

1. Text Properties:

 color: Sets the text color.

 font-size: Sets the size of the font.
 font-family: Specifies the font used.

2. Background Properties:

 background-color: Sets the background color of an element.

 background-image: Sets an image as the background.

3. Layout Properties:

 width and height: Define the size of an element.

 margin: Sets the space around elements.
 padding: Sets the space between the content and the border.
 border: Specifies the border style, width, and color.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 18 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
4. Positioning Properties:

 position: Defines how an element is positioned (e.g., static, relative, absolute, fixed).
 top, right, bottom, left: Specify the position of an element.

5. Flexbox and Grid:

 CSS Flexbox and Grid are modern layout techniques that provide flexible and responsive designs.
 Example of Flexbox:

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

===========================================================================

The key font properties you can use in CSS:

1. font-family
/* Example */

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

2. font-size
This property sets the size of the font. It can be specified in various units, such as px, em, rem, %, and pt.

/* Example */
h1 {
font-size: 24px; /* Absolute size */
}

p{
font-size: 1.2em; /* Relative size */
}

3. font-style: The common values are normal, italic, and oblique.

/* Example */
em {
font-style: italic;
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 19 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

4. font-weight : Common values include normal, bold, bolder, lighter, or numerical values (100 to 900).
/* Example */
strong {
font-weight: bold;
}

h2 {
font-weight: 600; /* Semi-bold */
}

5. font-variant : Common values include normal, small-caps.

/* Example */
h3 {
font-variant: small-caps;
}

6. line-height : It can take unitless values, pixels, or percentages.

/* Example */
p{
line-height: 1.5; /* 1.5 times the font size */
}

7. letter-spacing: It can be specified in units like px, em, or rem.

/* Example */
h1 {
letter-spacing: 2px;
}

8. word-spacing: This property controls the space between words in a text. It can also be specified in
units like px, em, or rem.

/* Example */
p{
word-spacing: 5px;
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 20 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

9. text-transform: This property specifies the capitalization of text. Common values are uppercase,
lowercase, capitalize, and none.

/* Example */
h2 {
text-transform: uppercase; /* Transforms all letters to uppercase */
}

10. text-align : Common values are left, right, center, and justify.
/* Example */
h1 {
text-align: center;
}

11. text-decoration: Common values include none, underline, overline, and line-through.
/* Example */
a{
text-decoration: underline; /* Underlines the link */
}

12. text-shadow: This property adds shadow effects to text. It requires the horizontal and vertical
offsets, blur radius, and color.
/* Example */
h2 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

13. font: including font-style, font-variant, font-weight, font-size, line-height, and font-family.
/* Example */
h1 {
font: italic bold 20px/1.5 "Arial", sans-serif;
}

Conclusion
CSS font properties are essential for controlling the typography of your web pages.
=================================================================================
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 21 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
The key border properties in CSS
1. border

The border property is a shorthand that allows you to set the border width, style, and color in a single
declaration.

/* Example */
div {
border: 2px solid blue; /* 2px width, solid style, blue color */
}

2. border-width: This property defines the thickness of the border. You can specify values in various units
(pixels, ems, etc.) and set different widths for each side (top, right, bottom, left).

/* Example */
p{
border-width: 1px; /* Applies to all sides */
}

h1 {
border-width: 2px 5px; /* Top & bottom: 2px, right & left: 5px */
}

h2 {
border-width: 2px 3px 5px 1px; /* Top, right, bottom, left */
}

3. border-style: This property defines the style of the border. Common values include:

 none: No border.
 solid: A solid line.
 dashed: A dashed line.
 dotted: A dotted line.
 double: A double line.
 groove: A 3D grooved border.
 ridge: A 3D ridged border.
 inset: A 3D inset border.
 outset: A 3D outset border.

/* Example */
h3 {
border-style: dashed; /* Dashed border */
}

h4 {
border-style: double; /* Double border */
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 22 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
4. border-color: This property sets the color of the border. You can use named colors, HEX codes, RGB,
RGBA, HSL, or HSLA values.

/* Example */
span {
border-color: red; /* Named color */
}

div {
border-color: #00ff00; /* HEX code */
}

5. border-top, border-right, border-bottom, border-left

These properties allow you to set individual borders for each side of an element.

/* Example */
section {
border-top: 3px solid black; /* Top border */
border-right: 1px dashed blue; /* Right border */
border-bottom: 2px dotted green; /* Bottom border */
border-left: 4px double red; /* Left border */
}

6. border-radius: This property creates rounded corners for borders

/* Example */
button {
border-radius: 10px; /* Uniform rounding for all corners */
}

div {
border-radius: 10px 5px 15px 20px; /* Top-left, top-right, bottom-right, bottom-left */
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 23 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

7. border-image: This property allows you to use an image as a border. You can define the image source,
slice, width, and repeat style.

/* Example */
img {
border-image-source: url('border-image.png');
border-image-slice: 30; /* Slices the image */
border-image-width: 5px; /* Border width */
border-image-outset: 0; /* Outset value */
border-image-repeat: stretch; /* How the image is repeated */
}

8. outline: While not technically a border, the outline property creates a line around an element without
affecting its size or layout. It has similar properties: width, style, and color.
/* Example */
input:focus {
outline: 2px solid orange; /* Outline on focus */
}

Border Radius Examples

===========================================================================
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 24 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
Border Properties:
 border-style: Defines the style of the border. Possible values include:

 none: No border.
 solid: A solid line.
 dashed: A dashed line.
 dotted: A dotted line.
 double: A double line.
 groove: A 3D grooved border.
 ridge: A 3D ridged border.
 inset: A 3D inset border.
 outset: A 3D outset border.

/* Example of various border styles */

.box {
border-width: 5px;
border-color: black;
border-style: solid; /* Change to dashed, dotted, etc. for different styles */

/* border: 2px dashed red; 2px width, dashed style, red color */
}

===========================================================================

Padding and margin are two fundamental concepts in CSS that help control the spacing and
layout of elements on a web page. They serve different purposes, and understanding their differences is
key to effective web design. Here’s a detailed overview of both:

Padding
Padding is the space between the content of an element and its border. It creates an inner space, pushing
the border away from the content.

Key Points:

 Applies to: The inside of an element (between the content and the border).
 Affects: The total size of the element since padding increases the space inside the border.
 Background Color: The background color of the element will fill the padding area.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 25 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
CSS Properties:

1. padding
o Shorthand for setting padding on all sides (top, right, bottom, left) in one declaration.

/* Example */
div {
padding: 20px; /* 20px on all sides */
}

2. padding-top, padding-right, padding-bottom, padding-left

o These properties allow you to set padding for individual sides of the element.

/* Example */
p{
padding-top: 10px; /* Top padding */
padding-right: 15px; /* Right padding */
padding-bottom: 10px; /* Bottom padding */
padding-left: 15px; /* Left padding */
}

3. Responsive Padding
o You can also use relative units (like em, rem, or %) for responsive design.

/* Example */
h2 {
padding: 1.5em; /* Padding relative to font size */
}

Margin
Margin is the space outside an element's border. It creates an outer space, separating the element from
other elements.

Key Points:

 Applies to: The outside of an element (between the border and surrounding elements).
 Affects: The layout of surrounding elements; margins do not affect the size of the element itself.
 Collapsing Margins: Vertical margins of block-level elements can collapse into a single margin.

CSS Properties:

1. margin
 Shorthand for setting margin on all sides (top, right, bottom, left) in one declaration.

/* Example */
div {
margin: 20px; /* 20px on all sides */
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 26 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104
2. margin-top, margin-right, margin-bottom, margin-left
 These properties allow you to set margin for individual sides of the element.

/* Example */
p{
margin-top: 10px; /* Top margin */
margin-right: 15px; /* Right margin */
margin-bottom: 10px; /* Bottom margin */
margin-left: 15px; /* Left margin */
}

3. Auto Margin
 Using margin: auto; can be a way to center block elements horizontally.

/* Example */
div {
width: 50%;
margin: auto; /* Centers the div */
}

4. Responsive Margin
 Margins can also be set using relative units for responsiveness.

/* Example */
h2 {
margin: 2%; /* Margin relative to the parent width */
}

Summary of Differences
Feature Padding Margin

Outside the element (border to

Location Inside the element (content to border)
surrounding elements)

Affects Size Increases the element's total size Does not affect the element's size

Background Fills the padding area with the element's

Does not fill the margin area
Color background color

Margins can collapse with adjacent

Collapse Padding does not collapse
margins
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 27 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

===========================================================================

Exercise Time
Below Are Some Sample Previous Year Questions Related To CSS:

1. What is CSS? Explain its importance in web designing.

Answer: CSS stands for Cascading Style Sheets. It is used to style and design web pages.
CSS controls the layout of multiple web pages at once and allows for the separation of content (HTML) from
presentation (CSS), making websites easier to manage and more flexible.

2. Differentiate between inline, internal, and external CSS.

Answer:
 Inline CSS: Styles are written directly inside the HTML element using the style attribute.
 Internal CSS: Styles are placed within the <style> tag in the <head> section of the HTML
document.
 External CSS: Styles are defined in an external .css file and linked to the HTML document using
the <link> tag.
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 28 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104

3. Write the syntax for applying a background color to a web page using CSS.
Answer:
body {
background-color: lightblue;
}

4. What is a CSS selector? Give examples of different types of CSS selectors.

Answer: A CSS selector is used to select the HTML element(s) you want to style. Examples:

 Element Selector h1 { color: blue; }

 Class Selector .className { font-size: 20px; }
 ID Selector #idName { background-color: yellow; }

5. Explain the difference between class and ID selectors in CSS.

Answer:
 Class Selector: Applied to multiple elements. It is defined using a dot (.) followed by the class name.
 ID Selector: Applied to a single element. It is defined using a hash (#) followed by the ID name.

6. How can you link an external CSS file to an HTML document?

Answer:
<link rel="stylesheet" type="text/css" href="styles.css">

7. What is the purpose of the float property in CSS?

Answer: The float property is used to align an element to the left or right side of its
container, allowing text and inline elements to wrap around it.

8. Write a CSS rule to change the font size of all paragraphs to 16px and the font color to blue.

Answer:

p {
font-size: 16px;
color: blue;
}
By Mr. SAURABH CHAUHAN (PGT Computer Science) Sunday, October 20, 2024 Page 29 of 29
PD Public Senior Secondary School Firozpur Jhirka, Haryana - 122104