Basic CSS Properties

1. 1
Web Engineering
Lecture 06
Basic CSS Properties
University of Lahore
Nosheen Qamar

2. CSS background Properties
• You can set background of various HTML
elements:
 The background-color property is used to set the
background color of an element.
 The background-image property is used to set the
background image of an element.
 The background-repeat property is used to
control the repetition of an image in the
background.
 The background-position property is used to
control the position of an image in the background.
 The background-attachment property is used to
control the scrolling of an image in the background.

3. 3
background-color
• <p style=“background-color: yellow;” >
This text has a yellow background. </p>
• Output:
• Possible values:
any color in a valid format.

4. 4
background-image
• <table style=“background-image:url(images/css.gif);” >
<tr><td>
this table has background image which repeats
multiple times.
</td></tr>
</table>
• Output:
• Possible values:
any image with valid format

5. 5
background-repeat
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat; ” >
<tr><td>
by default background-repeat property have repeat
value.
</td></tr>
</table>
• Output:
• Possible values:
repeat, repeat-y, repeat-x, no-repeat

6. 6
background-size
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat;
background-size: 200px 200px; ” >
<tr><td>
background-size property is used to expand the
background image.
</td></tr>
</table>
• Output:
• Possible values:
repeat, repeat-y, repeat-x, no-repeat

7. 7
background-position
• <table style=“background-image: url(images/css.gif);
background-position: 100px 200px; ” >
<tr><td>
this table has background image positioned 100 pixels
away from the left and 200 pixels from the top.
</td></tr>
</table>
• Output:
• Possible values:
X% Y%, top left, Xpx Ypx
left
top
center
top
left
bottom
center
bottom
right
bottom

8. 8
background-attachment
• <p style=“background-image:url(images/css.gif);
background-attachment: fixed; ” >
This paragraph has fixed background image.
</p>
• Output:
• Possible values:
fixed, scroll

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

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

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

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

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

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

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

16. border
• <p style=“border: 4px solid red;”>
This example is showing shorthand
property for border.</p>
• Output:

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

18. margin
• <div style=“margin: 20px;”>
This is a paragraph with a specified margin
from all sides.</div>
• Output:
• Possible values:
auto, length in px, %.

19. margin-top
• <div style=“margin-top: 10px;”>
This is a paragraph with a specified top
margin.</div>
• Output:
• Possible values:
auto, length in px, %.

20. margin-bottom
• <div style=“margin-bottom: 10px;”>
This is a paragraph with a specified bottom
margin.</div>
• Output:
• Possible values:
auto, length in px, %.

21. margin-left
• <div style=“margin-left: 10%;”>
This is a paragraph with a specified left
margin.</div>
• Output:
• Possible values:
auto, length in px, %.

22. margin-right
• <div style=“margin-right: 10%;”>
This is a paragraph with a specified right
margin.</div>
• Output:
• Possible values:
auto, length in px, %.

23. 23
Margin property
• <style>
p {margin: 15px; }
all four margins will be 15px
p {margin: 10px 5px; }
top and bottom margin will be 10px, left and right
will be 2% of the total width of doc.
p {margin: 10px 8px 20px 15px; }
top margin will be 10px, right margin will be 2%,
bottom
margin will be -10px, left margin will be set by the
browser
</style>

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

25. 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, %.

26. 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, %.

27. 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, %.

28. 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, %.

29. 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, %.

30. 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)