Object Oriented Analysis and Design

Lab Manual
CLO 1: Demonstrate an understanding of the application of OOAD practices from a software
project management perspective
CLO 2: Apply UML to understand various system models.
Lab 1: CLO: 1
Make wire frames of the given case studies using Pencil tool
Case Study:
We will be designing a simple online shopping portal. The system will allow more than one
categories and different brands under that category. A customer can choose different items of
different brands of categories. Then the customer login to give payment and card details and
address for shipment. The Administrator can update the categories and brands etc. and also verifies
customer details.
Requirements:
User End:
 As a user, I shall select one or more items.
 As a user, I shall register into the system.
 As a user, I shall login into the system using my account before purchasing an item.
 As a user, I shall give card details for shipment of items.
Admin End:
 As an admin, I shall login using my account.
 As an admin, I shall confirm user details.
 As an admin, I shall record the details of a shipment.
Solution:
 Home Page

User Admin
T1: As an User, I shall watch and select for T1: As an Admin, I shall be change this
buy or more information about this add advertisement due to new products
T2: As an User, I shall choice the product T2: As an Admin, I shall be update(Insert,
according to the specific brands for buying Delete,) Brands
T3: As an User, I shall choice the products T3: As an Admin, I shall be recommend the
which are most popular according to different products whose are most viewed or popular
visitors
 Mobile Brand

User Admin
T1: As a User, I shall passing through a filter T1: As an Admin, I shall give (or provide) the
of products according to the needs. whole description about the product after
T2: As a User, I shall select the product for selection of the product
purchasing and complete description about T2: As an Admin, I shall given the whole
product description about the product after select the
product
 Clothes

User Admin
T1: As a User, I shall select the T1: As an Admin, I shall be adjusting the
products(cloths) according to the session of clothes according to the session.
weather
 SignUp

User Admin
T1: As an User, I shall After fill the form T1: As an Admin, I shall be authorize the
submit it for register himself and reserve the user for getting new updates and buy a
products for purchasing products
 Description of Products

User Admin
T1: As an User, I shall booking the order T1: As an Admin, I shall be send the
notification about the order which user
purchase the product

Lab 2: CLO: 1
INRODUCTION TO HTML

1.1. Internet

Internet is an important source of information sharing. Internet means International Network.

When we share different resources (resources includes information and hardware both) between
more than one computers it is called Network and the way of sharing resource among all
computers of the world is called Internet. Internet is a global system of interconnected computer
networks. Internet is such a network where millions of private, public, academic, business, local
and government networks are linked to each other or in other words we can say that internet is
collection of many networks.
The Internet carries a vast range of information and services. One of the greatest things about the
Internet is that nobody really owns it. It is a global collection of networks, both big and small.
These networks connect together in many different ways to form the single entity that we know
as the Internet.
Via internet you can send and receive e-mail. You can chat with text or voice. You can browse
the World Wide Web. And you can perform countless other tasks with the appropriate software.

Internet (a network of networks) [1.1]

1.2. World Wide Web (WWW)

The World Wide Web, or simply Web, is a way of accessing information over the medium of the
Internet. It is an information-sharing model that is built on top of the Internet. We access the
Document using URLs (Universal Resource Locators). For example http://www.google.com is
URL where http is name of protocol and www.google.com is address of document that we want
to view.
1.2.1 Web Page and Website

A document over the WWW is call web-page it may contain text, images, videos. It may also
contain the links to other web pages these links are called Hyperlinks. If we want to write a
webpage then we have to do it in HTML. This is language which we use to create web-pages. A
website is collection of related web-pages. When same kind of web-pages combine and put
under into one name that is called website.
1.2.2 Web Browser

Web browser is a program that is used to view a web-page/website. We write URL(address) of

website that we want to view in address bar of web browser and it will take us to that website.
There are different web browsers are available like Internet Explorer (IE), Google chrome,
Mozilla Firefox. We can use any of them.
1.2.3 HTML

As in last section we discuss that HTML is language that use to create web-pages. HTML stands
for Hyper Text Markup Language. Remember it is not a programming language it is a mark up
language. HTML documents contain HTML tags and plain text.

Fig 1.2 Web-browser and its elements

2. Writing First Web Page in HTML

Tags: In html we use tags to tell web browser how to show web-page. Everything in html file
that start with “<” and end with “>” is called tag. For example <html> , <head> and <body>.
Every HTML page start with <html> and ends with </html> tags. First tag <html> is called
opening of tag and second one </html> is called closing of tag. All remaining tags used for
developing the web page will be written in these two tags
There are two sub portion of <html> tag one is <head> </head>and other is <body> </body>
Both body and head tags have their own uses. The information that we want to show to user
should be written inside opening and closing tags of body tag. The purpose of head tag will be
discussed in some other course.
We have enough background knowledge to start our first website.
1. Task: Open Notepad (Go to start menu click at run and type Notepad )

