Use the same HTML document, named ColorUseWpHSLA.html to show color effect using CSS code.
CSS file Name: HSLAUse.css
h1{color:red;
background-color:hsla(168, 35%,50%,0.2);
}
h2{
color:red;
background-color:hsla(168, 35%,50%,0.6);
}
h3{
color:red;
background-color:hsla(168, 35%,50%,1.0);
}
The text color of h1, h2, and h3 elements is set to red, while the background of these elements set to aqua green color with different opacity levels using HSLA specifications.
HTML File Name: ColorUseWpHSLA.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="HSLAUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output of HSLA color effects document is:
CSS file Name: HSLAUse.css
h1{color:red;
background-color:hsla(168, 35%,50%,0.2);
}
h2{
color:red;
background-color:hsla(168, 35%,50%,0.6);
}
h3{
color:red;
background-color:hsla(168, 35%,50%,1.0);
}
The text color of h1, h2, and h3 elements is set to red, while the background of these elements set to aqua green color with different opacity levels using HSLA specifications.
HTML File Name: ColorUseWpHSLA.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="HSLAUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output of HSLA color effects document is:
No comments:
Post a Comment