Lec 08 CSS - III.pptx

(1)

1

CS1113 Web Programming

Lecture 08

Border, Margin, Padding …

(2)

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 .

(3)

border-style

• <p style=“border-style: none”>

This is a border with none width.</p> <p style=“border-style: solid”>

This is a solid border.</p>

This is a dashed border.</p>

• Output:

• Possible values:

(4)

border-color

• <style>

p.example1 {

border-style: solid;

border-bottom-color: #009900;

border-top-color: #FF0000;

border-left-color: #330000;

border-right-color: #0000CC; }

</style>

This example is showing all borders in different colors. </p>

• Output:

(5)

border-color

• <style>

p.example1 {

border-color: #FF0000; }

</style>

This example is showing all borders in same color.

</p>

• Output:

(6)

border-width

• <p style=“border-width: 4px; border-style:

solid;”>

This is a solid border whose width is 4px.</ p>

• Output:

(7)

• 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.

(8)

border-width

• <style>

p.example1 {

border-bottom-width: 6pt;

border-top-width: 6pt;

border-left-width: 4pt;

border-right-width: 4pt; }

</style>

This example is showing all borders in different widths.

</p>

• Output:

any color with valid format

(9)

border

• <p style=“border: 4px solid red;”>

This example is showing shorthand property for border.</p>

(10)

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

(11)

margin

• <div style=“margin: 20px;”>

This is a paragraph with a specified margin from all sides.</div>

• Output:

(12)

margin-top

• <div style=“margin-top: 10px;”>

This is a paragraph with a specified top margin.</div>

• Output:

(13)

margin-bottom

• <div style=“margin-bottom: 10px;”>

This is a paragraph with a specified bottom margin.</div>

• Output:

(14)

margin-left

• <div style=“margin-left: 10%;”>

This is a paragraph with a specified left margin.</div>

• Output:

(15)

margin-right

• <div style=“margin-left: 10%;”>

This is a paragraph with a specified right margin.</div>

• Output:

(16)

16

Margin property

• <style>

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

(17)

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.

(18)

padding-bottom

• <p style=“padding-bottom: 15px; border-width: 1px solid black;”>

This is a paragraph with a specified bottom padding.</p>

• Output:

This is a paragraph with a specified bottom padding.

(19)

padding-top

• <p style=“padding-top: 15px; border-width: 1px solid black;”>

This is a paragraph with a specified top padding.</p>

• Output:

This is a paragraph with a specified top padding.

(20)

padding-left

• <p style=“padding-left: 15px; border-width: 1px solid black;”>

This is a paragraph with a specified left padding.</p>

• Output:

(21)

padding-right

• <p style=“padding-right: 15px; border-width: 1px solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:

(22)

padding

• <p style=“padding: 15px; border-width: 1px solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:

(23)

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)

(24)

24

CSS display property

• You can control how an element is displayed with the display property.

• Example:

img {

display: block; }

(25)

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; }

(26)

26

<div id=“box”>

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

(27)

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; }

(28)

28

div id=“box1” div id=“box2”

(29)

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; }

(30)