Explanatory Note: To make web site we can use any Text editor .there are many text editors
available on the internet: Textpad, notepad++. For this course we will use notepad.
2. Task: Write following line of code into text editor.
 code In this code some text is included in
body opening and closing tags
Whatever written inside <body> tag
show to user.

3. Task : Now Save html file (Press ctrl+s) . Type any name for the file and don’t forget to
change the extension from .txt to html or htm. Also choose All File option from bottom
[important].

Fig 1.3 Choose a file name and file type

4. Open the file in any web browser by double clicking on it and the output will be:
Note 1: Now whenever you need to make changes to your HTML file you can open this file in
notepad and make changes and then save it. If you want to view these changes just open this file
in your web browser.
Note 2: The browser does not display the HTML tags, but uses the tags to interpret the content
of the page.
In last we saw how to create a simple web page. We can do lot more then that for example we
can bold the text , italic the text and add pictures on web page. In this we get familiar with
more html tags; <b> , <i> , <p> , <br> .

2.1 Bold Tag

<b> tag is used to bold the text. Any text written in opening and closing tags of html will get
bold.
3. Task: Open your html file in Notepad

4. Task: Write following line of code into text editor.

In this code b tag is included in body tag and some
text is written in the b tag. This text text will be
displayed as bold.

5. Now Save html file (Press ctrl+s) .

6. Open the file in any web browser by double clicking on it and the output will be:

2.2 Italic Tag

<i> tag is used to italicize the text. Any text written in opening and closing tags of html will get
italic.
1. Task: Open your html file in Notepad
 2. Task: Write following line of code into text editor.
In this code i tag is included in body tag and some
text is written in i tag. Resultantly this is italic text
will be displayed as italicized.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

2.3 Hierarchical structure of HTML

One thing which is very important to know is that we can use a tag inside another tag.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

 In this code i & b tags are included in body tag and
some text is written in the innermost tag. Text will
take a combined effect from these tags and result
will be an italic bold text.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

Explanatory Note: That means when we use tag inside tags. Important is inner tag should be
closed before the outer tag. You can not write something <b><i> italic text </b> </i> this is
incorrect method. If a tag open inside another tag then it should be close before opening tag.
Correct way to write above is <b><i>italic text</i></b>

2.4 Paragraph Tag

<p> is called paragraph tag. It is used to write a paragraph.

<p> tag leaves a line break before and after it.

1. Task: Open your html file in Notepad

 2. Task: Write following line of code into text editor.
In this code some text is separately included in
two p tags. These paragraphs will be displayed
with one space between them. As p tag leave one
line before it and one line after it text

3. Now Save html file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:

2.5 Break Tag

<br> is called break tag. It is used to give a line break after it.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

3. Now Save html file (Press ctrl+s) .

 In this code some text is separately
included in two p tags. And a break tag is
also included in these tags. Due to br tag a
space will be introduced before the stuff
where br tag is placed.

4. Open the file in any web browser by double clicking on it and the output will be:
Attributes of tags
All html tags have a number of attributes. It includes id, class, style etc.id attribute is used to
assign a unique value to an element or tag. Class attribute is used to give a unique class name to
an element. 2.6 Image tag
To put an image on a web page <img> tag is used. For this purpose the attribute of <img> tag
that is necessarily be used is src. Src attribute is used to give the path to the image.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

Here we have used an image tag to display an
image in the browser. “src” property of <img> tag
is used to give path of the image

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

Note: Path of the image will be given in this way only when image is located in the same folder
as the html document.
Image tag has some other attributes like width and height which are used to control the
dimensions of the images that is to be displayed.In this we will learn about some more tags of
html that includes links and list tags i.e.<a>, <ul>, <ol>
3.1 Hyperlink

We can link pages using hyperlink tag. Linking mean we can go from one web page to other by
simply clicking on it. In <a> tag a stands for anchor. And <a> tag must use it attribute href to
give the website address in it.

5. Task: Open your html file in Notepad

6. Task: Write following line of code into text editor.

In this code a link is applied to text. href arrtibute
of anchor tag is used to give URL of the web page.
As shown in the last step of this task yahoo is
shown as a link to a web page clicking it will take
you to yahoo.com

7. Now Save html file (Press ctrl+s).

8. Open the file in any web browser by double clicking on it and the output will be:
Up till now we learned to make a hyperlink on a text now we proceed by making a hyperlink
over an image. It can be done very easily. As we have already talked in the html hierarchy that
we can use a tag within another tag.
To create a link to an image we will use image tag inside the anchor tag.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

In this code a link is made to yahoo.com web page
but this time we have applied link to an image. By
clicking on image you can open yahoo.com

3. Now Save html file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:

Explanatory Note: Now when you open html file in your browser ,you will see the image whose
path has been gave in src attribute now if you place your mouse on displayed image it will
change its shape form arrow to hand. By clicking over it you will be directed to the page whose
address is given in href attribute. In this case it is yahoo.com.
3.2 List

