Scribd
Upload
804 views4 pages

Practical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. Solution

The document demonstrates the usage of inline, internal, and external CSS stylesheets. For inline CSS, style attributes are directly added to HTML elements. For internal CSS, style rules are defined within the <style> tag in the <head> section. For external CSS, style rules are defined in external .css files and linked via <link> tags. The solutions show how each method styles <h1> and <h2> tags differently based on color and font-family properties.

Uploaded by

Dencey
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
804 views4 pages

Practical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. Solution

The document demonstrates the usage of inline, internal, and external CSS stylesheets. For inline CSS, style attributes are directly added to HTML elements. For internal CSS, style rules are defined within the <style> tag in the <head> section. For external CSS, style rules are defined in external .css files and linked via <link> tags. The solutions show how each method styles <h1> and <h2> tags differently based on color and font-family properties.

Uploaded by

Dencey
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/ 4

Advance Web Programming (3161611) Enrollment No.

: _________________
_________________________________________________________________________________________________

Practical 1: Develop and demonstrate the usage of inline, internal and external style sheet using CSS.

Solution:

(1) Inline CSS

File : InlineCss.html

<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<h1 style="color:red; font-family:Arial;">
Inline CSS-1
</h1>
<h1 style="color:blue; font-family:Time New Roman;">
Inline CSS-2
</h1>
<h2 style="color:green; font-family:Verdana;">
Inline CSS-3
</h2>
</body>
</html>

Output :

___________________________________________________________________________________________________
1
Semester : 6 Batch : B1
Advance Web Programming (3161611) Enrollment No. : _________________
_________________________________________________________________________________________________
(2) Internal CSS

File : InternalCss.html

<html>
<head>
<title> Internal CSS </title>
<style type="text/css">
h1{color:red; font-family:Arial;}
h2{color:blue; font-family:Arial;}
</style>
</head>
<body>
<h1> Internal CSS </h1>
<h2> Internal CSS </h2>
<h1> Internal CSS </h1>
<h1> Internal CSS </h1>
<h2> Internal CSS </h2>
<h2 style="color:green; font-family:Arial;"> Internal CSS </h2>
</body>
</html>

Output :

___________________________________________________________________________________________________
2
Semester : 6 Batch : B1
Advance Web Programming (3161611) Enrollment No. : _________________
_________________________________________________________________________________________________

(3) External CSS


File : ExternalCss.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style-1.css" />
<link rel="stylesheet" type="text/css" href="style-2.css" />
</head>
<body>
<h1> External CSS-1</h1>
<h2> External CSS-2</h2>
</body>
</html>

style-1.css
h1{color:red; font-family:Arial;}}

style-2.css
h2{color:blue; font-family:verdana;}

Output:

___________________________________________________________________________________________________
3
Semester : 6 Batch : B1
Advance Web Programming (3161611) Enrollment No. : _________________
_________________________________________________________________________________________________

___________________________________________________________________________________________________
4
Semester : 6 Batch : B1

You might also like