Using Colors and Backgrounds - Enhancing Your Pages’ Look and Feel - Beginning HTML5 & CSS3 For Dummies® (2013)

Beginning HTML5 & CSS3 For Dummies® (2013)

Part V

Enhancing Your Pages’ Look and Feel

16

Using Colors and Backgrounds

In This Chapter

arrow Using color keywords

arrow Reading hex codes

arrow Working with backgrounds

The web would be a pretty drab place without color. Imagine watching your favorite cat videos in grayscale. Life on the web just wouldn’t be nearly as much fun. This book, in fact, wouldn’t be as much fun in black and white, which is the primary reason it’s printed in full color.

Fortunately, we don’t need to live in a gray world. Your computer, laptop, tablet, or smartphone is capable of displaying millions of different colors. CSS is capable of instructing it to display those colors in infinite combinations. In this chapter, we show you the different ways to specify colors in CSS, how to assign colors to elements, and how to work with backgrounds.

Defining Color Values

CSS defines color values in two ways:

check Name: You choose from a limited list.

check Number: Pick the exact amounts of each of the primary colors to create the precise colors that you need.

Color names

The CSS3 Color specification includes 16 basic color names that you can use to define colors in your pages. Figure 16-1 shows these colors. The numbers that start with a pound sign (#) are in hexadecimal notation. Hexadecimal notation is a system of numbering that starts at 00 (which is the same as 0 in the decimal system we're more familiar with) and ends at FF (which is equivalent to 255 in the decimal system).

9781118657201-fg1601.eps

Figure 16-1: Basic Named Color Values in CSS.

You can safely use color names in your CSS markup and be confident that browsers will recognize them and use the correct colors in your web pages. You can also compare the colors onscreen to those on this printed page to see how print and digital displays can sometimes differ. (In some cases, it may be the color balance on your screen that’s off; in others, the color the printer tried to match on the page may not be precisely correct — it’s not as easy as you might think!)

tip_4c.epsVisit www.htmlhelp.com/reference/html40/values.html#color to see how your browser displays these colors. If you can, view this page on two or three different computers to see how a different browser, operating system, graphics card, and monitor can subtly change the display.

The following CSS style declaration says that all text within <p> tags should be blue:

p {color: blue;}

In addition to these 16 basic colors, the CSS3 Color specification defines a much longer list of extended color keywords that are supported by web browsers. This list includes such lovely colors as bisque, burlywood, mintcream, and thistle.

tip_4c.epsVisit www.w3.org/wiki/CSS3/Color/Extended_color_keywords to see the full list of extended color keywords.

Color numbers

Even the list of extended color keywords can be pretty limiting. To allow you to use any color you want, CSS provides additional methods for web page designers to specify their own colors.

Hexadecimal color codes

One way to specify colors in CSS is by using a hex triplet. A hex triplet (often called a hex code for short) is a series of three numbers, written in hexadecimal notation. The first number represents the color red. The second number represents green. The third number represents blue. The amount of each primary color that goes into the mix is determined by the size of the number, with 00 indicating that there should be none of that color, and FF indicating that there should be as much of that color as possible.

For example, the following hex triplet indicates pure blue:

#0000FF

This hex triplet is exactly equivalent to the CSS keyword blue that you met earlier. Hex code can represent many more colors than just the basic ones, however. For example, here's a shade of blue that has more complexity, looks more serious, and is serene, but not sad:

#386F96

Lovely color, isn’t it? A fun party game that we web developers sometimes play after we’ve had too much coffee is “name that color.” The goal of the game is to guess the numeric value for a color just by looking at it. After you’ve been working with web colors for a while, you may find yourself getting pretty good at this game. Try it out with this fairly easy example, shown in Figure 16-2.

9781118657201-fg1602

Figure 16-2: See if you can guess the approximate hex code of this color.

The correct answer is #FF00FF, which is also known as Fuchsia. Fuchsia is the result of combining maximum parts red and blue, with no green.

tip_4c.epsYou can play the HTML color guessing game in the privacy of your own home or office by visiting http://mallory.jemts.com.

If you know a color’s hex code, you have all you need to use that color in your HTML page.

remember_4c.epsWhen you use hex code to define a color, you should always precede it with a pound sign (#). Otherwise, it may not display properly in some web browsers.

The following CSS style declaration makes all text contained by <p> tags blue:

p {color: #0000FF;}

RGB values

If hex codes just confuse you, fear not! You can also use decimal RGB values to define color. These value types aren’t as common as hexadecimal values, but they’re just as effective, and you don’t need to grow six more digits to count them on your fingers:

check rgb(r,g,b): The r, g, and b are integers between 0 and 255 that (respectively) represent the red, green, and blue levels of the color.

check rgb(r%,g%,b%): The r%, g%, and b% represent (respectively) the percentage of red, green, and blue of the color.


Finding any color’s hex code

You can't just wave your magic wand and come up with the hex code for any color, but that doesn't mean that you can't find the hex code through less magical means. Color converters follow a precise formula that changes a color's standard RGB notation into hexadecimal notation. Because you have better things to do with your time than compute hex codes, you have several options for figuring out the code for your color of choice, including web-safe colors shown on this book's online Cheat Sheet (www.dummies.com/cheatsheet/beginninghtml5css3). None of these make you use a calculator:

check On the web: Some good sources for hexadecimal color charts are

www.webmonkey.com/2010/02/color_charts

www.colorschemer.com/online.html

You simply find a color you like and type the hex code listed next to it into your HTML.

check Using image editing software: Many image editing applications, such as Adobe Photoshop or Adobe Fireworks, display the hexadecimal notation for any color. Even the Microsoft Word color picker shows you hex codes for colors in an image. If you have an image you like that you want to use as a color source for your web page, open the image in your favorite editor and find out what the colors’ hex codes are.


technicalstuff_4c.epsEvery color can be defined as a mixture of red, green, and blue (RGB). You can use either an RGB value or the equivalent hex code to describe a color's RGB value to a web browser. For more information about hexadecimal notation, please visit the "Tutorial on Hexadecimal Color" at www.lts.com/class/hextoc.htm.

Defining Color Definitions

You can define individual colors for any text on the web page, as well as define a background color for the entire web page or some portion thereof.

CSS uses the following properties to define colors:

check color defines the font color and is also used to define colors for links in their various states (link, active, focus, visited, and hover; see the upcoming section, "Links").

check background or background-color defines the background color for the entire page or defines the background for a particular element (for example, a background color for all first-level headings, similar to the idea of highlighting something in a Word document).

Text

You can change the color of text on your web page with three steps:

1. Determine the selector.

For example, will the color apply to all first-level headings, to all paragraphs, or to a specific paragraph?

2. Use the color property.

3. Identify the color name or hexadecimal value.

The basic syntax for the style declaration is

selector {color: value;}

Here is a collection of style declarations where we use the color property to assign text color to the body element (and hence, to all other subsidiary HTML elements that can occur in a document body, except where other specifications override that selection as with the h1 element):

body {color: olive; font-family: Verdana, sans-serif;

background-color: #FFFFFF; font-size: 85%;}

hr {text-align: center;}

.navbar {font-size: 75%; text-align: center;}

h1 {color: #808000;}

p.chapternav {text-align: center;}

.footer {font-size: 80%;}

Note that in the preceding CSS rules, the color for all text on the page is defined by using a body selector. Color is applied to all text in the body of the document unless otherwise defined. To illustrate this at work, the first-level heading is defined as forest green, using hexadecimal notation.

Links

HTML links often have different colors based on their current state. By state, we don’t mean Michigan or Texas, but rather the link’s current status with regard to the particular user — whether the current user has visited the link previously, for example.

Normal CSS selectors aren’t capable of styling elements based on their current state, so we need to employ a special type of selector here.

Pseudo classes allow you to define style rules based on information outside the document tree.

technicalstuff_4c.epsThe document tree is a hierarchical representation for all elements in a document, much like a family tree, where every element has a parent and may contain a child. The document tree doesn’t — and can’t — contain information about whether a user has previously visited a certain link (for example). This is what we mean when we say that something is outside the document tree.

The five common pseudo classes that you can use with hyperlinks are

check :link defines formatting for links that haven't been visited.

check :visited defines formatting for links that have been visited.

check :focus defines formatting for links that are selected by the keyboard (for example, by pressing Tab) and are about to be activated by pressing Enter.

check :hover defines formatting for links when the mouse cursor hovers over them.

check :active defines formatting for links when they are selected (clicked by the mouse, or activated by pressing Enter).

remember_4c.epsThe pseudo class name is preceded by a colon (:).

Pseudo classes can be used with

check Elements (such as the <a> element that defines hyperlinks).

check Classes.

check IDs.

For example, to define the style rules for visited and unvisited links, use the following syntax:

check The following sets the color of any hyperlink pointing to an unvisited URL to red by using its hexadecimal value:

a:link {color: #FF0000;}

check The following sets any hyperlink that points to a visited URL to appear in the named color green:

a:visited {color: green;}

check The following designates unvisited links with a class of internal to appear in (named color) yellow (see Chapter 12 for a discussion of CSS classes):

a.internal:link {color: yellow;}

warning_4c.epsLinks can occupy multiple states at one time. For example, a link can be visited and hovered over at the same time. Always define link style rules in the following order: :link, :visited, :visible, :focus, :hover, :active.

tip_4c.epsCSS applies "last rule seen" to display your page. Thus, if you put the pseudo class selectors in the wrong order, your results may not be what you want. For example, if visited follows hover and the two have overlapping rules, hover effects apply only to links that haven't yet been visited.

The following CSS rules render the document with olive, as the color for links that haven’t been visited, and with yellow, as the color of visited links:

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}

a:link {color: olive;}

a:visited {color: yellow;}

tip_4c.epsThe CSS specification defines :link and :visited as mutually exclusive, and it's up to the browser application to determine when to change the state (visited versus unvisited) for any given link. For example, a browser might determine that a link is unvisited if you clear your history data.

Backgrounds

To change the background color for your web page, or for a section of that page, follow these steps:

1. Determine the selector.

For example, will the color apply to the entire background, or will it apply only to a specific section?

2. Use the background-color or background property.

3. Identify the color name or hexadecimal value.

The basic syntax for the style declaration is

selector {background-color: value;}

In the following collection of style declarations, the first style declaration uses the background-color property and sets it to light green by using hexadecimal notation:

body {color: #808000; font-family: Verdana, sans-serif;

background-color: #EAF3DA; font-size: 85%;}

tip_4c.epsYou can apply a background color to a block of text — for example, a paragraph — just like you define a background color for the entire page.

You use background as a shorthand property for all individual background properties, or use background-color to set just the color, like this:

selector {background: value value value;}

For more about shorthand properties, see Chapter 15.

Advanced backgrounds

Lining up multiple elements so that their backgrounds align perfectly and, likewise, mixing and matching multiple backgrounds can be difficult to achieve. It might take many lines of markup to get this job done right, especially working with CSS1 or CSS2. However, with CSS3, you can apply multiple backgrounds to a single element easily, and then use it to provide a backdrop for an element or a group of subsidiary elements. For example, on the backgrounds example page at www.dummieshtml.com/html5cafe/ch16/backgrounds/index.html, we combine three background images and apply them to one <div>.

The relevant CSS3 markup looks like this:

.customBackground {

margin: 0px auto;

width: 400px;

height: 200px;

border-radius: 10px;

background:

url(images/top.gif) top left repeat-x,

url(images/bottom.gif) bottom left repeat-x,

url(images/middle.gif) center repeat;

}

The trick to this markup lies in the background specification, where we reference URLs for images for the three different backgrounds named top.gif, bottom.gif, and middle.gif, respectively. We use the repeat-x attribute to repeat the top and bottom horizontally. Using repeat means that middle.gif is repeated both horizontally and vertically. The top.gif background applies the dark to medium blue shading at the top of the frame, bottom.gif does likewise from the bottom, and middle.gif supplies the dots. The result is the image shown in Figure 16-3.

9781118657201-fg1603

Figure 16-3: Here we artfully repeat three backgrounds to blend dots against two shaded backgrounds.

tip_4c.epsIf you want to explore advanced multiple background techniques in more detail, CSS3.info has some excellent coverage of multiple backgrounds at www.css3.info/preview/multiple-backgrounds.