DATE: [Link] : PAGE.
NO :
Aim:
Write an HTML program that demonstrates the use of various list
types including an ordered list, an unordered list, nested lists (with
an ordered list inside an unordered list), and a definition list.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h1>HTML Lists Example</h1>
<!-- Ordered List -->
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Unordered List -->
<h2>Unordered List</h2>
<ul>
<li>Black</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
<!-- Nested List: Ordered list inside an unordered list -->
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<h2>Nested List</h2>
<ul>
<li>Fruits
<ol>
<li>Pink</li>
<li>Red</li>
</ol>
</li>
<li>Vegetables
<ul>
<li>Gray</li>
<li>Brown</li>
</ul>
</li>
</ul>
<!-- Definition List -->
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language for designing web pages.</dd>
</dl>
</body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The HTML program has been executed successfully, demonstrating
the working of ordered, unordered, nested, and definition lists.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Create an HTML program that demonstrates the use of the <a> tag
to create hyperlinks. This example will use the href attribute to
specify the URL and the target attribute to control where the link
opens.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Hyperlinks Example</h1>
<p>
Visit <a href="[Link]
target="_blank">Example Website</a> for more information.
</p>
<p>
Also, check out <a href="[Link]
target="_self">AItool</a> by clicking the link.
</p>
</body>
</html>
Expected Output:
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The program has been executed successfully, demonstrating the
use of the <a> tag with href and target attributes.
Aim:
Create an HTML document that displays your image and your
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
friend’s image with specified height and width. When clicked, each
image should navigate to its respective profile page.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Profile Images</title>
</head>
<body>
<h1>Profile Images</h1>
<p>Click on the image to visit the profile.</p>
<!-- Your profile -->
<a href="[Link] target="_blank">
<img src=""C:\Users\SNIGDHA\[Link]" " alt="My
Profile" width="200" height="200">
</a>
<!-- Friend's profile -->
<a href="[Link] target="_blank">
<img src=""C:\Users\SNIGDHA\Documents\ [Link]" "
alt="Friend's Profile" width="200" height="200">
</a>
</body>
</html>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Expected Output:.
Executed Output:
Result:
The HTML document has been executed successfully, fulfilling the
requirement to display clickable profile images with specified
dimensions.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Create an HTML program for an image gallery that uses thumbnails
(e.g., 100x100 pixels) as links. Each thumbnail image is a link to the
full-sized version of the image.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h1>Thumbnail Image Gallery</h1>
<p>Click on a thumbnail to view the full-size image.</p>
<div>
<a href="[Link]" target="_blank">
<img src="[Link]" alt="Image 1" width="100" height="100">
</a>
<a href="[Link]" target="_blank">
<img src="2_thumbnail.jpeg" alt="Image 2" width="100"
height="100"> </a>
<a href="[Link]" target="_blank">
<img src="3_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
<a href="[Link]" target="_blank">
<img src="4_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
<a href="[Link]" target="_blank">
<img src="5_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
</a>
<a href="[Link]" target="_blank">
<img src="6_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
<a href="[Link]" target="_blank">
<img src="7_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
<a href="[Link]" target="_blank">
<img src="8_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
<a href="[Link]" target="_blank">
<img src="9_thumbnail.jpeg" alt="Image 3" width="100"
height="100”> </a>
<a href="[Link]" target="_blank">
<img src="10_thumbnail.jpeg" alt="Image 3" width="100"
height="100">
</a>
</div>
</body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
Result:
The image gallery program has been executed successfully, using
thumbnails as links to full-size images.
Aim:
Write a HTML program to explain the working of tables using tags
<table>, <tr>, <th>, <td> and attributes border, rowspan,
colspan.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>HTML Table Example</h2>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td rowspan="2">Charlie</td>
<td>Phone</td>
<td>Email</td>
</tr>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<tr>
<td>8786832964</td>
<td>Charlie@[Link]</td>
</tr>
</table>
</body>
</html>
Expected Output:
Executed Output:
Result:
Hence, the HTML program demonstrates the use of table tags and
attributes (border, rowspan, colspan) successfully.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Write a HTML program to explain the working of tables by preparing
a timetable. Use the <caption> tag to set a caption for the table
and include attributes such as cellspacing, cellpadding, border,
rowspan, and colspan.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Weekly Timetable</title>
</head>
<body>
<h2>Weekly Timetable</h2>
<table border="1" cellspacing="5" cellpadding="10">
<caption>Weekly Class Timetable</caption>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<th>Friday</th>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>Maths</td>
<td>Biology</td>
<td rowspan="2">Telugu</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>English</td>
<td>Maths</td>
<td>Biology</td>
<td>Hindi</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td colspan="2">Break</td>
<td colspan="3">Lab Work</td>
</tr>
</table>
</body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
Result:
Thus, the program successfully illustrates the use of table attributes
and the <caption> tag in creating a timetable.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Write a HTML program to explain the working of forms by designing
a Registration form. The form must include text, password, number,
date of birth fields, checkboxes, radio buttons, a drop-down list using
<select> and <option>, a <textarea>, and two buttons (submit
and reset). A table is used for better presentation.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="submit_form.html" method="post">
<table border="1" cellspacing="5" cellpadding="10">
<tr>
<td><label for="fname">First Name:</label></td>
<td><input type="text" id="fname" name="fname"
required></td>
</tr>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<tr>
<td><label for="lname">Last Name:</label></td>
<td><input type="text" id="lname" name="lname"
required></td>
</tr>
<tr>
<td><label for="pwd">Password:</label></td>
<td><input type="password" id="pwd" name="pwd"
required></td></tr><tr>
<td><label for="age">Age:</label></td>
<td><input type="number" id="age" name="age"
required></td></tr><tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob"
required></td> </tr> <tr>
<td>Gender:</td><td>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
</td></tr> <tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" id="reading" name="hobby"
value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="hobby"
value="traveling">
<label for="traveling">Traveling</label>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<input type="checkbox" id="sports" name="hobby"
value="sports">
<label for="sports">Sports</label>
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</td> </tr>
<tr>
<td><label for="bio">Biography:</label></td>
<td><textarea id="bio" name="bio" rows="4"
cols="30"></textarea></td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td> </tr>
</table>
</form>
</body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
Thus, the registration form program demonstrates the use of various
form elements and table layout effectively.
Aim:
Write a HTML program to explain the working of frames by dividing
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
the page into three parts. The frames should be arranged side by
side such that:
First frame displays an image.
Second frame displays a paragraph.
Third frame displays a hyperlink.
Also, use the "no resize" attribute to keep the frames fixed.
Program:
Main Frameset File ([Link]):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Frame</title>
</head>
<body>
<h2>Image Frame</h2>
<img src="[Link] alt="Sample Image"
width="100%" height="100%">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph Frame</title>
</head>
<body>
<h2>Paragraph Frame</h2>
<p>This is a paragraph frame. Here you can add any text content you want
to display in this section of the page.</p>
</body>
</html>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Link Frame</title>
</head>
<body>
<h2>Link Frame</h2>
<p>Click the link below to visit a website:</p>
<a href=""C:\Users\SNIGDHA\Documents\ [Link]" " target="_blank">Visit
[Link]</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frames Example</title>
</head>
<frameset rows="50%, 25%, 25%">
<frame src="image_frame.html" name="imageFrame">
<frame src="paragraph_frame.html" name="paragraphFrame">
<frame src="link_frame.html" name="linkFrame">
</frameset>
<noframes>
<body>
<h1>This page uses frames.</h1>
<p>Your browser does not support frames. Please update your browser or
use a different one.</p>
</body>
</noframes>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
</html>
Expected Output:
Executed Output:
Result:
Hence, the frames program successfully demonstrates how to divide
a page into three parts with fixed frames containing an image, a
paragraph, and a hyperlink.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
.
Aim:
Create an HTML page that demonstrates the usage of various
HTML5 semantic tags such as <article>, <aside>, <figure>,
<figcaption>, <footer>, <header>, <main>, <nav>, <section>,
<div>, and <span>.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Tags Example</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#article">Article</a></li>
<li><a href="#aside">Aside</a></li>
<li><a href="#section">Section</a></li>
</ul>
</nav>
<main>
<article id="article">
<header>
<h2>Article Title</h2>
</header>
<section>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<p>This is the main content of the article.</p>
</section>
<figure>
<img src="[Link]" alt="Example Image">
<figcaption>Figure Caption: Example Image</figcaption>
</figure>
<footer>
<p>Article Footer Information</p>
</footer>
</article>
<aside id="aside">
<h3>Related Information</h3>
<p>This is an aside section with additional information.</p>
</aside>
<section id="section">
<div>
<span>Some inline text within a div.</span>
</div>
</section>
</main>
<footer>
<p>Website Footer Content</p>
</footer></body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The program demonstrating HTML5 semantic tags has been
executed successfully.
Aim:
Develop an HTML page that embeds both an audio file and a video
file.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embed Audio and Video</title>
</head>
<body>
<h1>Audio and Video Embed Example</h1>
<!-- Audio Embed -->
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br><br>
<!-- Video Embed -->
<video width="320" height="240" controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Expected Output:
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The program to embed audio and video in an HTML page has been
executed successfully.
Aim:
Create an HTML page that demonstrates three levels of CSS style
specifications—inline, internal, and external—while identifying
selectors, properties, and values.
Program:
HTML File ([Link]):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Different Types of CSS</title>
<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="[Link]">
<!-- Internal CSS --><style>
/* Element Selector: Applies to all <p> elements */
p{
color: blue; /* Property: color, Value: blue */
font-size: 16px; /* Property: font-size, Value: 16px */}
/* Class Selector: .highlight */
.highlight {
background-color: yellow; /* Property: background-color, Value:
yellow */
}
/* ID Selector: #special */
#special {
font-weight: bold; /* Property: font-weight, Value: bold */
}
</style>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
</head>
<body>
<!-- Inline CSS: directly on the element -->
<h1 style="color: red;">Inline Style Heading</h1>
<p>This paragraph is styled using internal CSS.</p>
<p class="highlight">This paragraph has a highlighted
background using class selector.</p>
<p id="special">This paragraph is special using id selector.</p>
<p style="font-style: italic;">This paragraph uses inline CSS for
italic text.</p>
</body>
</html>
External CSS File ([Link]):
/* Group Selector: Applies to both h2 and h3 elements */
h2, h3 {
color: green; /* Property: color, Value: green */
}
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
Result:
The program demonstrating multiple CSS specification formats has
been executed successfully.
Aim:
Develop an HTML page with embedded CSS that uses various CSS
selector forms including simple selectors, combinator selectors,
pseudo-class and pseudo-element selectors, and attribute selectors.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Selector Forms</title>
<style>
/* Simple Selectors */
p { color: navy; } /* Element selector */
#unique { color: maroon; } /* ID selector */
.special { font-style: italic; } /* Class selector */
h1, h2 { text-align: center; } /* Group selector */
* { margin: 0; padding: 0; } /* Universal selector */
/* Combinator Selectors */
.container p { font-size: 18px; } /* Descendant selector */
.container > p { border: 1px solid black; } /* Child selector */
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
h2 + p { color: purple; } /* Adjacent sibling selector */
h2 ~ p { background-color: lightgray; } /* General sibling
selector */
/* Pseudo-class Selector */
a:hover { text-decoration: underline; }
/* Pseudo-element Selector */
p::first-line { font-weight: bold; }
/* Attribute Selector */
a[href^="https"] { color: green; } /* Selects links whose href
begins with "https" */
</style>
</head>
<body>
<h1>CSS Selector Forms</h1>
<div class="container">
<h2>Heading 2</h2>
<p id="unique" class="special">This is a paragraph
demonstrating various CSS selectors.</p>
<p>This is another paragraph in the container.</p>
</div>
<a href="[Link] Link</a>
<br>
<a href="[Link] Link</a>
</body>
</html>
Expected Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Executed Output:
Result:
The program demonstrating various CSS selector forms has been
executed successfully.
Aim:
Create an HTML page that shows different methods of specifying
colors in CSS.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Color References in CSS</title>
<style>
.named { color: red; } /* Named color */
.hex { color: #00FF00; } /* Hexadecimal */
.rgb { color: rgb(0, 0, 255); } /* RGB */
.rgba { color: rgba(255, 0, 0, 0.5); } /* RGBA */
.hsl { color: hsl(120, 100%, 50%); } /* HSL */
.hsla { color: hsla(240, 100%, 50%, 0.5); } /* HSLA */
</style>
</head>
<body>
<p class="named">This text is red (named color).</p>
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
<p class="hex">This text is green (hexadecimal).</p>
<p class="rgb">This text is blue (RGB).</p>
<p class="rgba">This text is semi-transparent red (RGBA).</p>
<p class="hsl">This text uses HSL (green).</p>
<p class="hsla">This text uses HSLA (semi-transparent
blue).</p>
</body>
</html>
Expected Output:.
Executed Output:
The program demonstrating multiple color reference methods in
CSS has been executed successfully.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Write a CSS rule that places a background image halfway down the
page, tilts it horizontally, and keeps it fixed during scroll.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image Placement</title>
<style>
body {
height: 2000px; /* Enable scrolling */
margin: 0;
position: relative;
}
/* Using a pseudo-element to display a rotated, fixed background
image */
body::before {
content: "";
position: fixed;
top: 50%; /* Position halfway down the page */
left: 50%;
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
width: 300px; /* Set image width */
height: 200px; /* Set image height */
background: url('[Link]') no-repeat;
background-size: cover;
transform: translate(-50%, -50%) rotate(10deg); /* Tilt image
horizontally */
z-index: -1; /* Ensure it stays in the background */
}
</style>
</head>
<body>
<h1>Scroll Down to See the Background Image Effect</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse potenti...</p>
<!-- More content to allow scrolling -->
</body>
</html>
Expected Output:
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The CSS rule placing and tilting the background image has been
executed successfully.
Aim:
Develop an HTML page that applies various CSS properties related
to font and text, including font-size, font-weight, font-style, text-
decoration, text-transformation, and text-alignment.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Font and Text Properties</title>
<style>
/* General styling for all paragraphs */
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
}
/* Paragraph with multiple text properties */
.text-example {
font-size: 20px; /* Font size */
font-weight: 600; /* Font weight */
font-style: italic; /* Font style */
text-decoration: underline; /* Text decoration */
text-transform: uppercase; /* Text transformation */
text-align: center; /* Text alignment */
margin: 20px 0;
color: #333;
}
/* Larger, bold paragraph aligned to left */
.text-large {
font-size: 28px;
font-weight: bold;
text-align: left;
margin: 20px 0;
color: #1a1a1a;
}
/* Smaller, normal paragraph aligned to right */
.text-small {
font-size: 14px;
font-weight: normal;
font-style: normal;
text-align: right;
margin: 20px 0;
color: #555;
}
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
/* Paragraph with line-through decoration */
.text-line {
font-size: 18px;
text-decoration: line-through;
text-align: center;
margin: 20px 0;
color: #d9534f;
}
/* Paragraph with transformation to lowercase */
.text-lowercase {
font-size: 22px;
text-transform: lowercase;
text-align: justify;
margin: 20px 0;
color: #337ab7;
}
</style>
</head>
<body>
<p class="text-example">
This is a styled paragraph demonstrating font-size, font-weight,
font-style, text-decoration, text-transformation, and text-alignment.
</p>
<p class="text-large">
This is a larger paragraph with bold text aligned to the left,
emphasizing the font-size and weight properties.
</p>
<p class="text-small">
This is a smaller paragraph, aligned to the right, showing normal
font style without additional decoration.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
</p>
<p class="text-line">
This paragraph has a line-through decoration to indicate removed
or obsolete text.
</p>
<p class="text-lowercase">
THIS TEXT IS TRANSFORMED TO LOWERCASE, demonstrating the
text-transform property.
</p>
</body>
</html>
Expected Output:
Executed Output:
Result:
The program demonstrating CSS font and text properties has been
executed successfully.
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Aim:
Create an HTML page that visually demonstrates the CSS Box Model
by showing the content area, border, padding, and margin of an
element.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Box Model Example</title>
<style>
.box-model {
width: 300px;
background-color: #f0f0f0; /* Content background */
border: 5px solid #333; /* Border */
padding: 20px; /* Padding */
margin: 30px; /* Margin */
}
.box-model p {
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
margin: 0;
}
</style>
</head>
<body>
<div class="box-model">
<p>This box demonstrates the CSS Box Model with content,
border, padding, and margin.</p>
</div>
</body>
</html>
Expected Output:
Executed Output:
FULL STACK DEVELOPMENT
CSE DEPARTMENT
DATE: [Link] : [Link] :
Result:
The program explaining the CSS Box Model has been executed
successfully.
FULL STACK DEVELOPMENT
CSE DEPARTMENT