Wednesday, 26. August 2009
The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border.
p {
border-top:
1px solid red}
p {
border-right:
2px solid blue}
p {
border-bottom:
1px solid red}
p {
border-top:
2px solid black}
h1 {border: 1px solid black}
Posted in CSS Box Model by frenchsquared -
Saturday, 15. August 2009
Setting the Box Width
The width of an element is applied to the content area. Other measurements such as padding, border and margins are added to this width.
For example, if an element is specified with width: 200px; the content area is 200px wide. If padding, boder, or margin are applied to the same element, their measurements are added to the overall width.
However, this method does not applie to IE 5 or 6, but who really cares. Anyone using IE 6 needs to upgrade.
Posted in CSS Box Model by frenchsquared -
Saturday, 1. August 2009
Border properties can be converted to the shorthand border property. The <h1> element can be styled with border-width, border-style. and border-color or with a single border property.
Longhand Properties
h1, h2 {
text-align: center;
color: navy;
}
h1 {
border-width: 1px;
border-style: solid;
border-color: gray;
}
h2{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
}
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
}
Shorthand Border
h1, h2 {
text-align: center;
color: navy;
}
h1 {
border: 1px solid gray;
}
h2{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
}
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
}
Posted in Understanding CSS by frenchsquared -
