Now use the same HTML document Named ColorUseWP.html to show RGBA color effect using CSS file. Modify the reference of CSS file in the ColorUseWP.html file from RGBUse.css to RGBAUse.css.
RGBAUse.css:
h1{color:red;
background-color:rgba(153, 134, 117, 0.2);
}
h2{
color:red;
background-color:rgba(153, 134, 117, 0.8);
}
h3{
color:red;
background-color:rgba(153, 134, 117, 1.0);
}
The Text color of h1, h2, and h3 elements is set to the red color, white the background of these elements is set to the brown color with different opacity levels using RGBA specification in the RGBAUse.css file.
The HTML file is ColorUseWP.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="RGBAUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output is:
RGBAUse.css:
h1{color:red;
background-color:rgba(153, 134, 117, 0.2);
}
h2{
color:red;
background-color:rgba(153, 134, 117, 0.8);
}
h3{
color:red;
background-color:rgba(153, 134, 117, 1.0);
}
The Text color of h1, h2, and h3 elements is set to the red color, white the background of these elements is set to the brown color with different opacity levels using RGBA specification in the RGBAUse.css file.
The HTML file is ColorUseWP.html
<!doctype html>
<head>
<title>CSS colors web page</title>
<link rel="stylesheet" type="text/css" href="RGBAUse.css">
</head>
<body>
<h1>Heading Tag first </h1>
<h2>Heading Tag second</h2>
<h3>Heading Tag third </h3>
</body>
</html>
The Output is:
No comments:
Post a Comment