Sometimes we need to show information in numbering or in bullets format. For this html provide
us un-order list <ul> and ordered <ol> list.
3.2.1 Un-ordered List Tag

HTML offers authors several mechanisms for specifying lists of information. To present list of
Information in bulleted format we can use <ul> tag.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

In this example we have presented a list of
information in the bullet ed form.

Default bullet is a circular.

3. Now Save html file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:
Note: There are different styles of bullets like square ,disc, circle. But customized bullets can be
used.

3.2.2 Ordered List Tag

To present list of Information in numbering format we can use <ol> tag.

1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

In this example we have presented a list of
information in the Numbered form. Default
Numbering is 1,2,3……

3. Save html file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:
Note: To specify the type of the numbering, type attribute of the <ol> is used.
For different styles of numbering there are three built in types of bullets like A, i, 1.

3.3 HTML Tables

HTML also have table tag. Mostly this tag is use to show the data in tabular form. Content that is
appearing on a web page can be included in a html table. This is called tabular form. As a table
contain rows and columns. In html, to present the rows in a table <tr> tag is used, <tr> tag is
included as many times in table tag as many rows are required in the table. To present the
columns <td> tag is used , <td> tag is included as many times as many columns are required in
the table.
The intersection of a row and a column is called a cell. Like other tags of html .table tag also
contain the border attribute.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

This is simplest form of the table containing only

one row and one column.

3. Now Save html file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:

Now we do little bit complex example.

1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.
This is another table. In this table we have used
border attribute to apply a border other than a
default border

This table contains 3 rows and two columns for

each row

3. Now Save HTML file (Press ctrl+s).

4. Open the file in any web browser by double clicking on it and the output will be:
In this we will see more details of html tables.
To give an organized an appealing look to a web page, its content may be shown within a table.
we can define entire structure of the web in a table.

In this picture whole webpage structure in defined in a table

Fig 4.1 web page containing table with rowspan and columnspan

Now we will learn some more attributes of table tag that includes column-span and row-span.

4.1 Column-span
Column-span is applied to increase the size of a column.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

In this code column-span=2 is applied so that the
cell on which this span is applied get space equal
to two columns.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

Explanatory Note: In this example 2nd row of table contain columns that have a span of 2.That
means through column-span we gave this cell a space equal to two columns. 4.2 Row-span

Just like column-span we can also apply row span over the rows of the table.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

 In this code row-span=3 is applied so that the cell
on which this span is applied get space equal to
three rows.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

On a web page along with text content ,image and video content can also be included in a table
to make the web page more arranged and attractive.
 Fig 4.2 This picture is an example of multimedia content on the webpage

This can be done easily. Let see how to do it.

So again we will use anchor tag to add an image to table.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

 In this code we have tried to develop a
web page that contains text and images
placed inside the table element.

Using Table enhances the look and feel of

the page.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

Till now we only have talked about those tags that are related to make a website “Presentable
and organized”.
But now we will talk about html forms that are used to create interactivity between a website
and a user. You will not find a single website on the internet that doesn’t include html forms.
Every website is using more or less number of tags of html forms.

For example forms are used in an online shopping websites and creating user registration on any
website.
 Fig 5.1 This picture is an example of forms on a webpage
5.1 Html Forms

In this we will read about forms in html and input tags. Form also possess closing and opening
tags like html tag
<form>
This is form opening tag
</form>
This is form closing tag
Now remaining form code is typed in these two tags .There are different input items available for
forms e.g. Buttons, textboxes, check box, radio buttons etc.
To use these input items ,we have to specify them in the type attribute of the form input tag.
5.1.1 Text input

This item is used to take a single line input from a user. It can be used for typing an email
address, username, address etc. Indeed this is the only input item which is very common.
1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

 Form input Text is used to include a textbox in
html web page

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

5.1.2 Password

It can be used on the user registration page or on user log in page

1. Open your html file in Notepad

2. Task: Write following line of code into text editor.

Form input password is used to include a textbox
in html based web page that will take the text as
hidden text.

3. Now Save html file (Press ctrl+s) .

 4. Open the file in any web browser by double clicking on it and the output will be:

5.1.3 Checkbox

This input item is provided to allow users to select more than one options out of a number of
available options.

1. Task: Open your html file in Notepad

2. Task: Write following line of code into text editor.

Here we have used form input checkbox

Type attribute is given value checkbox to place a

checkbox in the page.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:
5.1.4 Radio-buttons

This item is provided to the user to make one selection out of a number of available options.
1. Open your html file in Notepad

2. Task: Write following line of code into text editor.

Here we have used form input type =Radio

Type attribute is given value radio to place a

radio-button in the page. Radio button allow user
to choose only one option out of many.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:
5.1.5 Drop-Downlist

