Colors in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colors in CSS</title>
<style>
/* h1 heading text color is set to blue, using pre-defined colors*/
h1 {
color: blue;
}
/* h2 heading border color is set using rgb() function */
h2 {
border: 4px solid rgb(0%,100%,0%);
}
/* h3 heading text color is set using hsl() function */
h3 {
color: hsl(245, 100%, 40%);
}
/* para1 class selector, background color is set using hexa-code */
.para1 {
background-color: #2244FF; ;
}
/* para2 class selector, border color is set using rgba() function */
.para2 {
border: 3px solid rgba(38, 0, 255, 0.5);
}
/* para3 class selector, background color is set using hsla() function */
.para3 {
background-color: hsla(25, 30%, 30%,0.25);
}
</style>
</head>
<body>
<!--
Colors in CSS are specified using :
predefined color names like blue, red, green etc.
RGB - specified with rgb( ) function.
HEX - specified with #RRGGBB hexadecimal int.
HSL - stands for hue, saturation, & lightness.
RGBA - RGB color values with alpha parameter.
HSLA - HSL color values with alpha parameter.
-->
<h1>Demo: Colors in CSS</h1>
<h2>Lorem ipsum dolor sit.</h2>
<p class="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<h3>Lorem ipsum dolor</h3>
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<h2>Lorem ipsum dolor sit.</h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</body>
</html>