css color and background properties
TRANSCRIPT
![Page 1: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/1.jpg)
Unit III: Adding Styles and Interactivity Using
CSS and JavascriptChapter 11:
USING CASCADING STYLE SHEETSCSS PROPERTIES: CSS Color and
Background Properties
![Page 2: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/2.jpg)
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.
![Page 3: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/3.jpg)
REDBLUEGREENYELLOWORANGEVIOLET
![Page 4: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/4.jpg)
GREEN
BLUE
VIOLET
ORANGE
YELLOW
RED
![Page 5: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/5.jpg)
• 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 Properties
![Page 6: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/6.jpg)
CSS Color and Background Properties
• The color and background properties allow you to define the foreground color and background effects of your web element. These properties include the following:
![Page 7: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/7.jpg)
Property Description Example
color Sets the foreground color of an element body{color: #FCC9814;}
background-colorSets the background color of an element
body{background-color: green;}
background-imageInserts a background
imagebody{background-image:
url (“earth.gif”);}
background-repeat
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: repeat-x;}
![Page 8: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/8.jpg)
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>
![Page 9: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/9.jpg)
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>
![Page 10: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/10.jpg)
Property Description ExampleBackground-attachment
Sets whether a background image is locked (fixed) or scrolls (scroll)
along with the page
body{background-attachment:
fixed;}
Background-position
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, bottom, center, left or right (eg.
25% 50% 5 cm 10 cm, right center).
Body{background-position: right
center;}
backgroundSets all background properties in
one declaration.
Body{background: green
url(“earth.gif”) repeat-x fixed right center;}
![Page 11: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/11.jpg)
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.
![Page 12: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/12.jpg)
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.
![Page 13: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/13.jpg)
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.
![Page 14: Css color and background properties](https://reader035.vdocuments.site/reader035/viewer/2022062704/55583960d8b42ac6078b4a72/html5/thumbnails/14.jpg)
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;}