To select one item out ofa large number of available options

1. Task: Open your html file in Notepad

 2. Write following line of code into text editor.

this code is including a dropdown or a selection

menu in the web page

Select tag is used under the form tag to place a

selection menu in the web page

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

5.1.6 Button

To include button which is the most essential part of the forms in html ,it can be added to the
web site in this manner.

1. Task: Open your html file in Notepad

2. Write following line of code into text editor.

 In this code the type property of input tag is
assigned a value Button to declare that we want to
place a button in our web page.

3. Now Save html file (Press ctrl+s) .

4. Open the file in any web browser by double clicking on it and the output will be:

INTRODUCTION TO CSS
CSS stands for Cascading Style Sheets. CSS is effectively the clothing that we put on a web
page. CSS is an tremendous addition to plain HTML. With plain HTML you define the colors
and sizes of text and tables throughout your pages. If you want to change a specific element you
will have to change the entire document.
With CSS we define the colors and sizes in "styles". Then as you write your web pages you refer
to the styles. In short we can say that we use CSS to control the style and layout of multiple Web
pages all at once.
Let us show you how CSS works!

Simple Web page before applying CSS

Simple Web page after applying CSS

2.1 How to define styles?
Styling information for a web page can be defined in three ways

• Inline
• Embedded (page-level style)
• CSS (external style-sheet)

2.2 Inline style

As already mentioned, that every HTML tag possesses some attributes. In case of Inline way of
styling, we apply the style using the attribute right inside the elements of your HTML code, and
this method of styling is referred to as inline CSS .This attribute specifies style information for
the current element only.
Below is the general form for setting inline CSS in any HTML element.
Pseudo Code

<htmltag style=”attribute: value ; attribute : value;”></htmltag>

Task: Open Notepad (Go to start menu click at run and type Notepad++)

Explanatory Note: To add inline styling to a web site we can use any Text editor in this case we
are using notepad ++. For this course we will use notepad.

1. Task: Write following line of code into text editor.

 Lets add some Inline CSS styling to our html
file
In this code styling
information is given within
the tag. Inline styling has
the highest priority out of
any method of styling. This
styling detracts from the
true aim of using CSS, so we
use it rarely.

To use Inline styling we use

style attribute defined
inside the tag of the
element which is to be
styled.

For example, To apply

background effect to a
paragraph we have used the
style attribute of the tag p.
This tag is for the paragraph
element.

2. Task : Now Save html file (Press ctrl+s) . Type any name for the file and don’t forget to
change the extension from .txt to html or htm. Also choose All File option from bottom
[important].
 Choose a file name and file type

3. Open the file in any web browser by double clicking on it and the output will be:

2.3 Embedded styling

Embedded style is fairly an intermediary between inline styles and an external style sheet. An
internal style sheet should be used when a single document has a unique style. The style
element requires both start and end tags <style>...</style> which are inserted between the
<head>...</head> tags of your html file. The type attribute of the style tag defines the type of
style sheet being used so we'll put text/css as the value.
Below is the general form for setting embedded CSS in any HTML element.
Pseudo Code
<style type="text/css"> htmltag{attribute: value;}</style>
Explanatory Note: To add embedded styling to a web site we can use any Text editor. For this
course we will use Notepad++.

1. Task: Write following line of code into text editor.

Add This code to your html file

In this code styling information

is given within the tag.
Embedded styles are styles
that are embedded in the head
of the document. Embedded
styles affect only the tags on
the page they are embedded
in.

Styling information is same as

we add it into inline style. End
result is same only difference is
definition of style you will get
more on it in next .

2. Task: Now Save html file (Press ctrl+s) .

3. Task: Open the file in any web browser by double clicking on it and the output will be:

2.4 External styling

Using external style sheets is the definitive web designer tool in that it allows you to apply
formatting to many different web pages at once with a single .css file.An external style sheet is
 simply a text file containing a list of CSS rules sets. The file is saved with a .css extension and
saved to any directory that can be accessed by the web pages using it.

Below is the general form for setting External CSS in any HTML element.
Pseudo Code
Selector {attribute: value;}

Explanatory Note: To add external styling to a web site we can use any Text editor. For this
course we will use notepad++.

We have to perform two tasks separately. There are two files css and html.

1. Task: We write our Html file (see HTML for more details)

Add This code to your html file

In this code one line of code

is included in the head tag of
HTML. No other changes are
required to link the external
styling to our web page. Link
tag with three attributes rel
type and href are used to
include an external styling to
our web page.
Value of href is equal to
name of the file containing
our styling whose extension
is .css .

2. Task: Write following lines of code into separate file.

Add this code to your .css file

In this code styling

information for the p tag is
typed in our .css file. As a
result all the p tags of the web
page referenced to this .css
sheet will style their p tags
according to this formatting.
 3. Task: Now Save css file (Press ctrl+s).While creating a style-sheet, Just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:

