Css color and background properties

Unit III: Adding Styles
and Interactivity Using
CSS and Javascript

REVIEW
• The acronym CSS stands for?
• What is the main purpose of the CSS?
• CSS allows you to?
• What is the basic syntax of the CSS?
• What are the three styles of CSS?
• Which style is known as the attribute style?
• Which style is specified within the head tag?
• It is a text file with .css extension.

RED
BLUE
GREEN
YELLOW
ORANGE
VIOLET

BLUE RED
VIOLET YELLOW

GREEN ORANGE

CSS Properties
• To be able to design a Web page
with CSS , one must know the
different properties that can be
applied via CSS. Most of the
properties are very similar to
HTML. All of the properties can
be applied on all CSS style.

CSS Color and Background
Properties

Property Description Example
Sets the foreground
color color of an element body{color: #FCC9814;}
Sets the background body{background-color:
background-color color of an element green;}
Inserts a background body{background-image:
background-image image url (“earth.gif”);}
Specifies how
background image will
repeat itself. It may
repeat horizontally
(repeat-x) vertically
(repeat-y) or (repeat)
or may not be
repeated (no-repeat) body{background-repeat:
background-repeat repeat-x;}

BASIC SYNTAX OF AN CSS INLINE STYLE
<html>
<body style= "background: green; color: white;">
Then type the text
<p style= "background: blue; color: white;">
Then type the text
<p style= "background: red; color: yellow;">
Then type the text
</body>
</html>

BASIC SYNTAX OF CSS INTERNAL STYLE
<html>
<head><title>CSS</title>
<style type= "text/css">
body{background: red url("deped.jpg") repeat-y
center scroll;}
h1{background:yellow url("deped.jpg");}
</style>
<h1>Where</h1>
</body>
</html>

Property Description Example
Sets whether a background image is body{background
Background- locked (fixed) or scrolls (scroll) along -attachment:
attachment with the page fixed;}
Changes the default position (top,
left, corner) of the background
image to any specified location. The
screen coordinates may be
indicated in percentages,
centimeters or using the terms top, Body{background
Background- bottom, center, left or right (eg. -position: right
position 25% 50% 5 cm 10 cm, right center). center;}
Body{background
: green
url(“earth.gif”)
Sets all background properties in repeat-x fixed
background one declaration. right center;}

RULES
1. When setting background properties in one
declaration, semi-colon (;) is only inserted at
the end, before the closing curly bracket.
Ex. body{background: red url(“logo.jpg”)
repeat-y fixed center;}
2. Do not use the color properties, when you
used image as a background.
3. You can not use background-image properties
when using inline style of css.

COMPUQUIZ
1. Write the full CSS code to set the body
foreground to yellow and background to red.
2. Write the full CSS code to set the image
wallpaper_1.jpg as background.
3. Write the full CSS code to repeat the background
vertically.
4. Write the full CSS code to set the image position
to the left.
5. Set the CSS Background Properties from no. 2-4
in one declaration.

PERFORMANCE TEST
• Write the full CSS code to set the body
background to green, foreground to
white using inline style.
• Write the full CSS code to use
“image_7.png as background and set the
ff. values fixed, repeat-y, top right in one
declaration using internal style.

ANSWER
1. body{ color: yellow; background-color: red; }
2. body{ background-image: url
(“wallpaper_1.jpg”);}
3. body{ background-repeat: repeat-y ;}
4. body{ background-position: left ;}
5. Body{background: url (“wallpaper_1.jpg”)
repeat-y left;}

Css color and background properties

More Related Content

Css color and background properties