CSS Background-color

This property is used to set the background color of an element. The background of
an element covers the total size, including the padding and border and excluding
margin. It can be applied to all HTML elements.

Syntax

element {
background-color: color_name|transparent|initial|inherit;
}

o color_name: It is used for defining the background color value or the color
codes. It can be given by using the color name, hexadecimal value, or rgb()
value.
o transparent: It is the default value of this property, which is used to specify the
transparent background-color.

<style>
body {
text-align:center;
background-color: lightblue;
}
h1{
color: blue;
}
</style>

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.

<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
CSS background-attachment property
The background-attachment property is used to specify that the background image is
fixed or scroll with the rest of the page in the browser window.

Syntax

1. background-attachment: scroll | fixed | local | initial | inherit;

The values of this property are defined as follows.

Property Values
scroll: It is the default value that prevents the element from scrolling with the contents,
but scrolls with the page.

fixed: Using this value, the background image doesn't move with the element, even
the element has a scrolling mechanism. It causes the image to be locked in one place,
even the rest of the document scrolls.

local: Using this value, if the element has a scrolling mechanism, the background
image scrolls with the content of the element.

CSS background-size property

The background-size CSS property is used to set the size of a background image of
an element. The background image can be stretched or constrained to fit into the
existing space. It allows us to control the scaling of the background image.

Syntax

background-size: auto | length | cover | contain | initial | inherit;

The values of this property are defined as follows.

Property Values
auto: This is the default value, which displays the background image in its original size.

length: It is used to set the width and height of the background image.

percentage: This value defines the width and height of the background image to the
percentage (%) of the background positioning area. Negative values are not allowed.

cover: This value is used to resize the background image to cover the entire container.
Sometimes, it crops the little bit off one of the edges or stretches the image. It resizes
the image to ensure the element is completely covered.
contain: Without stretching or cropping, it resizes the background image to ensure
the image is completely visible.

#div1{
background-image: url('lion.png');
background-size: auto;
}
#div2{
background-image: url('lion.png');
background-size: 150px 150px;
}
#div3{
background-image: url('lion.png');
background-size: 30%;
}

CSS background-clip
This CSS property specifies the painting area of the background. It limits the area in
which the background color or image appears by applying a clipping box. Anything
outside the box will be discarded and invisible.

Syntax

background-clip: border-box| padding-box| content-box| inherit;

border-box
It is the default value. It means that the background image and color will be drawn
inside the border-box. It sets the background color, which spreads over the entire
division.

padding-box
It sets the background within the border, i.e., the background image and color are
drawn inside the padding-box.

content-box
It sets the background-color up to the content only. The background is painted inside
the content box, i.e., the background image and color will be drawn in the content box.
CSS background-origin property
This CSS property helps us to adjust the background image of the webpage. It specifies
the background position area, i.e., the origin of a background image.

The background-origin property is similar to the background-clip property, but it resizes

the background instead of clipping it. By default, the origin of an element is the top-left
corner of the screen.

Syntax

background-origin: padding-box | border-box | content-box | initial | inherit;

The values of this property are tabulated as follows.

Values Description

padding- It is the default value that positions the background relative to the
box padding-box. The background starts from the top left corner of the
padding edge.

border-box It positions the background relative to the border-box. The

background starts from the top left corner of the border.

content-box It positions the background relative to the content-box. The

background starts from the top left corner of the content.

CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element.
It allows us to specify the cursor type, which will be displayed to the user. When a user
hovers on the link, then by default, the cursor transforms into the hand from a pointer.

CSS resize property

This CSS property allows the user to control the resizing of an element just by clicking
or dragging the bottom right corner of the element

This CSS property is used to define how an element is resizable by the user. It doesn't
apply on the block or inline elements where overflow is set to visible. So, to control
the resizing of an element, we have to set the overflow other
than visible like (overflow: hidden or overflow: scroll).

Syntax

resize: none | horizontal | vertical | both | initial | inherit;

Property values
The property values of this CSS property are defined as follows:

none: It is the default value of this property, which does not allow resizing the element.

horizontal: This value allows the user to resize the element's width. It resizes the
element in a horizontal direction. There is a unidirectional horizontal mechanism for
controlling the width of an element.

vertical: It allows the user to resize the height of an element. It resizes the element in
a vertical direction. There is a unidirectional vertical mechanism for controlling the
height of an element.

both: It allows the user to resize the width and height of an element. It resizes the
element in both horizontal and vertical directions.

CSS background-blend-mode
This CSS property sets the blend mode for each background layer (image/color) of an
element. It defines how the background image of an element blends with the
background color of the element.

Syntax

background-blend-mode: normal | multiply | screen | color-

dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-
light | soft-light | exclusion | hue | color-burn | color;

#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: multiply;

}
CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of a webpage.
The CSS filter property allows us to access the effects such as color or blur, shifting on
the rendering of an element before the element gets displayed.

The syntax of CSS filter property is given below.

Syntax

filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-

rotate() | contrast() | opacity() | grayscale() | sepia() | url();

#img1 {
filter: brightness(130%);
}

#img1 {
filter: blur(2px);
}

#img1 {
filter: invert(60);
}

CSS Display
CSS display is the most important property of CSS which is used to control the layout
of the element. It specifies how the element is displayed.

CSS Display default properties

default value inline

inherited no

animation supporting no

version css1

javascript syntax object.style.display="none"

Syntax
display:value;

CSS display values

There are following CSS display values which are commonly used.

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

CSS Table
There are some CSS properties that are widely used in designing table using CSS:

o border
o border-collapse
o padding
o width
o height
o text-align
 o color
o background-color

CSS Table Border

<style>
table, th, td {
border: 1px solid black;
}
</style>

CSS Table Padding

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

CSS Lists
There are various CSS properties that can be used to control lists. Lists can be classified
as ordered lists and unordered lists. In ordered lists, marking of the list items is with
alphabet and numbers, whereas in unordered lists, the list items are marked using
bullets.

We can style the lists using CSS. CSS list properties allow us to:

o Set the distance between the text and the marker in the list.
o Specify an image for the marker instead of using the number or bullet point.
o Control the marker appearance and shape.
 o Place the marker outside or inside the box that contains the list items.
o Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

o list-style-type: This property is responsible for controlling the appearance and shape
of the marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet
point.
o list-style-position: It specifies the position of the marker.
o list-style: It is the shorthand property of the above properties.