Scribd
Upload
25 views

Assignment 11 Iwt

The document contains 9 CSS coding assignments: 1. Make all text twice as large and red 2. Add padding, border, and margin to h1 and h2 elements 3. Add a background image that tiles horizontally and remains fixed when scrolling 4. Add a single border around a table and set header height 5. Use images as bullet points in an unordered list 6. Set background colors for list items in ordered and unordered lists 7. Set font sizes of paragraphs using em, px, and percent units 8. Create a table with padding for table cells 9. Add padding and remove borders from a sample data table

Uploaded by

Nancy Kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Assignment 11 Iwt

The document contains 9 CSS coding assignments: 1. Make all text twice as large and red 2. Add padding, border, and margin to h1 and h2 elements 3. Add a background image that tiles horizontally and remains fixed when scrolling 4. Add a single border around a table and set header height 5. Use images as bullet points in an unordered list 6. Set background colors for list items in ordered and unordered lists 7. Set font sizes of paragraphs using em, px, and percent units 8. Create a table with padding for table cells 9. Add padding and remove borders from a sample data table

Uploaded by

Nancy Kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

ASSIGNMENT -11

1. Write a CSS rule that makes all text 2 times larger than the base font of the system

and colours the text red.

<html>
<head>
<title>Document</title>
</head>
<body>

</body>
</html>

OUTPUT:-

2. Write a CSS rules that gives all h1 and h2 elements a padding of 0.5 ems, a dashed

borderstyle and a margin of 0.5 ems.

<html>
<head>
<title>Document</title>
<style>
h1,h2{
margin: 0.5em;
padding: 0.5em;
border: 1px dashed black;
}
</style>
</head>
<body>
<h1>This is heading one</h1>
<h2>This is heading two</h2>
</body>
</html>

OUTPUT:-
3. Write a CSS rule that places a background image halfway down the page, tiling it

horizontally. The image should remain in place when the user scrolls up or down.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
body{
background-attachment: fixed;
background-size: 100% 50%;
background-repeat: no-repeat;

}
</style>
</head>
<body style="background-image: url(Clouds-Meet-The-Sea-AI-Generated-4K-
Wallpaper.jpg)">
</body>
</html>

OUTPUT:-

4. Create a table having a single border around the table, width 100%, height of the

headings as 50px.

