Cascading Style Sheet

CSS

Prepared By: Mr. Vaibhav

Content
Background
Border Images
Color
shadows

Prepared By: Mr. Vaibhav

CSS Background
The CSS background properties are used to add background
effects for elements.

Different Properties:
 background-color

 background-image

 background-repeat

 background-attachment

 background-position

 background Prepared By: Mr. Vaibhav

CSS background-color
 The background-color property specifies the background color

of an element.
 With CSS, a color is most often specified by:

1. a valid color name - like "red"

2. a HEX value - like "#ff0000"

3. an RGB value - like "rgb(255,0,0)“

Example:

body {

background-color: lightblue;
Prepared By: Mr. Vaibhav
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

Example:
div {
background-color: green;
opacity: 0.3;
}

 When using the opacity property to add transparency to the

background of an element, all of its child elements inherit the same
transparency.
 Prepared By: Mr. Vaibhav
Transparency using RGBA
 If we do not want to apply opacity to child elements use RGBA color values.

 The following example sets the opacity for the background color and not the

text:

div {

background: rgba(0, 128, 0, 0.3) /* Green background with 30%

opacity */

 In addition to RGB, we can use an RGB color value with an alpha channel

(RGBA) - which specifies the opacity for a color.

Prepared By: Mr. Vaibhav
 CSS background-Image
 The background-image property specifies an image to use as the

background of an element.
 By default, the image is repeated so it covers the entire element.

Example:
body {
background-image: url("paper.gif");
}
 The background image can also be set for specific elements, like the

<p> element
Example:
p{ Prepared By: Mr. Vaibhav
CSS background-repeat
 By default, the background-image property repeats an image both

horizontally and vertically.

 Some images should be repeated only horizontally or vertically

 To repeat image only horizontally set the value as:

background-repeat: repeat-x;
 To repeat image only vertically set the value as:

background-repeat: repeat-y;
 Showing the background image only once is also specified

background-repeat: no-repeat;

Prepared By: Mr. Vaibhav

CSS background-position
 The background-position property is used to specify the position of the

background image.

 Example:

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

Prepared By: Mr. Vaibhav

CSS background-attachment
 The background-attachment property specifies whether the background image

should scroll or be fixed

 If it is fixed then it will not scroll with the rest of the page

 Example:

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

}
Prepared By: Mr. Vaibhav
 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.

 When using the shorthand property the order of the property values is:

background-color

background-image

background-repeat

background-attachment

background-position

 It does not matter if one of the property values is missing, as long

Prepared asVaibhav
By: Mr. the
 CSS background shorthand property
body { body {
background-color: #ffffff; background: #ffffff url("img_tree.png") no-
background-image: repeat right top;
url("img_tree.png"); }
background-repeat: no-repeat;

background-position: right top;

Prepared By: Mr. Vaibhav

CSS border-image property
 The border-image property allows you to specify an image to be used

as the border around an element.

 The border-image property is a shorthand property for:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

 Omitted values are set to their default values.

Prepared By: Mr. Vaibhav

 CSS border-image property
 Property Values

Value Description

border-image-source The path to the image to be used as a border

border-image-slice How to slice the border image

border-image-width The width of the border image

border-image-outset The amount by which the border image area extends

beyond the border box

border-image-repeat Whether the border image should be repeated, rounded

or stretched

initial Sets this property to its default value.

Prepared By: Mr. Vaibhav
CSS Colors
Colors are specified using
 predefined color names

 RGB

 HEX

 HSL

 RGBA

 HSLA

Prepared By: Mr. Vaibhav

 RGB Colors
 An RGB color value represents RED, GREEN and BLUE light sources.

 In CSS, a color can be specified as an RGB value, using this formula:

rgb (red, green, blue)

 Each parameter (red, green, and blue) defines the intensity of the color

between 0 and 255.

For example:
 rgb (255, 0, 0) is displayed as red, because red is set to its highest value

(255) and the others are set to 0.

 To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

 To display white, set all color parameters to 255, like this: rgb(255, 255,
Prepared By: Mr. Vaibhav
RGBA values
 RGBA color values are an extension of RGB color values with an

alpha channel - 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 (not transparent at all)

Prepared By: Mr. Vaibhav

HEX Colors
 A hexadecimal color is specified with: #RRGGBB,

 where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the

components of the color.

 In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Here rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and
ff

(same as decimal 0-255).

For example,

 #ff0000 is displayed as red, because red is set to its highest value (ff) and the
Prepared By: Mr. Vaibhav
 HEX Colors
3 Digit HEX value
 Sometimes you will see a 3-digit hex code in the CSS source.

 The 3-digit hex code is a shorthand for some 6-digit hex codes.

 The 3-digit hex code has the following form:

#rgb

Where r, g, and b represents the red, green, and blue components

with values between 0 and f.
 The 3-digit hex code can only be used when both the values (RR, GG,

and BB) are the same for each components.

Prepared By: Mr. Vaibhav
HSL Colors
 HSL stands for hue, saturation, and lightness.

HSL Value

 In CSS, a color can be specified using hue, saturation, and

lightness (HSL) in the form:

hsl(hue, saturation, lightness)

 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is

green, and 240 is blue.

Prepared By: Mr. Vaibhav
 HSL Colors
Saturation
 Saturation can be described as the intensity of a color.

 100% is pure color, no shades of gray

 50% is 50% gray, but you can still see the color.

 0% is completely gray, you can no longer see the color.

Lightness
 The lightness of a color can be described as how much light you want to give

the color,
 where 0% means no light (black),

 50% means 50% light (neither dark nor light)

 100% means full lightness (white)

 Shades of gray are often defined by setting the hue and saturation
PreparedtoBy:
0, and adjust
Mr. Vaibhav
HSL Colors
HSLA Value
 HSLA color values are an extension of HSL color values with an alpha

channel - which specifies the opacity for a color.

 An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0

(not transparent at all):

Prepared By: Mr. Vaibhav