In this we will get knowledge regarding different types of selectors and the precedence of these
selectors.

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors
called “Tag”, "id" and "class".

3.1 Tag Selector

Styling information applied using a default tag of HTML is called a tag selector. The tag selector
is used to redefine existing HTML tags. Select this option if you want to change the formatting
options for an HTML tag, such as the H1 (heading 1) tag or the UL (unordered list) tag.

If we define css style for a tag then this style will be applied for all appearances of that tag in our
html file. For example if we add style for tag p then all <p> that occur in html file will have that
style.

Note: Html tag is called also selector while Attribute-value pair is called declaration.

We have to perform two tasks separately. There are two files css and html. 1.
Task: We write our Html file (see HTML for more details)
 Add This code to your html file

In this code one line of code is

included in the head tag of
HTML .And this line is
referencing our style-sheet. In
this code we have used three p
tags to display three paragraphs
in our web page. Now in our
.CSS file we will straightly use
name of paragraph tag to apply
formatting on all three
paragraphs at once.

Task: Write following lines of code into a separate file.

Add this code to your .css file In this styling information is
typed in our .css file. When you
use the tag selector; the style
definition is automatically
applied to any text or other
element that has been
formatted with the
corresponding tag. Thus, if
you’ve formatted a paragraph
with the p tag and then create
an p style it will automatically
apply to the paragraph.
3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output
will be:
 3.2 ID Selectors

ID selectors initiate such rules in embedded or external style sheets that focus individual HTML
elements. To apply different styling to an Html tag we need to assign a unique name to that
element. The id selector uses the id attribute of the HTML element, and is defined with a "#". ID
is assigned to an element in the html file while this id is used in .css file to assign styling to the
element.
IDs allow you to get very specific about which elements your styles are applied to. This is
basically a subject of staying organized and can also help a lot once you start creating more
complex CSS selectors.
We have to perform two tasks separately. There are two files css and html. 1.

Task: We write our Html file (see HTML for more details)
 Add This code to your html file
In this code one line of code
is included in the head tag of
HTML .And this line is
referencing our style-sheet.
In this code we have used
three p tags to display three
paragraphs in our web page.
In addition to this we have
used ID attribute of p tag to
assign unique value to the
two p tags separately.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file In this code styling information
is typed in our .css file.
Now in our .CSS file we have
straightly used id value of
paragraph tags to apply
formatting on the two
paragraphs separately.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Explanatory Note: So resultantly we have used id selector and applied different formatting or
styling on same type of HTML tag. This is p tag in current example.

3.3 Class Selectors

A CSS class selector will allow you to put one or more style declarations into a group and give it
any name you like so that you can apply it to specific web page components.
This allows you to set a particular style for any HTML elements with the same class. The syntax
you use is simply a "." followed by any name you like . class is assigned to an element in the
html file while this class name is used in .css file to assign styling to group of elements.

We have to perform two tasks separately. There are two files css and html. 1.

Task: We write our Html file (see HTML for more details)
 Add This code to your html file
In this code one line of code
is included in the head tag of
HTML .And this line is
referencing our style-sheet.
In this code we have used
three p tags to display three
paragraphs in our web page.
In addition to this we have
used Class attribute of p tag
to assign a class to the two p
tags separately.
All the elements with the
same class name will have
same formatting.
One ID can be assigned to
only one element
But one class name can be
assigned to more than one
elements.

3. Task: Write following lines of code into a separate file.

Add this code to your .css file In this code styling information
is typed in our .css file.
Now in our .CSS file we have
straightly used class name of
paragraph tags to apply
formatting on the two
paragraphs separately.
Paragraphs with no class name
doest have any formatting so
no formatting is applied to
them. As there is no tag
selector is used as well.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.
 4. Task: Open the html file in to web browser by double clicking on it and the output
will be:

Note: A good practice is to name classes according to their function rather than their
appearance. Classes can be a very effective method of applying different styles .The difference
between an ID and a class is that an ID can be used to identify one element, whereas a class can
be used to identify more than one.
In this we will explore Colors in CSS, color setting methods, Hexadecimal Color codes,
background color and background image properties.
4.1 Introduction

The colors selection is very vital part of look and feel of any web site, so please spend a suitable
amount of time on surfing a number of websites and ponder on the available color range, color
matching and color contrast.
There are many methods to define color in css.

• Color Name

 Define colors by simply entering the name of the desired color.

 Format to define Color name is :

.mycolors{color:blue; background-color:green;}

• Hexadecimal value

 Define colors with the use of hexadecimal values, similar to defining colors in plain
HTML.
  Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F)

 Format to define Hexadecimal is

