) ) ) ) ) ) ) ) )

) ) ) ) ) ) ) ) )
LESSON 3 - GROUP 1

Colors and
Background
 ) ) ) ) ) ) ) ) ) Intro
) ) ) ) ) ) ) ) )

WHAT IS CSS?

• Cascading Style Sheet (CSS)

Is a style sheet languange used for
manipulating the style or design of a markup
languange like HTML.

Used to manage the visual presentation or

visual design of a website.
 ) ) ) ) ) ) ) ) ) Intro
) ) ) ) ) ) ) ) )

OVERVIEWW!!

• CSS color names

• RGB and HSL color values
• Foreground and background colors
• Tiling background images
• More selectors and external style
sheets.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
OUTPUT
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
RGB VALUE
• With CSS, we can specify
a color by indicating a
number from 0-250. Its
syntax is rgb(0,0,0). If you
indicate 0 for the values of
red, green, and blue, the
resulting color will be
black
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
HEX VALUE

• HEX Is a short term for

hexadecimal and is identified by
CSS using the formula #000000;
with values ranging from 00 to
FF. Its color combination is also
based on RGB values.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
OUTPUT
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
USING A COLOR PICKER
This tool makes it easy
to create, adjust,
and experiment with custom colors
for the web.
Use color picker to select a color
visually
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
CHOOSING A COLOR USING
CSS
Color plays a big part to achieve a fluid design. when
choosinga color for certain elements on the website,
remember that it must not be irritating to the eyes.
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
BACKGROUND IMAGES
You can set an image as a
background with CSS. This is
almost the same as inserting a
background color.
It sets 1 or more background
images for an element.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) ) CSS BACKGROUND
) ) ) ) ) ) ) ) )

POSITIONS
You can set the background
image to repeat horizontally or
vertically by using repeat-x or
repeat-y properties for horizontal
and vertical alignments,
respectively. It sets the starting
position of a background image.
EXAMPLE
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) ) NO REPETITION
) ) ) ) ) ) ) ) )

You can use no repetition if you want to stop a

background image appearing again in the next web
page, you can use : no-repeat” property for the
background.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) ) REPETITION WITH SET
) ) ) ) ) ) ) ) )

POSITION

You can also use the no-repeat property while

setting the position of the background so that it does
not clash or contrast with the text on the foreground.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) ) UNMOVABLE BACKGROUND
) ) ) ) ) ) ) ) )

• You can also set your background as fixed, so that

when you scroll up or down your web page, the
background remains immovable.

• To keep your background fixed, scroll, or local in

CSS we can also use background-attachment
property.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) ) SHORTENING BACKGROUND
) ) ) ) ) ) ) ) )

PROPERTY SYNTAX
 ) ) ) ) ) ) ) ) ) SHORTENING BACKGROUND
) ) ) ) ) ) ) ) )

PROPERTY SYNTAX
When using a shortened property syntax for the
background, remember to follow property sequence. The
property sequence are background-color, background-
image, background repeat, background- attachment,
background positions, and background.
) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )
 ) ) ) ) ) ) ) ) )
) ) ) ) ) ) ) ) )

Thank You
By- Grp 1