+ UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA

FACULTY OF TELECOMMUNICATION AND INFORMATION

ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Introduction to CSS

(Border, Margin, Lists, Padding)

Lab Manual 04

Dated:
th
3rd October, 2022 to 7 October, 2022

Semester:
Autumn 2022

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
Border

The border properties allow you to specify how the border of the box
representing an element should look. There are three properties of a border you
can change:
 The border-color specifies the color of a border.

 The border-style specifies whether a border should be solid, dashed line,

double line, or one of the other possible values.
 The border-width specifies the width of a border.

Now, we will see how to use these properties with examples.

The border-color Property

The border-color property allows you to change the color of the border
surrounding an element. You can individually change the color of the bottom,
left, top and right sides of an element's border using the properties:

 border-bottom-color changes the color of bottom border.

 border-top-color changes the color of top border.

 border-left-color changes the color of left border.

 border-right-color changes the color of right border.

The following example shows the effect of all these properties:

<style type="text/css">
p.example1{

border:1px solid; border-bottom-

color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 border-color:#009900; /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different
colors. </p>
<p class="example2">
This example is showing all borders in green color
only. </p>

It will produce the following result:

The border-style Property

The border-style property allows you to select one of the following styles of
border:

 none: No border. (Equivalent of border-width:0;)

 solid: Border is a single solid line.

 dotted: Border is a series of dots.

 dashed: Border is a series of short lines.

 double: Border is two solid lines.

 groove: Border looks as though it is carved into the page.

 ridge: Border looks the opposite of groove.

 inset: Border makes the box look like it is embedded in the page.

 outset: Border makes the box look like it is coming out of the canvas.

 hidden: Same as none, except in terms of border-conflict resolution for

table elements.

You can individually change the style of the bottom, left, top, and right borders
of an element using the following properties:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
  border-bottom-style changes the style of bottom border.

 border-top-style changes the style of top border.

 border-left-style changes the style of left border.

 border-right-style changes the style of right border.

The following example shows all these border styles:

<p style="border-width:4px; border-style:none;">

This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.

</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 This is a hidden border.
</p>
<p style="border-width:4px; border-top-
style:solid; border-bottom-
style:dashed; border-left-
style:groove; border-right-
style:double;">

This is a a border with four different styles.

</p>

It will produce the following result:

The border-width Property

The border-width property allows you to set the width of an element borders.
The value of this property could be either a length in px, pt, or cm, or it should
be set to 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.

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
  border-left-width changes the width of left border.

 border-right-width changes the width of right

border. The following example shows all these border width:

<p style="border-width:4px; border-style:solid;">

This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style="border-bottom-width:4px;
border-top-width:10px;
border-left-width: 2px;
border-right-width:15px;
border-style:solid;">

This is a a border with four different width.

</p>

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
It will produce the following result:

Border Properties Using Shorthand

The border property allows you to specify color, style, and width of lines in one
property:

The following example shows how to use all the three properties into a single
property. This is the most frequently used property to set border around any
element.

<p style="border:4px solid red;">

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

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 Margin

The margin property defines the space around an HTML

element. It is possible to use negative values to overlap
content.

The values of the margin property are not inherited by the

child elements. Remember that the adjacent vertical margins
(top and bottom margins) will collapse into each other so
that the distance between the blocks is not the sum of the
margins, but only the greater of the two margins or the same
size as one margin if both are equal.

We have the following properties to set an element margin.

 The margin specifies a shorthand property for setting

the margin properties in one declaration.

 The margin-bottom specifies the bottom margin of

an element.

 The margin-top specifies the top margin of an

element.

 The margin-left specifies the left margin of an

element.

 The margin-right specifies the right margin of an

element.
Now, we will see how to use these properties with examples.

The Margin Property

The margin property allows you to set all of the properties for
the four margins in one declaration. Here is the syntax to set
margin around a paragraph:

<style type="text/css">
p {margin: 15px}
all four margins will be 15px

p {margin: 10px 2%}

top and bottom margin will be 10px, left and right
margin will be 2% of the total width of the document.

MAD Lab
Instructor:-Adnan Mustafa
Session:-2019 Computer
 p {margin: 10px 2% -10px}
top margin will be 10px, left and right margin will be 2% of the total
width of the document, bottom margin will be -10px

p {margin: 10px 2% -10px auto}

top margin will be 10px, right margin will be 2% of the total width of
the document, bottom margin will be -10px, left margin will be set by
the browser
</style>

Here is an example:

<p style="margin: 15px; border:1px solid black;">

all four margins will be 15px
</p>

<p style="margin:10px 2%; border:1px solid black;">

top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>

<p style="margin: 10px 2% -10px; border:1px solid black;">

top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>

<p style="margin: 10px 2% -10px auto; border:1px solid black;">

top margin will be 10px, right margin will be 2% of the total width
of the document, bottom margin will be -10px, left margin will be set
by the browser
</p>

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
It will produce the following result:

The margin-bottom Property

The margin-bottom property allows you to set the bottom margin of an element.
It can have a value in length, %, or auto.

Here is an example:

<p style="margin-bottom: 15px; border:1px solid black;">

This is a paragraph with a specified bottom margin
</p>
<p style="margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in
percent </p>

It will produce the following result:

The margin-top Property

The margin-top property allows you to set the top margin of an element. It can
have a value in length, %, or auto.

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
Here is an example:

<p style="margin-top: 15px; border:1px solid black;">

This is a paragraph with a specified top margin
</p>
<p style="margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>

It will produce the following result:

The margin-left Property

The margin-left property allows you to set the left margin of an element. It can
have a value in length, %, or auto.
Here is an example:

<p style="margin-left: 15px; border:1px solid black;">

This is a paragraph with a specified left margin
</p>
<p style="margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
The margin-right Property
The margin-right property allows you to set the right margin of an element. It
can have a value in length, %, or auto.

Here is an example:

<p style="margin-right: 15px; border:1px solid black;">

This is a paragraph with a specified right margin
</p>
<p style="margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 Lists
Lists are very helpful in conveying a set of either
numbered or bulleted points. This chapter teaches you
how to control list type, position, style, etc., using CSS.

We have the following five CSS properties, which can

be used to control lists:

 The list-style-type allows you to control the

shape or appearance of the marker.

 The list-style-position specifies whether a long

point that wraps to a second line should align
with the first line or start underneath the start of
the marker.

 The list-style-image specifies an image for the

marker rather than a bullet point or number.

 The list-style serves as shorthand for the

preceding properties.

 The marker-offset specifies the distance

between a marker and the text in the list.
Now we will see how to use these properties with
examples.

The list-style-type Property

The list-style-type property allows you to control the
shape or style of a bullet point (also known as a
marker) in case of unordered lists and the style of
numbering characters in ordered lists.
Here are the values, which can be used for an
unordered list:

Value Description

None NA

disc (default) A filled-in circle

Circle An empty circle

MAD
Lab Instructor:-Adnan Mustafa
Session:-2019 Computer
 Square A filled-in square

Here are the values, which can be used for an ordered list:

Value Description Example

Decimal Number 1,2,3,4,5

decimal-leading- 0 before the number 01, 02, 03,

zero 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV,

V

lower-greek The marker is lower-greek alpha, beta,

gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

hebrew The marker is traditional Hebrew

numbering

armenian The marker is traditional Armenian

numbering

georgian The marker is traditional Georgian

numbering

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o,

ka, ki

katakana The marker is katakana A, I, U, E, O,

KA, KI

hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni,

ho, he, to

katakana-iroha The marker is katakana-iroha I, RO, HA,

NI, HO, HE,
TO

Here is an example:

<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 </ol>

<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

It will produce the following result:

The list-style-position Property

The list-style-position property indicates whether the marker should appear
inside or outside of the box containing the bullet points. It can have one of the
two values:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 Value Description

none NA

inside If the text goes onto a second line, the text will wrap underneath the
marker. It will also appear indented to where the text would have
started if the list had a value of outside.

outside If the text goes onto a second line, the text will be aligned with the
start of the first line (to the right of the bullet).

Here is an example:

<ul style="list-style-type:circle; list-stlye-position:outside;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-alpha;list-style-position:inside;">

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

It will produce the following result:

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your
own bullet style. The syntax is similar to the background-image property with
the letters url starting the value of the property followed by the URL in brackets.
If it does not find the given image then default bullets are used.
Here is an example:

<ul>
<li style="list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style="list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 </ol>

It will produce the following result:

The list-style Property

The list-style allows you to specify all the list properties into a single expression.
These properties can appear in any order.

Here is an example:

<ul style="list-style: inside square;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
The marker-offset Property
The marker-offset property allows you to specify the distance between the
marker and the text relating to that marker. Its value should be a length as
shown in the following example:

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example:

<ul style="list-style: inside square; marker-offset:2em;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha; marker-offset:2cm;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 Padding

The padding property allows you to specify how much space

should appear between the content of an element and its
border:

The value of this attribute should be either a length, a

percentage, or the word inherit. If the value is inherit, it will
have the same padding as its parent element. If a percentage
is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You

can also set different values for the padding on each side of
the box using the following properties:

 The padding-bottom specifies the bottom padding of

an element.

 The padding-top specifies the top padding of an

element.

 The padding-left specifies the left padding of an

element.

 The padding-right specifies the right padding of an

element.

 The padding serves as shorthand for the

preceding properties. Now, we will see how to use

these properties with examples.

The padding-bottom Property

The padding-bottom property sets the bottom padding (space)
of an element. This can take a value in terms of length of %.
Here is an example:

<p style="padding-bottom: 15px;

border:1px solid black;"> This is a
paragraph with a specified bottom
padding
</p>

<p style="padding-bottom: 5%; border:1px solid black;">

MAD Lab
Instructor:-Adnan Mustafa
Session:-2019 Computer
 This is another paragraph with a specified bottom
padding in percent </p>

MAD Lab
Instructor:-Adnan Mustafa
Session:-2019 Computer
It will produce the following result:

The padding-top Property

The padding-top property sets the top padding (space) of an element. This can
take a value in terms of length of %.

Here is an example:

<p style="padding-top: 15px; border:1px solid black;">

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

<p style="padding-top: 5%; border:1px solid black;">

This is another paragraph with a specified top padding in percent
</p>

It will produce the following result:

The padding-left Property

The padding-left property sets the left padding (space) of an element. This can
take a value in terms of length of %.
Here is an example:

<p style="padding-left: 15px; border:1px solid black;">

This is a paragraph with a specified left padding

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 </p>

<p style="padding-left: 15%; border:1px solid black;">

This is another paragraph with a specified left padding in percent
</p>

It will produce the following result:

The padding-right Property

The padding-right property sets the right padding (space) of an element. This
can take a value in terms of length of %.
Here is an example:

<p style="padding-right: 15px; border:1px solid black;">

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

<p style="padding-right: 5%; border:1px solid black;">

This is another paragraph with a specified right padding in
percent </p>

It will produce the following result:

The Padding Property

The padding property sets the left, right, top and bottom padding (space) of an
element. This can take a value in terms of length of %.

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
Here is an example:

<p style="padding: 15px; border:1px solid black;">

all four padding will be 15px

</p>

<p style="padding:10px 2%; border:1px solid black;">

top and bottom padding will be 10px, left and right padding will be
2% of the total width of the document.
</p>

<p style="padding: 10px 2% 10px; border:1px solid black;">

top padding will be 10px, left and right padding will be 2% of the
total width of the document, bottom padding will be 10px
</p>

<p style="padding: 10px 2% 10px 10px; border:1px solid black;">

top padding will be 10px, right padding will be 2% of the total width of
the document, bottom padding and top padding will be 10px
</p>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 Cursor

The cursor property of CSS allows you to specify the type of

cursor that should be displayed to the user.

One good usage of this property is in using images for

submit buttons on forms. By default, when a cursor hovers
over a link, the cursor changes from a pointer to a hand.
However, it does not change form for a submit button on a
form. Therefore, whenever someone hovers over an image
that is a submit button, it provides a visual clue that the
image is clickable.

The following table shows the possible values for the cursor
property:

Value Description

auto Shape of the cursor depends on the context area it is over. Fo

example, an ‘I’ over text, a ‘hand’ over a link, and so on.

crosshair A crosshair or plus sign.

default An arrow.

pointer A pointing hand (in IE 4 this value is hand).

move The ‘I’ bar.

e-resize The cursor indicates that an edge of a box is to be moved righ

(east).

ne-resize The cursor indicates that an edge of a box is to be moved up

right (north/east).

nw- The cursor indicates that an edge of a box is to be moved up

resize left (north/west).

n-resize The cursor indicates that an edge of a box is to be moved up

(north).

MAD Lab
Instructor:-Adnan Mustafa
Session:-2019 Computer
 se-resize The cursor indicates that an edge of a box is to be moved down
and right (south/east).

sw- The cursor indicates that an edge of a box is to be moved down

resize and left (south/west).

s-resize The cursor indicates that an edge of a box is to be moved down

(south).

w-resize The cursor indicates that an edge of a box is to be moved left

(west).

text The I bar.

wait An hour glass.

help A question mark or balloon, ideal for use over help buttons.

<url> The source of a cursor image file.

NOTE: You should try to use only these values to add helpful information for
users, and in places, they would expect to see that cursor. For example, using
the crosshair when someone hovers over a link can confuse the visitors.

Here is an example:

<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div> <div
style="cursor:pointer">Pointer</div> <div
style="cursor:move">Move</div>

<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
 <div style="cursor:n-resize">n-resize</div> <div
style="cursor:se-resize">se-resize</div> <div
style="cursor:sw-resize">sw-resize</div> <div
style="cursor:s-resize">s-resize</div> <div
style="cursor:w-resize">w-resize</div> <div
style="cursor:text">text</div>

<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

It will produce the following result:

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
Lab Tasks
Task 01:-

You have to develop a web page similar to the one given below.( find the Screen Capture
attached below) This page must have following properties:

 Use HTML tags and CSS that you studied in lectures.

 Use font tag to give the heading “Islamic Republic of Pakistan”. Use font “ARIAL”,
size is 18 and colors the text “Green”. The word “Islamic Republic of Pakistan” should
be aligned in center.
 Write brief introduction about Pakistan. You can take this text from the official website
of Pakistan as mentioned below.
 Use H1 tag for the heading “Provinces of Pakistan”. Text should be underlined.
 Use H3 tag for writing the line “Following are the provinces of Pakistan: “
 Heading tags are no more needed in rest of the lines.
 Write the names of provinces as written in the sample provided.
 When you click to hyperlinked words “Islamic Republic of Pakistan” in the second last
line of the page, then the website http://www.pakistan.gov.pk must open.
 Print [email protected] in the last line.
 You must use all the essential tags like <HTML>, <head>, <title>, <body> etc while
developing your task.

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
Task 02: -

You have to develop a web page similar to the one given below. (Find the Screen Capture attached
below) This page must have the following properties:

 Use HTML tags and CSS that you studied in Computer Application in Engineering Design
lectures of HTML and CSS.

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
  The title of the page should be “My student ID is xxxxxxxxxxx”. Instead of writing x’s
you should display your own ID, not of someone else or not the one shown in the
screenshot.
 Use H1 tag for the heading “Autumn 2015 HTML CAED”.
 Draw a table with the given columns and rows. The size of table border should be “1”,
the background color should be “SkyBlue”, and it should be aligned in the center. The
following text must be written in the caption of the table “Wheat and Rice Production
in South Asia”. The table should be exactly like the one shown in the screen capture.
 Use H4 tag for the heading “Displaying the title of the webpage on the Status bar”.

Task#03: Write the HTML code and CSS to generate a Web Page in the format given below:
 Web page title should be “Online Book storage”.
 You are required to use appropriate heading tags for all headings used in web page.
 Use HTML table for diagrams.
 For HTML tables, use border, bgcolor and colspan where needed/ suitable.
 Insert your accurate information in appropriate places as mentioned in the image.
 LOGIN, USER PROFILE, BOOKS CATALOG, SHOPINGCART, PAYMENT as a link

MAD Lab Instructor:-Adnan Mustafa

Session:-2019 Computer
MAD Lab Instructor:-Adnan Mustafa
Session:-2019 Computer