Scribd
Upload
4 views3 pages

CSSLabPracticalWork 238726

The document provides examples of three types of CSS: Inline, Internal, and External. Each section includes HTML code demonstrating how to style a simple profile card with a picture, name, and title using different CSS methods. The examples illustrate the structure and styling applied through each CSS approach.

Uploaded by

s79057378
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

CSSLabPracticalWork 238726

The document provides examples of three types of CSS: Inline, Internal, and External. Each section includes HTML code demonstrating how to style a simple profile card with a picture, name, and title using different CSS methods. The examples illustrate the structure and styling applied through each CSS approach.

Uploaded by

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

CSS - LAB PRACTICAL WORK

1. Inline CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
</head>
<body>
<div style="border: 2px solid black; width: 250px; padding: 10px;
text-align: center;">
<img src="C:\Users\Samrat Thapa\OneDrive\Desktop\Web
Programming\CSS\Man.jpg" alt="Profile Picture"
style="width: 100px; border-radius: 50%;">
<h2 style="color: blue;">Samrat Thapa</h2>
<p style="font-size: 14px; color: gray;">Web Developer</p>
</div>
</body>
</html>

2. Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightgray;
text-align: center;
}
.container {
border: 2px solid black;
width: 250px;
margin: 50px auto;
padding: 10px;
background-color: white;
}
img {
width: 100px;
border-radius: 50%;
}
h2 {
color: blue;
}
p {
color: gray;
}
</style>
</head>
<body>
<div class="container">
<img src="C:\Users\Samrat Thapa\OneDrive\Desktop\Web
Programming\CSS\Man.jpg" alt="Profile Picture">
<h2>Samrat Thapa</h2>
<p>Web Developer</p>
</div>
</body>
</html>

3. External CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<div class="container">
<img src="C:\Users\Samrat Thapa\OneDrive\Desktop\Web
Programming\CSS\Man.jpg" alt="Profile Picture">
<h2>Samrat Thapa</h2>
<p>Web Developer</p>
</div>
</body>
</html>
External.css

body {
font-family: Arial, sans-serif;
background-color: light gray;
text-align: center;
}
.container {
border: 2px solid black;
width: 250px;
margin: 50px auto;
padding: 10px;
background-color: white;
}
img {
width: 100px;
border-radius: 50%;
}
h2 {
color: blue;
}
p {
color: gray;
}

You might also like