Scribd
Upload
2 views

Lab File Format

Uploaded by

bharadwajaastik987
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Lab File Format

Uploaded by

bharadwajaastik987
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Student Name Unnati Bhardwaj

Admission Number 22SCSE1010511


Roll Number 22131010591
Programme B.Tech CSE
Course Name Web Technology
Course Code R1UC626C

Experiment No: 3
Experiment Title Implement CSS using all the ways of HTML
Aim: Create a web page to display CSS using HTML

Procedure:

 Step 1: Create an HTML file (index.html).

 Step 2: Apply Inline CSS inside an HTML tag.

 Step 3: Add Internal CSS in the <style> tag inside the <head>.

 Step 4: Create a separate CSS file (styles.css) and link it in the HTML file for
External CSS.

 Step 5: Run the HTML file in a web browser and observe the output.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Implementation Example</title>
</head>
<body>
<!-- Inline CSS -->
<h1 style="color: red; font-size: 28px;">Welcome to My Website</h1>
<p style="color: purple; font-size: 18px;">This is an example of inline CSS.</p>
</body>
</html>
<!—for inline-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Implementation Example</title>
</head>
<body>
<!-- Inline CSS -->
<h1 style="color: red; font-size: 28px;">Welcome to My Website</h1>
<p style="color: purple; font-size: 18px;">This is an example of inline CSS.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
p{
color: green;
font-size: 22px;
}

Result:

Conclusion:

We successfully implemented CSS using all three methods in an HTML document. External
CSS is preferred for large projects, while internal and inline CSS are useful for specific cases.

You might also like