HTML and CSS Reference
In-Depth Information
browser in which you've decided to create your web page (I use
-webkit-
for Google Chrome), and in Chapter
15, you use a tool that adds the other vendor prefixes to your CSS automatically.
When a property should be used with vendor prefixes, I'll let you know. However, as the web is constantly evolving,
if you'd like to be certain of whether a property still requires a vendor prefix or not, I recommend visiting a website
called When can I use... (
www.caniuse.com
). Not only will When can I use... tell you which properties are sup-
ported in which browsers, it'll also show whether you need to use vendor prefixes for that property.
At the time of writing, browser vendors are making a push toward removing vendor prefixes from the more estab-
lished CSS3 properties and as time goes on, fewer vendor prefixes will be required, until they eventually become
obsolete.
Using vendor-prefixed properties when they are no longer necessary won't cause any problems and it is better
safe than sorry. A browser will simply skip over a vendor-prefixed property that it may no longer support and in-
stead use the official property. So, providing you place the official property below the vendor-prefixed ones, your
CSS will remain future proof.
Borders
Borders are graphical elements that are applied around the edge of an element.
border-color
Initial value: the value of
color
| Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
As you would expect,
border-color
specifies the color of a border and can be given a variety of values, such as
RGB, RGBA, HSL, HSLA, and color keywords.
1.
In styles.css, find the
#main
rule set and add the following declaration:
border-color: #ccc;
2.
Save styles.css.
This gives the border around the main content container
<div id=”main” class=”group”>
a gray border
color.
However
, for borders to work, you need to specify a
border-style
and
border-width
along with the
border-color
property. Because the initial value of
border-style
is
none
, you cannot see the border yet.
In the CSS2.1 specification, the initial value for
border-color
is the same as that of the
color
property. So if a
border-color
isn't specified and the
color
is red, then the
border-color
will be red too. In CSS3, the ini-
tial value is the keyword
currentColor
, which achieves exactly the same—the
border-color
will be the
same as the
color
. The introduction of this keyword is just to allow you to specifically show you want the
border-color
to be the same as the
color
. If you were working in a team with multiple people working on the
same stylesheet for example, the following clearly shows you intend to have the
border-color
be the same as
the
color
, whereas without the
border-color
declaration, it may look like you forgot to add that style:
