Scribd
Upload
4 views2 pages

5TH Experiment 5.a.program

html

Uploaded by

madhusudhan.pallela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views2 pages

5TH Experiment 5.a.program

html

Uploaded by

madhusudhan.pallela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

5TH EXPERIMENT

5.A. PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color References in CSS</title>
<style>
body {
font-family: Arial, sans-serif;
}
.color-example {
margin: 20px;
padding: 20px;
font-size: 1.2em;
text-align: center;
border-radius: 8px;
color: white;
}
.named-color {
background-color: red; /* Named color */
}
.hex-color {
background-color: #3498db; /* Hexadecimal color */
}
.rgb-color {
background-color: rgb(46, 204, 113); /* RGB color */
}
.rgba-color {
background-color: rgba(241, 196, 15, 0.7); /* RGBA color (with alpha
transparency) */
}
.hsl-color {
background-color: hsl(120, 39%, 49%); /* HSL color */
}
.hsla-color {
background-color: hsla(60, 100%, 50%, 0.5); /* HSLA color (with alpha
transparency) */
}
</style>
</head>
<body>

<h1>Demonstrating Various Ways to Reference Colors in CSS</h1>

<div class="color-example named-color">


Named Color (Red)
</div>

<div class="color-example hex-color">


Hexadecimal Color (#3498db)
</div>

<div class="color-example rgb-color">


RGB Color (rgb(46, 204, 113))
</div>
<div class="color-example rgba-color">
RGBA Color (rgba(241, 196, 15, 0.7))
</div>

<div class="color-example hsl-color">


HSL Color (hsl(120, 39%, 49%))
</div>

<div class="color-example hsla-color">


HSLA Color (hsla(60, 100%, 50%, 0.5))
</div>

</body>
</html>

You might also like