Scribd
Upload
3 views3 pages

1sem Web-1

Reference notes

Uploaded by

dishitha2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

1sem Web-1

Reference notes

Uploaded by

dishitha2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

5. Create a class called income, and make it a background color of #0ff.

Create a class called expenses, and make it a background color of #f0f.


Create a class called profit, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, or profit,
attach the appropriate class to that piece of text. Further create following
line of text in the same document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Class Selectors Demo</title>
<style>
.income {background-color: #0ff; font-style: italic;}
.expenses {background-color: #f0f;font-style: oblique;}
.profit {background-color: #ff0;font-weight: bold;}
.red{color: red;font-size: 24px;}
.strike{text-decoration: line-through; font-size: 24px;}
p {font-family: Cursive;}
</style>
</head>
<body>
<h1>Class Selectors Demo</h1>
<p>
Income, expenses, and profit are financial terms that are used to measure the
financial health of a person or a business.
</p>
<p class="income">
Income refers to the amount of money received by an individual or business from
various sources such as employment, investments, or sales of goods and services.
Income can be earned on a regular basis, such as a salary, or irregularly, such
as a bonus or one-time payment.
</p>

<p class="expenses">
Expenses, on the other hand, refer to the amount of money spent by an individual
or business to cover their costs of living or operating. Expenses can include
fixed costs such as rent or salaries, variable costs such as the cost of
materials, or discretionary costs such as entertainment or travel.
</p>

<p class="profit">
Profit is the amount of money that remains after deducting expenses from income.
It represents the financial gain or loss that a person or business has generated
over a given period of time. A positive profit means that the income was greater
than the expenses, while a negative profit means that the expenses were greater
than the income.
</p>

<span class="strike">The current price is 50₹ </span><span class="red">and new


price is 40₹</span>

</body>
</html>

6. Change the tag li to have the following properties:

A display status of inline


A medium, double-lined, black border
No list style type
Add the following properties to the style for li:

Margin of 5px
Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to
the left
Also demonstrate list style type with user defined image logos.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tag Properties </title>

<style>
.custom {
display: inline;
border: 2px double black;
list-style-type: none;
margin: 5px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.logo {
list-style-image:
url('https://www.w3schools.com/cssref/sqpurple.gif');
margin: 15px;
}
</style>
</head>

<body>
<h2>li Tag Property modification Demo</h2>
<h3>Current Top FootBall Players</h3>

<ul>
<li class="custom">Lionel Messi</li>
<li class="custom">Kylian Mbappe</li>
<li class="custom">Lewandowski</li>
</ul>
<br>
<h2>list style type with user defined image logos</h2>
<h3>Current Top FootBall Goalkeepers</h3>
<ul class="logo">
<li>Emiliano Martinez</li>
<li>Thibaut Courtois</li>
<li>Yassine Bounou</li>
</ul>

</body>
</html>

7.Create following web page using HTML and CSS with tabular layout

<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<style>
body
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.container {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #F7E7CE;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

table {
width: 100%;
}

th, td {
padding: 10px;

}
th {
text-align: left;
background-color: #f2f2f2;
}

input[type=text], input[type=password], input[type=email] {


width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button[type=submit] {
background-color: #FFA500;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Sign up Today</h1>
<form>
<table>
<tr>
<td><label for="username">Name:</label> <br>
<input type="text" id="username" name="username" required></td>
</tr>

<tr>
<td><label for="email">Email:</label> <br>
<input type="email" id="email" name="email" required></td>
</tr>

<tr>
<td><label for="password">Password:</label> <br>
<input type="password" id="password" name="password" required></td>
</tr>

</table>
</form>
</div>
</body>
</html>

You might also like