HTML and CSS Reference
In-Depth Information
Many Ways to Say the Same Thing
The following are all ways to set the same text color for a paragraph
element in your document:
p { color:
#fff
; }
p { color:
#ffffff
; }
p { color:
rgb(255,255,255)
; }
p { color:
rgb(100%,100%,100%)
; }
p { color:
hsl(0,0%,100%)
; }
p { color:
white
; }
The notation you choose to work with can depend on many factors.
Your familiarity with the different color systems, which is the easiest
to transpose from your favorite graphics application uses, or how the
color palette for the site is designed all should impact this decision.
With
hsl()
, it can be easier to write transitions via JavaScript, but
watch for browser support issues since it's also the newest method of
defining color.
CSS3 defines the ability to add a level of transparency to the otherwise
solid color designation. Applying alpha transparency to borders, text
colors, or backgrounds allows the color of the elements behind the
targeted element to bleed through or combine with what is behind it.
Figure 4.1
shows the use of a transparent background color to mute the
distractions created by a background image so that text can be readable.
The transparency in the color applies only to the parts of the element
that color applies to and does not affect the transparency of elements it
may contain or other objects like images. I discuss the
opacity
property,
which applies to the visibility of an entire element, in Chapter 6.