.mycolors{color:#00002F; background-color:#FFCE02;}

 Hexadecimal number has values from 0 to 9, A , B , C , D, E , F... e.g if you want to

write 10 in hexadecimal then you have to write A and if you want to write 255 in
hexadecimal then we you have to write FF.

 Hex Code of pure RED color which id FF0000 and GREE Color WHICH is 00FF00
and BLACK color which is 000000 and WHITE COLOR which is FFFFF.

 A color code FFAA20 specifies that this color contain RED component equal to
FF(255 maximum part of red color)] and Green component equal to AA (170 in
decimal ) and BLUE is 20(32 in decimal).Look at ref [1] for more details

• RGB value

 Define colors with the use of RGB values, by simply entering the values for amounts
of Red, Green and Blue.

 Format to define rgb color is :

.mycolors{color:rgb(255,201,202); background-color:rgb(40,51,110);}

 Colors are made up by three components RED GREEN and BLUE.

 In rgb: r stands for red g stands for green and b stands for blue.

Below are a screenshots of some websites presenting the use of very reasonable background
colors and background images . he lowest value that can be given to one of the light sources
is 0 (hex 00). The highest value is 255 (hex FF).
 Figure: 1 Figure: 2 Figure: 3

Now let’s find out the how we can apply background color and set background image in Html using CSS styling.

CSS properties used for background effects:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

As name identifies that background color will help us applying a color at the background of an
element.
We have to perform two tasks separately. There are two files css and
html. 1. Task: We write our Html file (see HTML for more details)
Add This code to your html file

In this code one line of code is

included in the head tag of
HTML .And this line is
referencing our style-sheet. In
this code we have used three p
tags to display three
paragraphs in our web page. In
addition to this we have used
ID attribute of p tag to assign
unique value to the two p tags
separately.

4. Task: Write following lines of code into a separate file.

 Add this code to your .css file In this case different styling is
applied to different paragraphs.
Different background colors are
applied to different paragraphs
While the color attribute is
maintained white in all the p
elements
Default value of a color is black
i.e if no color is specified for an
element e.g for H1element

,then automatically it will be

none other than black.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the
file as Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the
output will be:

As now you just saw that how easily we can add color to the background of any element.
Note: Here we have used id selector to apply color to elements. But we can make use of Tag
selector (specifically) and class selector (generically) to apply our color styling as well.
Now we learn the how we can add image to the background of any element.

It’s very simple just use background image property. And you are done!
We have to perform two tasks separately. There are two files css and html.

1. Task: We write our Html file (see HTML for more details)
Add This code to your html file

In this code one line of code is

included in the head tag of
HTML .And this line is
referencing our style-sheet. In
this code we have used three p
tags to display three paragraphs
in our web page. In addition to
this we have used ID attribute
of p tag to assign unique value
to the two p tags separately.
Now we will use id’s of these
paragraphs to apply styling at
them.

5. Task: Write following lines of code into a separate file.

Add this code to your .css file In this code three paragraphs
will be displayed with three
different background images.
To apply background image to
an element, we will use
background-image property
inside the id of that element.
First paragraph will have
background.jpg image in its
background
Second paragraph will have
twitter.jpg in its background
While third paragraph will also
have twitter.jpg in its
background.
 3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the
file as Filename.css and put it in the same directory as your referenced html file.
4. Task: Open the html file in to web browser by double clicking on it and the
output will be:

4.2 Background-repeat
In the above example if we see carefully, the width of the each paragraph is 400px.In the
paragraph one and two; image is repeated while in the third paragraph image is not repeated.
Reason is that if the Background image is smaller than the given size of the element then the
image is repeated along the height and width of the element to completely fill the background
of the element.
If we do not want to repeat the background image then we have to explicitly declare that we
do not need to repeat the image in background. Method for this is follows
background-repeat:no-repeat. By default, the image is repeated in both x and y direction so it
covers the entire element.
The background-repeat property sets if/how a background image will be repeated. You can
have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions,
or in neither direction

4.3 Background-position
The background-position property defines the initial position of an element.If you would like to
define where exactly an image appears within an HTML element, you may use CSS's
background-position. Please take note that there are three different ways of defining position:
length, percentages, and keywords. For instance we are using Keyword.
Three ways to define the position of an element
• Keywords
  center top bottom top left top center top right bottom left bottom center bottom
right

• Percentages

 background-position: 50% 50%;

• Lenghts

 background-position: 200 200;

Note: If no background-position has been specified, the image is placed at the default top-left
position of the element (0,0), which is located within the top-left corner of the element

See how background repeat and position property works!

1. Task: We write our Html file (see HTML for more details)
Add This code to your html file

In this code one line of code is

included in the head tag of
HTML .And this line is
referencing our style-sheet. In
this code we have used p tags
to display a paragraph in our
web page.
In addition to this we have used
ID attribute of p tag to assign
unique value to the p tag.
Then we will use id’ of the
paragraphs to apply styling on
it.

2. Task: Write following lines of code into a separate file.

 Add this code to your .css file
