<!doctype html>
<html>
<head>
<title> my webpage </title>
<style>
body
{font-family:arial;
background-color:yellow;
}
</style>
</head>
<h1 style="text-align:center;color:blue">
personal information</h1>
<p style="text-align:center">Name-ajay<br>
college-deogiri college
chh.sambhajinagar<br>
year-2024-2025</br>
</p>
</body>
</html>
2). External css
Form 1:-
<DOCTYPE HTML>
<html>
<head>
<title> Web page with external stylesheet</title>
<link rel=" stylesheet" href="style.css")
</head>
<body>
<h1> external style sheet </h1>
<P> external stylesheet is used to link multiple web page <br>
external style sheet one type of css file can be used stylesheet html Webpage
<br> </p>
</body>
</html>
Form 2:-
body {
background-color: pink;
text-align: center;
font-family: algerian
P{
Color: blue
}
3). Element and class selector
<!DOCTYPE html>
<html>
<head>
<title>elements and class selector </title>
<style>
h1{
color:blue;
text-align: center;
}
.center{
text-align: right;
color:green;
}
</style>
</head>
<h1>welcome to my web page</h1>
<p>elements selector is used to select anyone element name </p>
<p class="center">class selector is used to select specific class attrib</p>
</body>
</html>
4). Id and universal selector
<!DOCTYPE html>
<html>
<head>
<title>id and universal selector </title>
<style>
#style{
background-color:skyblue;
text-align:right;
}
*{
text-align:center;
}
</style>
<h1>id selector </h1>
<p id="style"> this selector uses id attribute </p>
<h2>universal selector </h2>
<p>universal selector select all html document </p>
</body>
</html>
5). Attribute and group selector
<!DOCTYPE html>
<html>
<head>
<title>element and group selector</title>
<style>
p[target]
{
background-color: yellow;
text-align:center;
}
h1,h2,p
{
color:blue;
}
</style>
</head>
<body>
<h1>attribute selector </h1>
<p target="ABC">this selector is used to select element with specific attributes </p>
<h2>grouping selector </h2>
<p target="ABC">it select all element to style document </p>
</body>
</html>
6). Pseudo classes
<!DOCTYPE html>
<html>
<head>
<title>pseudo classes</title>
<style>
a:visited {
color:green;
}
a:hover {
color:pink;
}
a:active {
color:blue;
}
</style>
</head>
<body>
<h1>styling to a element using pseudo classes/h1>
<p><a href="https://deogiricollege.org">open link</a></p>
</body>
</html>
7). Box model
<!DOCTYPE html>
<html>
<head>
<title>box model</title>
<style>
*{
width:250px;
border:3px solid blue;
margin:20px;
}
</style>
</head>
<body>
<img src=" ">
</body>
</html>
8). Login form
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM </title>
<style>
body{
background-color:orange;
}
</style>
</head>
<body>
<center>
<h1>Login form</h1>
<form><label>USERNAME:</label>
<input type="text" id="username "><br>
<label>PASSWORD:</label>
<input type ="password " id="password "><br>
<input type="Submit" value="login">
</form>
</center>
</body>
No comments:
New comments are not allowed.