HTML and CSS Reference
In-Depth Information
You will use the border and padding CSS properties to configure the buttons. Let's
review these properties. The
border
property configures the width (
border-width
),
style (
border-style
), and color (
border-color
) of the border around an element. The
padding
property configures the amount of padding—the blank space between the ele-
ment and its border.
Launch Notepad and type the following XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Pseudo-class Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin: 0 auto;
width: 550px;
text-align: center;
}
#button a { border: 2px inset #CCCCCC;
padding: 3px 15px;
color: #FFFFFF;
background-color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#button a:link { color: #FFFFFF;
}
#button a:visited { color: #CCCCCC;
}
#button a:focus { background-color:#000000;
color: #DDA0DD;
border:2px outset #000000;
}
#button a:hover { color: #66CCFF;
border:2px outset #cccccc;
}
#button a:active { color: #DDA0DD;
border:2px outset #000000;
}
</style>
</head>
Search WWH ::
Custom Search