Cascading Style Sheets 1 Color and Backgrounds. Cascading Style Sheets 2 Color and Backgrounds Computer color basics Expression of color values using.

Cascading Style Sheets 1

Color and Color and BackgroundsBackgrounds


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


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


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



– 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


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



– 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);}


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


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>


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;}


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;}


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);}


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;}


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;}


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;}


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;}


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


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;}


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%


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;}


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


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


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.

Cascading Style Sheets 1 Color and Backgrounds. Cascading Style Sheets 2 Color and Backgrounds Computer color basics Expression of color values using.

Documents

background color

color rgb

default color

color property

default text color color

specification of color

color depth

cascading style sheets