Scribd
Upload
41 views4 pages

Social Responsibility

Uploaded by

Prem Lal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views4 pages

Social Responsibility

Uploaded by

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

Set RGB values

<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0,
0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0,
255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179,
113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130,
238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165,
0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90,
205)</h2>
</body>
</html>

Set HEX values

<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get
different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>

Set HSL values

<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%,
50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240,
100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147,
50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300,
76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39,
100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248,
53%, 58%)</h2>
</body>
</html>
6. CSS Backgrounds

* Set the background color of the page * Set the background color of different elements * Set an image
as thessss aabackground of a page * How to repeat a background image only horizontally * How to position
a background image ss ss* A fixed background image (this image will not scroll with the rest of the page) *
All the background properties in oness sssdeclaration * Advanced background examplesss

Set the background color of a page

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>

Set the background color of different elements

<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color: green;
}
div{
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

Set an image as the background of a page


<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>

How to repeat a background image only horizontally

You might also like