Colors and Backgrounds

Colors and Backgrounds CSS The Definitive Guide Chapter 9

Color • As has been stressed in CIS 131 or your initial learning of HTML5 “Planning” is important! • It is even more true when working with colors. • Things to think about when thinking about colors: • If you use too many colors will it overwhelm the user? • If you change the default hyperlinks colors, will it confuse the user? • Will color scheme make it difficult for the user to read?

Color • Used properly color can really strengthen the presentation of a document.

The primarycolorsare RED, YELLOW, and BLUE. These colors, in traditional color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these colors. When many people first start building their Web pages, they create pages in colors that they like. If you're lucky or have a good eye, you'll end up with colors that look nice together. But it's very easy to set up a color scheme that clashes and is difficult for your readers to view for long periods or at all.

Secondarycolorsare ORANGE, GREEN, and PURPLE. These colors are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple).

Tertiary colorsare YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors.

Understanding color theory will help you to understand how color works on Web pages. And one of the first places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.

Complementarycolors are those colors that are opposite one another on the color wheel. By using colors that are opposite one another, you create color schemes that have high contrast and so are brighter and more vivid. Some contrasting colors are: red and green or blue and orange.

Foreground Colors vs. Background Colors On display screens, the foreground consists of the characters and pictures that appear on the screen. The background is the uniform canvas behind the characters and pictures. Lets try the “Test Page”

Color symbolism by culture If you use color on your Web site, then you should be aware of how your audience views those colors. This is especially important if you are designing a site that is intended for an audience of a different culture than your own (or a global audience). The cultural basis for color symbolism can be very powerful, and if you don't understand what you're saying with your colors, you can make big mistakes.

RED • China: Good luck, celebration, summoning • •Cherokees: Success, triumph • •India: Purity • •SouthAfrica: Color of mourning • •Russia: Bolsheviks and Communism • •Eastern: Worn by brides • •Western: Excitement, danger, love, passion, stop, Christmas (with green

Orange •Ireland: Religious (Protestants) •Western: Halloween (with black), creativity, autumn Yellow •China: Nourishing •Egypt: Color of mourning •Japan: Courage •India: Merchants •Western: Hope, hazards, coward

Foreground color • There are two ways to directly affect the foreground color of an element: by using the color property and by setting the border colors using one of a number of properties. • Example of coding: <p style=“color: gray;”> p.warn {color: red; } (using a class of warn to each warning paragraph and making it red.

Replacing Attributes • There are many uses for color, the most basic of which is to replace the HTML 2.2 body attributes text, link, alink and vlink. HTML that uses bodyattributes. <body text=“black” link=“#808080” alink=“silver” vlink=“#333333”> CSS that replaces above html code. Body {color: black;} A:link {color: #808080;} A:active {color: silver;} A:visted {color: #333333;}

Borders Changing the color of a border around an image: by using color or border-color img.type1 {color: gray; border-style: solid;} or Img.type2 {border-color: gray; border-style: solid;}

Affecting Form Elements • Example of coding for form elements: Select {color: rgb(33%, 33% 33%);} Input {color: gray;}

Background The background area of an element consists of all of the space behind the foreground to the outer edge of the borders or the content box and the padding are all part of the element’s background and the borders are drawn on top of the background.

Background-color • Declaring a color for the background of an elements use background-color. P {background-color: gray; padding: 10px;} Adding padding of 10px will let the color extend a little bit from the text.

Background-color • Background color can be set for just about any element • Background-color is not inherited • Default value is transparent

Style Sheet example body {color: black; background-color: white;} h1,h2 {color: yellow; background-color: rgb90,51,0);} p {color: #555;} a:link {color: black; background-color: silver;} a:visted {color: gray; background-color: white;} Try some of your own!

Background Images… Coding for having an image in the background. This coding will also tile the image onto the page. Body {background-image; url(bg23.gif);}

Repeats with Direction • Please look at page 261 thru 266 Background positioning: Background-repeat: repeat-y Will put the image vertically along the y axis Background-repeat: repeat-x Will put the image along the x axis

Repeats with direction • Don’t want to repeat the background image at all. Use the value no-repeat Background-repeat: no-repeat; 1) Open up your web site and find a small image where you could place an image vertically or horizontally. 2) Now place a bigger image somewhere in your pages using no-repeat.

Background positioning • It is possible to change the image’s position in the background such as centering an image or placing it on the bottom or top or right etc. • Go to your web site again and add the code to place an image in the center. (see page 264-267 for reference)

Background-attachment Using the property background-attachment, you can declare the origin image to be fixed with respect to the viewing area and therefore immune to the effects of scrolling. background-attachment: fixed; In a web browser the viewing area can change as the user resizes the browser’s window. This causes the background’s origin image to shift position as the window changes sizes. Look at examples on page 276 – 277.

When a background image has been fixed, it is positioned with respect to the viewingarea, not the element that contains it.

Tonight's lab April 16, 2013 • Please apply a background color to at least one paragraph somewhere on your site that makes sense. • Please apply a background image to an inline element in a paragraph of your choice. • Please incorporate an image of your choice on a page of your web site to the page background. (this must be a different/or an additional image from what was previously done in class) • Please provide comment codes that include today’s date and what you have included.

Colors and Backgrounds