Posted By
Bajarangi soft ,
Posted On 29-09-2020
1. CSS element Selector
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: white;
}
.paral{
background-color: blue;
border: 2px solid red;
}
#para1 p{
color:white;
}
</style>
</head>
<body>
<div class="paral">
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color:red;
}
body{
background-color: #dbbd66;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>How are You!</h2>
<p>How do you do...</p>
</body>
</html>