Now in the css file we have
specified the position for our
element with the p1 id whih
is a paragraph in this example
It will be displayed at the right
top position in thw web page.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:

In this we will see that what is html box model, how to set margins, border of an element, how
to give padding, how to handle floating Images, text and font Properties.

First of all we take a look at box model followed by the elements of html.
 CSS Box Model

TB

TP

Content
LB
RP LP
RB
BP

BP

BB
Detail figure of CSS Box Model

Stands For?
TM stands for top margin RM-Right Margin LM-Left margin BM-Bottom margin TM-Top Border RM-Right Border LM-Left
border BM-Border Bottom TP-Top padding RP-Right Padding LP-Left Padding BP-Bottom Padding
Boundary of any element is called border. Distance between the content of any element and its
boundary is called Padding.While the distance between two elements of html is called Margin.
CSS Border, allow you to completely customize the borders that appear around HTML elements.
To alter the thickness of your border use the border-width attributes. You may use key terms or
exact values to define the border width.
Note: You must define a border-style for the border to show up. Available terms: thin, medium,
thick. The border has been made visible, in our example work for each element, so you may
more readily see the effects of padding margin.
1. Task: We write our Html file (see HTML for more details)
 Add This code to your html file

In this code one line of code is

included in the head tag of
HTML .And this line is
referencing our style-sheet. In
this code we have made two
headings.Id of one heading is
heading1 and the id of the
other heading is heading2
In our CSS file we will set
margin and padding of these
elements.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this code heading1 & heading2 are both of white
color which means that the text within them will be
of the mentioned color value. Both elements are
surrounded by the 2 px thick border. The two
heading elements will be of 40px apart because
margin-top of the lower heading is set to 40px.Here
we will get the same result if we do not set the
margin-top property of the heading2 but we set the
margin-bottom property of the heading1 to be equal
to
40px.Both cases will do the same function. While
the left top and bottom padding are also defined
separately. These settings will create the space
between the content of the headings and their
boundary. Space between the content of the
heading1 and upper boundary will be 10 px asn the
padding-topwhile the content of the heading1 will
be 10 px away from the left boundary as padding-
left=10px

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
We continue with the formatting text stuff! Basically, we can adjust the size, alignment, style
and the weight of our text to be displayed. Let’s format our text straight away!

1. Task: We write our Html file (see HTML for more details)

Add This code to your html file This code is typed in the HTML
file. We will set different text
styling on the paragraphs
elements.you can set different
font families provided they are
installed on client machine.

2. Task: Write following lines of code into a separate file.

 Add this code to your .css file
In this CSS code p1 element
font is courier and the width of
this paragraph element is set to
400 px.
While size of font is set to small
in the second paragraph. Font
size of an element can be set to
large larger medium small
smaller and it can be set using
px unit e.g 20 px.
Texttransform is a quick way to
modify the capitalization of
your text.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:

1. Task: We write our Html file (see HTML for more details)
 Add This code to your html file This code is typed in the HTML
file.
.In our CSS file we will apply
formatting to our paragraphs
and heading elements.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
Different alignments can be set
such as center left right
justified.
In this code paragraph width is
set to 400px.Otherwise the
paragraph will be displayed
straight away along the length
of the window of the web
browser.
3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Now we move to the most interesting part of CSS which is “Floating”. Float is a CSS
positioning property.
Float Left

Float right

Left and Right Floating

You can float elements on the web page to the right or the left. With CSS float, an element (text
/Image) can be moved to the left or right, allowing other elements to wrap around it.
Float is very often used for images.
For example, if you float an image to the left, any text or other elements following it will flow
around it to the right. And if you float an image to the right, any text or other elements following
it will flow around it to the left An image that is placed in a block of text without any float style
applied to it, will display as the browser is set to display images.
Why Float is used?
1. Task: We write our Html file (see HTML for more details)
Add This code to your html file Simple html coding is shown in
this example including two
paragraphs and reading
styling from .css file

2. Task: Write following lines of code into a separate file.

 Add this code to your .css file
In this CSS code we will just notice
that how an image is displayed by the
browser when it is placed in the
paragraph tag with some text without
any float. After this in the next
example we will apply float property
to this image.
By default HTML elements follows Box
model, so as there are two paragraph
elements hed1 and hed2 described in
the HTML file, hed1 is of 300px width
and the hed2 of 300px width. Then
due to box model, hed1 and will not
be placed side by side with hed2 .In
fact #hed2 will be placed below
#hed1.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in web browser by double clicking on it and the output will be:

By using float we will place elements side by side.

1. Task: We write our Html file (see HTML for more details)
 Add This code to your html file In this case we have placed two
paragraphs in this file.
Paragraphs in this file will take
their styling from .css file.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file

In this example we have added
flaot property to the #hed2
element.so that it is shifted to
the right side of #hed1 element
and fulfil our objective.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in web browser by double clicking on it and the output will be:
Up till now we have played with two text elements and why to apply float on them, now
we will play with image and text and apply float on them.

