• Like
Css color and background properties
Upcoming SlideShare
Loading in...5

Css color and background properties

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Unit III: Adding Stylesand Interactivity Using CSS and Javascript
  • 2. 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.
  • 5. 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.
  • 6. CSS Color and Background Properties
  • 7. 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;}
  • 8. 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>
  • 9. 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>
  • 10. Property Description Example Sets whether a background image is body{backgroundBackground- 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{backgroundBackground- 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 fixedbackground one declaration. right center;}
  • 11. RULES1. 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.
  • 12. COMPUQUIZ1. 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.
  • 13. 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.
  • 14. ANSWER1. 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;}