Upload
antony-morgan-carpenter
View
215
Download
1
Embed Size (px)
Citation preview
1
CS428 Web EngineeringLecture 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• <p style=“border-style: none”>
This is a border with none width.</p>
<p style=“border-style: solid”>
This is a solid border.</p>
<p style=“border-style: dashed”>
This is a dashed border.</p>
• Output:
• Possible values:none, solid, dashed, double, groove, ridge, inset, outset
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>
<p class=“example1”>
This example is showing all borders in different colors.
</p>
• Output:
• Possible values:any color with valid format
border-color• <style>
p.example1 {
border-style: solid;
border-color: #FF0000;
}
</style>
<p class=“example1”>
This example is showing all borders in same color.
</p>
• Output:
• Possible values:any color with valid format
border-width• <p style=“border-width: 4px; border-style:
solid;”>
This is a solid border whose width is 4px.</p>
• Output:
• Possible values:length in px, pt or cm or it should be thin, medium or thick.
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.
border-width• <style>
p.example1 {
border-style: solid;
border-bottom-width: 6pt;
border-top-width: 6pt;
border-left-width: 4pt;
border-right-width: 4pt;
}
</style>
<p class=“example1”>
This example is showing all borders in different widths.
</p>
• Output:
• Possible values:any color with valid format
This example is showing all borders in different widths.
border• <p style=“border: 4px solid red;”>
This example is showing shorthand property for border.</p>
• 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• <div style=“margin: 20px;”>
This is a paragraph with a specified margin from all sides.</div>
• Output:
• Possible values:auto, length in px, %.
margin-top• <div style=“margin-top: 10px;”>
This is a paragraph with a specified top margin.</div>
• Output:
• Possible values:auto, length in px, %.
margin-bottom• <div style=“margin-bottom: 10px;”>
This is a paragraph with a specified bottom margin.</div>
• Output:
• Possible values:auto, length in px, %.
margin-left• <div style=“margin-left: 10%;”>
This is a paragraph with a specified left margin.</div>
• Output:
• Possible values:auto, length in px, %.
margin-right• <div style=“margin-left: 10%;”>
This is a paragraph with a specified right margin.</div>
• Output:
• Possible values:auto, length in px, %.
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
</style>
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• <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.
• Possible values:length in px, %.
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.
• Possible values:length in px, %.
padding-left• <p style=“padding-left: 15px; border-width: 1px
solid black;”>
This is a paragraph with a specified left padding.</p>
• Output:
This is a paragraph with a specified top padding.
• Possible values:length in px, %.
padding-right• <p style=“padding-right: 15px; border-width:
1px solid black;”>
This is a paragraph with a specified right padding.</p>
• Output:
This is a paragraph with a specified top padding.
• Possible values:length in px, %.
padding• <p style=“padding: 15px; border-width: 1px
solid black;”>
This is a paragraph with a specified right padding.</p>
• 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
<div id=“box”>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