Scribd
Upload
2 views

Development1

The document provides HTML code for a web page that demonstrates different stylesheet types, including inline, internal, and external styles. It features a nested list displaying fruits in blue and vegetables in red, with specific colors assigned to each item. The page includes basic metadata and a title, along with a heading for the author's name and roll number.

Uploaded by

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

Development1

The document provides HTML code for a web page that demonstrates different stylesheet types, including inline, internal, and external styles. It features a nested list displaying fruits in blue and vegetables in red, with specific colors assigned to each item. The page includes basic metadata and a title, along with a heading for the author's name and roll number.

Uploaded by

09roshankemble.edu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Q.

2) Aim: Design a web page demonstrating all Style sheet types:

Generate a nested list as follows: (Display Fruits and Vegetables in “red” font color using inline

style, Display Mango, Banana and Apple in font color “Blue” and Tomato, Potato and Carrot in

font

Code: l>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Styled List</title>

<link rel="stylesheet" href="styles.css">

<style>

/* Internal stylesheet */

#fruits-list li {

color: blue;

#vegetables-list li {

color: orange;

ul li {

color: red;

</style>

</head>

<body>

<h1>shirish singh</h1>

<h1>roll no.23</h1>

<ul>

<!-- Fruits -->


<li style="list-style-type:square">Fruits

<ol id="fruits-list">

<li style="color: blue;">Mango</li>

<li style="color: blue;">Banana</li>

<li style="color: blue;">Apple</li>

</ol>

</li>

<!-- Vegetables -->

<li style="color: red;">Vegetables

<ol id="vegetables-list">

<li style="color: orange;">Tomato</li>

<li style="color: orange;">Carrot</li>

</ol>

</li>

</ul>

</body>

</html>

Output:

Q.3) Aim:

You might also like