css color and background properties
TRANSCRIPT
Unit III: Adding Styles and Interactivity Using
CSS and JavascriptChapter 11:
USING CASCADING STYLE SHEETSCSS PROPERTIES: CSS Color and
Background Properties
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.
REDBLUEGREENYELLOWORANGEVIOLET
GREEN
BLUE
VIOLET
ORANGE
YELLOW
RED
• 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
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:
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;}
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 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;}
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;}