Upload
jeffery-strickland
View
218
Download
0
Tags:
Embed Size (px)
Citation preview
Cascading Style Sheets 2
Color and BackgroundsColor and Backgrounds• Computer color basics• Expression of color values using color
name, hexadecimal value, and RGB value
• Specifying element content and link colors using the COLOR property
• Specifying the background color, images and background image position using the BACKGROUND properties
Cascading Style Sheets 3
Working With ColorWorking With Color• RGB: Red, green, and blue.
– Intensity ranges (from none to full)
• Color depth.– Amount of data used to create the color.
• 8-bit (256 colors), 16-bit, 24-bit (16 million colors).
• Browser-safe palette (216 colors).– Displays properly on PC & Mac
Cascading Style Sheets 4
Working With ColorWorking With Color• Specifying CSS color values
– CSS allows the specification of color in one of three ways:• Color names• RGB color values• Hexadecimal color values
Cascading Style Sheets 5
Working With ColorWorking With Color• Specifying CSS color values
– Using color names• Sets color values using common color
names– Such as yellow, red, blue, aqua, lime etc.– Limited to small range of colors
• Not detailed enough
Cascading Style Sheets 6
Color NamesColor NamesAqua 00FFFF Maroon 800000
Black 000000 Navy 000080
Blue 0000FF Purple 800080
Gray 808080 Red FF0000
Green 008000 Teal 008080
Lime 00FF00 White FFFFFF
Cascading Style Sheets 7
Working With ColorWorking With Color• Specifying CSS color values
– Using RGB colors• Hex• Decimal• Percentage
• The following rules specify the same color:• P {color: #00FFFF;}• P {color: rgb(0, 100%, 100%);}• P {color: rgb(0, 255, 255);}
Cascading Style Sheets 8
Specifying ColorSpecifying Color
• Specify foreground color of elements on a web page
• Browser dependent • Applies to: all elements
• Can change link colors• Can change default of new, active, and
visited links
Cascading Style Sheets 9
Specifying Default ColorSpecifying Default Color
• Setting the default text color• Color is inherited from parent to child
elements
BODY {color: #006633;}
• Will set color for entire page, since all elements inherit from <BODY>
Cascading Style Sheets 10
Background-colorBackground-color
• Set background color of any element on a web page (including padding area)
• Setting the page background color• Use BODY as the selector• By default, background color of any element
is transparent
– Example:•BODY {background-color: #CCCCCC;}
Cascading Style Sheets 11
Background-color 2Background-color 2
• Creating a text reverse– Example:
• Text color is white and background color is gray
H1 {color: #FFFFFF; Background-color: gray;
Padding: .25em;}
Cascading Style Sheets 12
Working With BackgroundsWorking With Backgrounds
• Specifying a background image– Allows addition of a background image
to entire web page -or to single element• Value: <url>
– Creating a page background • Use the BODY element as the selector• Example:
– Tiles an image across entire background of the web page
– BODY {background-image: url(picture.gif);}
Cascading Style Sheets 13
Working With BackgroundsWorking With Backgrounds
• Specifying a background image– Creating an element background
• Images can be applied to background of any element
• Example:– Applies an image to the background of the h1
element– h1 {background-image: url(bluetext.jpg);
padding: 2em;}
Cascading Style Sheets 14
Repeat BackgroundRepeat Background
• Controls tiling of background images– Value: repeat | repeat-x | repeat-y |
no-repeat | inherit
• Specifying background repeat– Creating a vertical repeat
• Example:– Repeats image vertically– BODY {background-image:
url(bluecurtain.jpg); Background-repeat: repeat-y;}
Cascading Style Sheets 15
Repeat Horizontal BackgroundRepeat Horizontal Background
• Creating a horizontal repeat– Allows creation of a horizontally
repeating background graphic• Example:
– Repeats image vertically– BODY {background-image:
url(bluecurtain.jpg); Background-repeat: repeat-x;}
Cascading Style Sheets 16
Non-Repeating BackgroundNon-Repeating Background
• Non-repeating background image– Allows creation of a single instance of
an image in the background• Example:
– Repeats image vertically– BODY {background-image:
url(bluecurtain.jpg); Background-repeat: no-repeat;}
Cascading Style Sheets 17
Background positionBackground position
• Specifying background position– Controls position of background
images• Length• top | center | bottom• left | center | right• Percentage
– Percentages: refers to the size of the box itself
Cascading Style Sheets 18
Creating centered background Creating centered background imageimage
• Like a printed watermark on web page
• Example:– Centers background imageBODY
{background-image: url(grayivy.jpg); background-repeat: repeat-y; background-position: center;}
Cascading Style Sheets 19
Percentage Background Percentage Background PositionsPositions
Left Top0% 0%
Center Top50% 0%
Right Top100% 0%
Left Center0% 50%
Center50% 50%
Right Center100% 50%
Left Bottom0% 100%
Center Bottom50% 100%
Right Bottom 100% 100%
Cascading Style Sheets 20
Specifying Background PositionSpecifying Background Position
• Positioning Vertical and Horizontal Background Images
• Positions images that repeat on either the horizontal or vertical axis of the web page
• Example:– Positions the vertical repeating background
image along the right side of the browser window
BODY {background-image: url(grayivy.jpg); background-repeat: repeat-y; background-position: right;}
Cascading Style Sheets 21
Background Shorthand Background Shorthand
• Shorthand property allows setting of background properties in a single statement– background-color– background-image– background-repeat– background-attachment– background-position
• Percentage is allowed on background-position
Cascading Style Sheets 22
Background-repeat Property Background-repeat Property ValuesValues
Repeat Default; image repeated across entire background
Repeat-x image repeated across x axis (horizontal)
Repeat-y image repeated across y axis (vertical)
No-repeat image is NOT repeated: only one instance is displayed
Cascading Style Sheets 23
SummarySummary• Color varies greatly on the web.• Different environment display colors differently.• Test colors and use web-safe colors.• Do not use color name but RGB.• Use the COLOR property to set foreground colors for
elements.• Border defaults to element color.• Background colors affect padding areas in the element• Background colors can be applied to both block-level and
inline elements.