Use the same simple HTML document, named ColorUseWp.html, to show HSL color effects using CSS code.
CSS file Name:HSLUse.css
h1{color:red;
background-color:hsl(200, 100%, 50%);
}
h2{
color:red;
background-color:hsl(200, 50%, 50%);
}
h3{
color:red;
background-color:hsl(200, 25%, 50%);
}
Here the text color of h1, h2, and h3 elements is set to red, while the background of these elements is set to different shades of the blue color using HSL specification.
HTML File Name:ColorUseWp.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="HSLUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output of HSL color effect Document:
CSS file Name:HSLUse.css
h1{color:red;
background-color:hsl(200, 100%, 50%);
}
h2{
color:red;
background-color:hsl(200, 50%, 50%);
}
h3{
color:red;
background-color:hsl(200, 25%, 50%);
}
Here the text color of h1, h2, and h3 elements is set to red, while the background of these elements is set to different shades of the blue color using HSL specification.
HTML File Name:ColorUseWp.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="HSLUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output of HSL color effect Document:
No comments:
Post a Comment