1. Task: We write our Html file (see HTML for more details)

Add This code to your html file This coding is showing simple
html file with one heading, a
paragraph element and an
image element inside it.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this CSS code we will just
notice that how an image is
displayed by the browser
when it is placed in the
paragraph tag with some text
without any float. After this in
the next example we will apply
float property to this image.

3. Task: Now save css file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Explanatory Note: In this example we have just noticed that if we do not apply floating to
the image appearing within the paragraph tag. It will give an unordered and unstructured look
and feel.
Note: While floating images, it should be noted that a margin should be added to images so
that the text does not get too close to the image. There should always be a few pixels between
words and borders, images, and other content.

Now in the Following example, we will apply float property to position the image at a suitable
place.

1. Task: We write our Html file and save it.(see HTML for more details)
 Add This code to your html file This code is typed in the HTML
file.
.In our CSS file we will apply
formatting to our paragraph
and image element
to get adjusted in the paragraph
text nicely.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this code we have floated our
image element to the left as a
result text will be moved
towards right.

3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Floats can be used to create entire web layouts.

In this we will get more knowledge about floating and the scenarios arising when floating is
applied, what is clear, and also will get basic understanding of div (division) in CSS.
A already mentioned that one of the powerful tools and the backbone of CSS is floating action.
Floating can be even used to design the entire layout of a web site same as what we said about a
table in html.

Let’s perform floating to place two paragraphs side by side! Obviously using left and right
floating.

1. Task: We write our Html file and save it.(see HTML for more details)
Add This code to your html file Type the code shown in the
image in your html file.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this Code img element is
floated left setting the left, right
and top padding. Along with
that two paragraphs are
floated left and right
respectively.
But you can see in step # 3 that
#p1 didn’t allow to give spare
place to #p2 as it is box model.
That problem will be solved in
next task. Go ahead and see its
output in step#3
3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:

We just saw from the output that #p1 didn’t allow #p2 to lay aside. Again the problem is same
as described above that elements are using Box model and didn’t allow two paragraphs to lay
side by side even if there s some space is left after the first paragraph.And this space is
enough to be occupied by the paragraph2,But default behavior of Paragraph to follow box
model pushed paragraph2 below it.

How to place them aside by side with each other. Again solution is to use floating.

Also use another useful element of CSS which replaces table of HTML. The <div> element is
well-suited to take over from tables as a layout tool. It is an element that is used to divide the
page into sections, and can hold whatever you need inside it. Each section can then have its
own formatting. Using div it becomes easy to manage and manipulate the web page easily.
1. Task: We write our Html file and save it.(see HTML for more details)
 Add This code to your html file Type the code shown in the
image in your html file.

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this Code img element is
floated left setting the left right
and top padding. Along with
that two paragraphs are
floated left and right. Container
div gave us remarkable solution
and place two elements side by
side which were positioned
using Floats.

3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:
Controlling the width of the container div we can minimize the distance between the two
elements .the more we reduce the width .the more they come close to each other.
Elements following a floated element will wrap around the floated element. If you do not want
this to occur, you can apply the "clear" property to these following elements. The clear property
is used to control how the subsequent elements of floated elements in a document shall behave.
By default, the subsequent elements are moved up to fill the available space which will be freed
when a box is floated to a side.

Now we see one problem by the use of float and find out its solution.

1. Task: We write our Html file and save it.(see HTML for more details)
Add This code to your html file Type the code shown in the
image in your html file
 2. Task: Write following lines of code into a separate file.
Add this code to your .css file
In this Code img element is
floated left setting the left
right and top padding. Now the
problem is that third element
occupied the space which is
left between the two floated
elements. This gives the effect
of overlapping. And resultantly
disturb our design.
This problem is raised by the
use of

3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be:

Now this is the time to take our new element (which is a paragraph at the moment) out of the
empty space left due to other floating elements.
Use clear as the solution

Clear property can be used to clear from left or from right or both. Clear both means that
element having clear:both styling defined in its tag should have both lefts and right clear.
1. Task: We write our Html file and save it.(see HTML for more details)
 Add This code to your html file Type the code shown in the
image in your html file

2. Task: Write following lines of code into a separate file.

Add this code to your .css file
In this Code img element is
floated left setting the left right
and top padding. Problem is
solved using clear property.
#p3 is given a property
Clear:both
Use of clear is solving the
problem raised by the use of
float.
Clear is clearing both sides of
third paragraph and resultantly
placing the this third element
of div container without any
float at the bottom of the two
floated elements within the
same div.

3. Task: Now save CSS file (Press ctrl+s).While creating a style-sheet, just save the file as
Filename.css and put it in the same directory as your referenced html file.

4. Task: Open the html file in to web browser by double clicking on it and the output will
be: