1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)

CSS Borders You can set following border properties of an element:  The border-color property is used to set the color of the border.  The border-style property is used to set the style of border.  The border-width property is used to set.  The border property is used to set the width, style and color of the border in one declaration.

border-style This is a border with none width. This is a solid border. This is a dashed border. Output: Possible values: none, solid, dashed, double, groove, ridge, inset, outset

border-color p.example1 { border-style: solid; border-bottom-color: #009900; border-top-color: #FF0000; border-left-color: #330000; border-right-color: #0000CC; } This example is showing all borders in different colors. Output: Possible values: any color with valid format

border-color p.example1 { border-style: solid; border-color: #FF0000; } This example is showing all borders in same color. Output: Possible values: any color with valid format

border-width This is a solid border whose width is 4px. Output: Possible values: length in px, pt or cm or it should be thin, medium or thick.

You can individually change the width of the bottom, top, left and right borders of an element. Using the following properties:  border-bottom-width changes the width of bottom border.  border-top-width changes the width of top border.  border-left-width changes the width of left border.  border-right-width changes the width of right border. 7

border-width p.example1 { border-style: solid; border-bottom-width: 6pt; border-top-width: 6pt; border-left-width: 4pt; border-right-width: 4pt; } This example is showing all borders in different widths. Output: Possible values: any color with valid format This example is showing all borders in different widths.

border This example is showing shorthand property for border. Output:

CSS Margins You can set following margin properties of an element:  The margin-bottom property specify the bottom margin of an element.  The margin-top property specify the top margin of an element.  The margin-left property specify the left margin of an element.  The margin-right property specify the right margin of an element.  The margin shorthand property for setting margin properties in one declaration.

margin This is a paragraph with a specified margin from all sides. Output: Possible values: auto, length in px, %.

margin-top This is a paragraph with a specified top margin. Output: Possible values: auto, length in px, %.

margin-bottom This is a paragraph with a specified bottom margin. Output: Possible values: auto, length in px, %.

margin-left This is a paragraph with a specified left margin. Output: Possible values: auto, length in px, %.

margin-right This is a paragraph with a specified right margin. Output: Possible values: auto, length in px, %.

16 Margin property p {margin: 15px; } all four margins will be 15px p {margin: 10px 2%; } top and bottom margin will be 10px, left and right will be 2% of the total width of doc. p {margin: 10px 2% -10px; } top margin will be 10px, left and right margin will be 2%, bottom margin will be -10px p {margin: 10px 2% -10px auto; } top margin will be 10px, right margin will be 2%, bottom margin will be -10px, left margin will be set by the browser

CSS Padding Padding property allows you to specify how much space should appear between the content of an element and its border :  The padding-bottom property specify the bottom padding of an element.  The padding-top property specify the top padding of an element.  The padding-left property specify the left padding of an element.  The padding-right property specify the right padding of an element.  The padding shorthand property serves as the preceding properties.

padding-bottom This is a paragraph with a specified bottom padding. Output: This is a paragraph with a specified bottom padding. Possible values: length in px, %.

padding-top This is a paragraph with a specified top padding. Output: This is a paragraph with a specified top padding. Possible values: length in px, %.

padding-left This is a paragraph with a specified left padding. Output: This is a paragraph with a specified top padding. Possible values: length in px, %.

padding-right This is a paragraph with a specified right padding. Output: This is a paragraph with a specified top padding. Possible values: length in px, %.

padding This is a paragraph with a specified right padding. Output: This is a paragraph with a specified top padding. Possible values: length in px, %.

Padding and Margin Properties Values for both the padding and the margin properties can be expressed using: em (em values) px (pixels) mm (millimeters) cm (centimeters) in (inches) % (percentage of the container element)

24 CSS display property You can control how an element is displayed with the display property. Example: img { display: block; } Possible values: block, inline, list-item, none

25 CSS float property The float property changes how text and or images within an element are displayed. Example: img { float: left; margin-right: 10px; } Possible values: left, right, none

26 Here is some text which wraps around the box floated to the left. Here is some text which wraps around the image floated to the left.

27 CSS clear property The clear property is used to force an element that is adjacent to a float element to start on the next line below the floated element. Example: #box3 { clear: both; background-color: white; border: 1px solid #000; } Possible values: left, right, both, none

28 div id=“box1”div id=“box2” div id=“box3”

29 CSS overflow property You can control what an elements contents will do if it overflows it boundaries with the overflow property. Example: div { overflow: auto; } Possible values: auto, hidden, visible, scroll

30