<html>
<head>
<title>Document</title>
<style>
table{
border: 1px solid black;
width: 100%;
}
th{
height: 50px;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Sl. No.</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Dibyajyoti</td>
<td>Mohanty</td>
</tr>
<tr>
<td>2</td>
<td>Monkey D.</td>
<td>Luffy</td>
</tr>
<tr>
<td>3</td>
<td>Naruto</td>
<td>Uzumaki</td>
</tr>
</table>
</body>
</html>

OUTPUT:-
5. Design an unordered list with image as list item marker.

<html>
<head>
<title>Document</title>
</head>
<body>
<ul>
<li><img src="https://cuchiwaii.com/cdn/shop/products/image_032fe646-
7d5f-468e-9528-a3b5d0e25b04.heic?v=1678292450" alt="" height="200px"
width="100px">Monkey D. Luffy</li>
<li><img
src="https://i.pinimg.com/736x/5f/27/38/5f273896f33967120ce661010c763192.jpg"
alt="" height="200px" width="100px">Naruto Uzumaki</li>
<li><img
src="https://i.pinimg.com/originals/f2/48/4c/f2484c8ed26ee10ed603bf26c7c86669.
jpg" alt="" height="200px" width="100px">Gojo Satoru</li>
<li><img
src="https://images.tokopedia.net/img/cache/700/VqbcmM/2021/1/27/3e016173-
aac2-4617-ba66-d5eaf995d460.jpg" alt="" height="200px" width="100px">Eren
Yeager</li>
</ul>
</body>
</html>

OUTPUT:-
6. Design an unordered list and an ordered list and set the background color for each list.

<html>
<head>
<title>Document</title>
</head>
<body>
<ul>
<li style="background-color: aqua;"></li>
<li style="background-color: violet;"></li>
<li style="background-color: white;"></li>
<li style="background-color: orangered;"></li>
</ul>
<ol>
<li style="background-color: orange;"></li>
<li style="background-color: BLACK;"></li>
<li style="background-color: green;"></li>
<li style="background-color: yellow;"></li>
</ol>
</body>
</html>

OUTPUT:-

7. Set the size of the font for 3 different paragraphs using em, px and percent

Respectively.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 2em; color: darkred;">It is a long established fact that
a reader will be
distracted by the readable content of a page when looking at its layout. The
point of using Lorem
Ipsum is that it has a more-or-less normal distribution of letters, as opposed
to using 'Content
here, content here', making it look like readable English. Many desktop
publishing packages and
web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions have
evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the like.</p>
<p style="font-size:50px;color:blue;">It is a long established fact that a
reader will be distracted by
the readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here',
making it look like readable English. Many desktop publishing packages and web
page editors now
use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
will uncover many
web sites still in their infancy. Various versions have evolved over the
years, sometimes by
accident, sometimes on purpose (injected humour and the like.
</p>
<p style="font-size:150%;color:red;">It is a long established fact that a
reader will be distracted by
the readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here',
making it look like readable English. Many desktop publishing packages and web
page editors now
use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
will uncover many
web sites still in their infancy. Various versions have evolved over the
years, sometimes by
accident, sometimes on purpose (injected humour and the like.
</p>
</body>
</html>

OUTPUT:-
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 15px;

</style>

</head>

<body>

<center>

<table style="width:100%;">

<tr>

<th>Sl no.</th>

<th>Name</th>

<th>Registration no.</th>

</tr>

<tr>

<td>1</td>
<td>Anuj</td>

<td>1011234</td>

</tr>

<tr>

<td>2</td>

<td>Soma</td>

<td>1011156</td>

</tr>

<tr>

<td>3</td>

<td>Ravi</td>

<td>1011453</td>

<tr>

<td>4</td>

<td>Rishi</td>

<td>1011256</td>

</tr>

</table>

</center>

</body>

</html>

OUTPUT:-

Sl no. Name Registration no.

1 Anuj 1011234

2 Soma 1011156
3 Ravi 1011453

4 Rishi 1011256

9. Design a table specifying the padding for th and td.

Program:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 15px;

</style>

</head>

<body>

<center>

<table style="width:100%;">

<tr>

<th>Sl no.</th>

<th>Name</th>

<th>Registration no.</th>

</tr>

<tr>

<td>1</td>

<td>Anuj</td>

<td>1011234</td>
</tr>

<tr>

<td>2</td>

<td>Soma</td>

<td>1011156</td>

</tr>

<tr>

<td>3</td>

<td>Ravi</td>

<td>1011453</td>

<tr>

<td>4</td>

<td>Rishi</td>

<td>1011256</td>

</tr>

</table>

</center>

</body>

</html>

OUTPUT:-

Sl no. Name Registration no.

1 Anuj 1011234

2 Soma 1011156

3 Ravi 1011453

4 Rishi 1011256
<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 100%;

th, td {

padding: 8px;

text-align: left;

border-bottom: 1px solid #ddd;

</style>

</head>

<body>

<table>

<tr>

<th>Name</th>

<th>State</th>

<th>Country</th>

</tr>

<tr>

<td>Roy</td>

<td>odisha</td>
<td>India</td>

</tr>

<tr>

<td>Santanu</td>

<td>Bihar</td>

<td>India</td>

</tr>

<tr>

<td>Prakash</td>

<td>Kerala</td>

<td>India</td>

</tr>

</table>

</body>

</html>

OUTPUT:-

Name State Country

Roy odisha India

Santanu Bihar India

Prakash Kerala India

You might also like