Scribd
Upload
4 views

TechnoCSS2

1st CSS pdf.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

TechnoCSS2

1st CSS pdf.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

TECHNO INDIA UNIVERSITY

WEST BENGAL

CSS
(Cascading Style Sheet)

1
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Background Color:

CSS background property is used to define the background effects on element.


There are 5 CSS background properties that affects the HTML elements:

background-color
background-image
background-repeat
background-attachment
background-position

2
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Background Color:

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

3
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Background Color (with Color-code):


<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello TIU. This is an example of CSS background-color.</p>
</body>
</html>

4
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS background-color

The background-color property specifies the background color of an


element.
<!DOCTYPE html>
<html>
<head>
<style>
body { With CSS, a color is most often
background-color: lightblue; specified by:
}
• a valid color name - like "red"
</style>
• a HEX value - like "#ff0000"
</head>
• an RGB value - like "rgb(255,0,0)"
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html> 5
TECHNO INDIA UNIVERSITY
WEST BENGAL

Other Elements: You can set the background color for any HTML elements: Example:
Here, the <h1>, <p>, and <div> elements will have different background colors:

<!DOCTYPE html> <body>


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

CSS background-image
The background-image property is used to set an image as a background of an
element. By default the image covers the entire element. You can set the
background image for a page like this.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Techno India University</h1>
</body>
</html> 7
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically. The background looks better if
the image repeated horizontally only.
background-repeat: repeat-x; background-repeat: repeat-y;
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
body { body {
background-image: url("gradient-bg.png"); background-image: url("gradient-bg.png");
background-repeat: repeat-x; background-repeat: repeat-y;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Hello Techno India University</h1> <h1>Hello Techno India University</h1>
</body> </body>
</html> </html>

To repeat an image vertically, set


background-repeat: repeat-y;
8
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS background-position: The background-position property is used to


define the initial position of the background image. By default, the background
image is placed on the top-left of the webpage.

You can set the following positions:


– center
– top
– bottom
– left
– right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
9
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS background-position: The background-position property is used to specify the


position of the background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the
text.</p>
</body>
</html>
10
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS background - Shorthand property


To shorten the code, it is also possible to specify all the background properties
in one single property. This is called a shorthand property.
Instead of writing:
When using the shorthand property the
order of the property values is:

1. background-color
2. background-image
3. background-repeat
We can use the shorthand property background: 4. background-attachment
5. background-position

It does not matter if one of the property


values is missing, as long as the other ones
are in this order. Note that we do not use
the background-attachment property in the
examples above, as it does not have a value.
11
TECHNO INDIA UNIVERSITY
WEST BENGAL

Opacity / Transparency: The opacity property specifies the opacity/transparency of


an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:

<!DOCTYPE html> </head> </div>


<html> <body> <div>
<head> <h1>Transparent Boxes</h1> <h1>opacity 1 (default)</h1>
<style> <p>When using the opacity property </div>
div { to add transparency to the </body>
background-color: green; background of an element, all of its </html>
child elements become transparent
} as well. This can make the text inside
div.first { a fully transparent element hard to
opacity: 0.1; read:</p>
} <div class="first">
div.second { <h1>opacity 0.1</h1>
opacity: 0.3; </div>
} <div class="second">
div.third { <h1>opacity 0.3</h1>
opacity: 0.6; </div>
} <div class="third">
</style> <h1>opacity 0.6</h1>

12
TECHNO INDIA UNIVERSITY
WEST BENGAL

Opacity / Transparency (Output):

13
TECHNO INDIA UNIVERSITY
WEST BENGAL

Transparency using RGBA

• If you do not want to apply opacity to child elements, like in the previous
example, use RGBA color values. The following example sets the opacity
for the background color and not the text:

• We know that, we can use RGB as a color value. In addition to RGB, you can
use an RGB color value with an alpha channel (RGBA) - which specifies the
opacity for a color.

• An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0
(fully opaque).
14
TECHNO INDIA UNIVERSITY
WEST BENGAL

Transparency using RGBA }


(Example) </style> <div class="first">
<!DOCTYPE html> </head> <h1>10% opacity</h1>
<html> <body> </div>
<head> <h1>Transparent Boxes 2</h1> <div class="second">
<style> <p>Result with opacity:</p> <h1>30% opacity</h1>
div { <div style="opacity:0.1;"> </div>
background: rgb(0, 128, 0); <h1>10% opacity</h1> <div class="third">
} </div> <h1>60% opacity</h1>
div.first { <div style="opacity:0.3;"> </div>
background: rgba(0, 128, 0, <h1>30% opacity</h1> <div>
0.1); </div> <h1>default</h1>
} <div style="opacity:0.6;"> </div>
div.second { <h1>60% opacity</h1> <p>Notice how the text gets
background: rgba(0, 128, 0, </div> transparent as well as the
0.3); background color when using
<div>
} the opacity property.</p>
<h1>opacity 1</h1>
div.third { </body>
</div>
background: rgba(0, 128, 0, </html> 15
0.6); <p>Result with rgba():</p>
TECHNO INDIA UNIVERSITY
WEST BENGAL

16
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Text Color


<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello TIU</h3>
<p style="color:DodgerBlue;">The Department of Engineering at Techno India
University, West Bengal is a conglomeration of multiple disciplines with separate
departments for Computer Science and Engineering, Electronics and
Communication Engineering, Electrical Engineering, Information Technology, Civil
Engineering, Mechanical Engineering and Chemical Engineering.</p>
<p style="color:MediumSeaGreen;">Students can actively involve themselves in
workshops, seminars and interdisciplinary research. They also enjoy an array of
facilities like Internships, industrial training and placement which speaks volumes
about Techno India University's dedication towards its long term vision: building
a better tomorrow.</p>
</body>
</html>
17
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border Color:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello TIU</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello CSE</h1>

<h1 style="border: 2px solid Violet;">Hello BCS3B</h1>

</body>
</html>

18
TECHNO INDIA UNIVERSITY
WEST BENGAL

All CSS Background Properties

Property Description
background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the rest
of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are positioned

background-position Sets the starting position of a background image


background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

19
TECHNO INDIA UNIVERSITY
WEST BENGAL

Thank You

20

You might also like