Scribd
Upload
47 views

40 - Ipl - Exp3 - STD Output

The document is a lab report submitted by a student named Pooja R Sharma. It details an experiment aimed to apply different CSS selectors to style webpages. The student created 4 HTML pages with corresponding CSS files to demonstrate use of various selectors like class, id, child etc. Navigation was added across pages using links. Styling was applied to elements like background, text, images and tables. The conclusion states the aim of learning and implementing CSS selectors was achieved.

Uploaded by

sakshi gaikwad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

40 - Ipl - Exp3 - STD Output

The document is a lab report submitted by a student named Pooja R Sharma. It details an experiment aimed to apply different CSS selectors to style webpages. The student created 4 HTML pages with corresponding CSS files to demonstrate use of various selectors like class, id, child etc. Navigation was added across pages using links. Styling was applied to elements like background, text, images and tables. The conclusion states the aim of learning and implementing CSS selectors was achieved.

Uploaded by

sakshi gaikwad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Academic Year: 2022-23 Name of Student: Pooja R Sharma

Semester: V Student ID: 20104090


Class / Branch/ Div: TE- IT B Roll No: 40
Subject: IP Lab Date of Submission: 05-08-2022
Name of Instructor: Prof. Shital Agrawal
Experiment No.:3
Aim: Write a program to apply different CSS selectors to webpage.
Software Used: Visual Studio code
Prerequisites: HTML, CSS

Code & Output:

1. Index.html

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="homes.css">
</head>
<body>
<div class="all">
<div class="up">
<ul>
<li><a href="homes.html">HOME</li></a>
<li><a href="about.html">ABOUT ME</li></a>
<li><a href="acad.html">ACADMICS</li></a>
<li><a href="course.html">COURSES</li></a>
</ul>
</div>
<div class="tex">
<h1>PORTFOLIO</h1>
<h2>POOJA SHARMA</h2>
<img src="images/download.jpeg">
</div>
</div>
</body>
</html>

Department of Information Technology | APSIT


Index.css

.all{

background-image: url("images/port.jpeg"); height: 700px; width: 100%;


background-size: cover;
}
.up {
margin-left: 500px;
}
.up li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
.up li a{
text-decoration: none;
}
.tex{
text-align: center;
margin-top: 100px;
}

Department of Information Technology | APSIT


2. AboutMe.html

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="about.css">
</head>
<body>
<div class="all">
<div class="up">
<ul>
<li><a href="homes.html">HOME</li></a>
<li><a href="about.html">ABOUT ME</li></a>
<li><a href="acad.html">ACADMICS</li></a>
<li><a href="course.html">COURSES</li></a>
</ul>
</div>
<div class="tex">
<h2>ABOUT ME</h2>
<p>
Name: Pooja Sharma<br>
Age: 19<br>
Favourite Actor: KIM SEON HO<br>
<img src="images/download (1).jpeg">
</p>
<h2>MY HOBBIES</h2>
<p>
I love watching anime and k-series<br>
I like to draw sometimes<br>
My Favourite actor is kim Seon-ho whose photo is above<br>
I like listning to songs<br>
Big fan of BTS
</p>
<h2>
CONTACT INFO
</h2>
<p>
EMAIL ID: [email protected]<br>
MOBILE NO: XXXXXXXXXX
</p>
</div>
</div>
</body>
</html>

Department of Information Technology | APSIT


AboutMe.css

.all{

background-image: url("images/about.jpeg"); height: 700px; width: 100%;


background-size: cover;
}
.up {
margin-left: 500px;
}
.up li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
.up li a{
text-decoration: none;
}
.tex{
text-align: center;
margin-top: 100px;
}
.tex img{
width: 150px;
height: 200px;
}
.tex p{
color: rgb(39, 0, 5);
}

Department of Information Technology | APSIT


3. Acadmics.html

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="acad.css">
</head>
<body>
<div class="all">
<div class="up">
<ul>
<li><a href="homes.html">HOME</li></a>
<li><a href="about.html">ABOUT ME</li></a>
<li><a href="acad.html">ACADMICS</li></a>
<li><a href="course.html">COURSES</li></a>
</ul>
</div>
<div class="tex">
<table align="center" style="margin: 0px auto;" border="2">
<tr>
<td>CLASS</td>
<td>PERCENTAGE</td>
</tr>
<tr>
<td>SSC</td>
<td>84%</td>
</tr>
<tr>
<td>HSC</td>
<td>75%</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Acdamics.css

.all{

background-image: url("images/acad.jpeg"); height: 700px; width: 100%;


background-size: cover;

Department of Information Technology | APSIT


}
.up {
margin-left: 500px;
}
.up li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
.up li a{
text-decoration: none;
}
.tex{
text-align: center;
margin-top: 100px;
font-size: 40px;
}

4. Courses.hml

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="couses.css">
</head>
<body>
<div class="all">
<div class="up">
<ul>

Department of Information Technology | APSIT


<li><a href="homes.html">HOME</li></a>
<li><a href="about.html">ABOUT ME</li></a>
<li><a href="acad.html">ACADMICS</li></a>
<li><a href="course.html">COURSES</li></a>
</ul>
</div>
<div class="tex">
<ul>
<h2>I have completed many courses and below are the name of the
courses.</h2>
<br>
APSIT SKILL INTERNSHIP<br>
AICTE CYBERSECURITY VIRTUAL INTERNSHIP<br>
CISCO PYTHON<br>
CISCO C ESSENTIAL<br><br><br><br>
<h2>Currently Doing Courses are:</h2><br>
Some Cisco Courses<br>
AIML Course<br>
</ul>
</div>
</div>
</body>
</html>

Courses.css

.all{

background-image: url("images/cou.jpeg"); height: 700px; width: 100%;


background-size: cover;
}

.up {
margin-left: 500px;
}
.up li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
.up li a{
text-decoration: none;
color: aqua;
}

Department of Information Technology | APSIT


.tex{
text-align: center;
margin-top: 100px;
}
.tex h2{
font-size: 25px;
color: black;
}
.tex ul{
font-size: 20px;
color: rgb(0, 0, 104);
}

Conclusion: In this experiment we have studied and implemented CSS Selectors to style
webpages.

Department of Information Technology | APSIT

You might also like