Scribd
Upload
2 views

1

The document provides a code example for designing a web page that demonstrates various stylesheet types. It includes an internal stylesheet for coloring fruits blue and vegetables orange, while an external stylesheet is linked for setting the background color to pink. The structure features nested lists for fruits and vegetables, showcasing the use of id and inline styles.

Uploaded by

09roshankemble.edu
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
2 views

1

The document provides a code example for designing a web page that demonstrates various stylesheet types. It includes an internal stylesheet for coloring fruits blue and vegetables orange, while an external stylesheet is linked for setting the background color to pink. The structure features nested lists for fruits and vegetables, showcasing the use of id and inline styles.

Uploaded by

09roshankemble.edu
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/ 2

Q.

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

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

font color “Orange” using internal stylesheet, set background color for Fruits and Vegetables to

pink using external stylesheet). Hint: use id/class attributes and/or styles for nested tags.

Code:

<!DOCTYPE html>

<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;">Potato</li>

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

</ol>

</li>

</ul>

</body>

</html>

Output:

Q.3) Aim:

You might also like