Page 102 - DCAP408_WEB_PROGRAMMING

Web Programming

Notes BODY {margin: 1em 2em 3em} /* top=1em, right=2em, bottom=3em, left=2em */
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
H1 {margin-top: 2em}
H1 {margin-right: 12.3%}
H1 {margin-bottom: 3px}

4.4.7 Border Properties

In CSS, the fundamental visual rendering model places all components of the document tree in
physical and virtual rectangular boxes, each having a specific height and width. An element’s rendering
box consists of an element’s content at the center (text, images, etc.) Surrounding the element’s
content (moving outward in rectangular layers/strips) are optional padding, surrounded by any
optional border effects, surrounded in turn by any optional margin values that may be specified.

The border properties allow an author to specify the width, color, and style of the border area
(between any specified padding and margins) of an element’s rendering box. While the capability
to create simple line effects has been available in HTML via tables, the CSS border properties give
authors much more power in creating such effects and allow them to be applied to any element.
Each side of the border dimensions (top, right, bottom and left) can be addressed and controlled,
independently using separate properties, or a convenient shorthand notation may be used that
controls multiple sides at once.

Border Style

The border-style property specifies what kind of border to display.

Notes None of the border properties will have ANY effect unless the border-style property
is set!
Border-style values: There can be following types of border values:
1. none: Defines no border
2. dotted: Defines a dotted border

3. dashed: Defines a dashed border
4. solid: Defines a solid border
5. double: Defines two borders. The width of the two borders are the same as the border-
width value
6. groove: Defines a 3D grooved border. The effect depends on the border-color value
7. ridge: Defines a 3D ridged border. The effect depends on the border-color value
8. inset: Defines a 3D inset border. The effect depends on the border-color value

9. outset: Defines a 3D outset border. The effect depends on the border-color value

96 LOVELY PROFESSIONAL UNIVERSITY