HTML and CSS Reference
Project files update (ch05-02): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Initial value: 1 | Inherited: No | Applies to: All | CSS3
Browser support: IE 9+, Firefox 1+, Chrome 1+, Opera 9+, Safari 1.2+
opacity , introduced in CSS Level 3, gives elements a level of transparency.
The value for opacity is a number, ranging between 0 and 1, to one decimal place. In the preceding example, the
opacity of an element is 50%.
Unlike when you use a background color with an alpha value (which is a color with a transparency), opacity applies
to the element and all its children. So say you use the following:
Here, the entire web page has a 70% transparency, which isn't very sensible!
The opacity property works in all modern browsers except for Internet Explorer versions 6, 7, and 8. However, as
with gradients, these older versions of Internet Explorer support a filter property that achieves the same effect.
For more information about the unofficial filter property, please see msdn.microsoft.com/en-us/lib-
In Chapter 15, you learn how to use a tool to automatically write vendor prefixes you haven't included during the
creation of the Cool Shoes & Socks website. It also adds the alternative filter properties to make any instance of
opacity work in older versions of Internet Explorer.
Initial value: visible | Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
Using opacity: 0 to hide an element works visually, but it's not necessarily the best way to hide an element. The
visibility property can be given three values: visible , hidden and collapse . All elements, by default,
are visible . visibility: hidden hides an element, but how does that differ from opacity: 0 , which
also hides elements?
Assume for a moment that you want to hide the “About” link on the Cool Shoes & Socks web page. When hiding the
link, you use opacity , like so: