Cascading Style Sheets 1 Color and Backgrounds

Cascading Style Sheets 2 Color 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 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 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 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 Names Aqua00FFFFMaroon Black000000Navy Blue0000FFPurple Gray808080RedFF0000 Green008000Teal Lime00FF00WhiteFFFFFF

Cascading Style Sheets 7 Working 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 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 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

Cascading Style Sheets 10 Background-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 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 Backgrounds Specifying a background image –Allows addition of a background image to entire web page -or to single element Value: –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 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 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 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 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 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 image Like a printed watermark on web page Example: –Centers background image BODY {background-image: url(grayivy.jpg); background-repeat: repeat-y; background-position: center;}

Cascading Style Sheets 19 Percentage Background Positions Left Top 0% Center Top 50% 0% Right Top 100% 0% Left Center 0% 50% Center 50% Right Center 100% 50% Left Bottom 0% 100% Center Bottom 50% 100% Right Bottom 100% 100%

Cascading Style Sheets 20 Specifying 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 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 Values 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 Summary 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.