ACMS

What is Internet?
The Internet is essentially a global network of computing resources. You can think of the
Internet as a physical collection of routers and circuits as a set of shared resources.
Some common definitions given in the past include −

 A network of networks based on the TCP/IP communications protocol.

 A community of people who use and develop those networks.

Internet-Based Services
Some of the basic services available to Internet users are −
 Email − A fast, easy, and inexpensive way to communicate with other Internet users
around the world.
 Telnet − Allows a user to log into a remote computer as though it were a local
system.
 FTP − Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.
 UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
 World Wide Web (WWW) − A hypertext interface to Internet information resources.

What is WWW?
WWW stands for World Wide Web. A technical definition of the World Wide Web is − All the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
In simple terms, The World Wide Web is a way of exchanging information between
computers on the Internet, trying them together into a vast collection of interactive
multimedia resources.

What is HTTP?
HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer
hypertext documents that makes the World Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here the prefix http
indicates its protocol

What is URL?
URL stands for Uniform Resource Locator, and is used to specify addresses on the World
Wide Web. A URL is the fundamental network identification for any resource connected to

1
 ACMS

the web (e.g., hypertext pages, images, and sound files).

A URL will have the following format −

protocol://hostname/other_information

The protocol specifies how information is transferred from a link. The protocol used for
web resources is HyperText Transfer Protocol (HTTP). Other protocols compatible with
most web browsers include FTP, telnet, newsgroups, and Gopher.
The protocol is followed by a colon, two slashes, and then the domain name. The domain
name is the computer on which the resource is located.
Links to particular files or subdirectories may be further specified after the domain name.
The directory names are separated by single forward slashes.
https://msbte.engg-info.website/msbte-model-answer-paper-summer-winter

What is Website?
website is a collection of various pages written in HTML markup language. This is a
location on the web where people can find tutorials on latest technologies. Similarly, there
are millions of websites available on the web.
Each page available on the website is called a web page and first page of any website is
called home page for that site.

What is Web Server?

Every Website sits on a computer known as a Web server. This server is always connected
to the internet. Every Web server that is connected to the Internet is given a unique address
made up of a series of four numbers between 0 and 256 separated by periods. For
example, 68.178.157.132 or 68.122.35.127.
When you register a Web address, also known as a domain name, such as atharva.com
you have to specify the IP address of the Web server that will host the site.
We will see different type of Web servers in a separate chapter.

What is Web Browser?

Web Browsers are software installed on your PC. To access the Web you need a web
browsers, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
Currently you must be using any sort of Web browser while you are navigating through my
site atharva.com. On the Web, when you navigate through pages of information this is
commonly known as browsing or surfing.
We will see different type of Web browsers in a separate chapter.

What is SMTP Server?

2
 ACMS

SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering
emails from one server to another server. When you send an email to an email address, it
is delivered to its recipient by a SMTP Server.

What is ISP?
ISP stands for Internet Service Provider. They are the companies who provide you service
in terms of internet connection to connect to the internet.
You will buy space on a Web Server from any Internet Service Provider. This space will be
used to host your Website.

What is HTML?
HTML stands for Hyper Text Markup Language. This is the language in which we write web
pages for any Website.
This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic
publishing, the specific standard used for the World Wide Web.

What is Hyperlink?
A hyperlink or simply a link is a selectable element in an electronic document that serves
as an access point to other electronic resources. Typically, you click the hyperlink to
access the linked resource. Familiar hyperlinks include buttons, icons, image maps, and
clickable text links.

What is DNS?
DNS stands for Domain Name System. When someone types in your domain name,
www.example.com, your browser will ask the Domain Name System to find the IP that
hosts your site. When you register your domain name, your IP address should be put in a
DNS along with your domain name. Without doing it your domain name will not be
functioning properly.

What is W3C?
W3C stands for World Wide Web Consortium which is an international consortium of
companies involved with the Internet and the Web.

3
ACMS

4
 ACMS

INDEX

o HTML Symbols o HTML 5 Tags

HTML
o HTML Charset o HTML Audio
o Introduction to HTML o HTML URL Encode o HTML Video
o What is HTML o HTML Progress
HTML Tags
o HTML tags o HTML Meter
o HTML Formatting o HTML Marquee o HTML Data Tag
o HTML Heading o HTML Textarea o HTML Datalist Tag
o HTML Paragraph o HTML Quotes o HTML Header Tag
o HTML Anchor o HTML Style o HTML Footer Tag
o HTML Image o HTML Title o HTML Figure Tag
o HTML Table o HTML DOCTYPE o HTML Figcaption Tag
o HTML Lists o HTML Div Tag o HTML Article Tag
o HTML Ordered List o HTML Pre Tag o HTML Aside Tag
o HTML Unordered List o HTML Code Tag o HTML Dialog Tag
o HTML Description o HTML Label Tag o HTML Details Tag
List o HTML Input Tag o HTML Summary Tag
o HTML Form o HTML Button Tag o HTML Section Tag
o HTML Classes o HTML HR Tag o HTML Time Tag
o HTML Id o HTML BR Tag o HTML Main Tag
o HTML Iframes o HTML Script Tag o HTML Wbr Tag
o HTML JavaScript o HTML NoScript Tag o HTML Canvas
o HTML File Path o HTML b Tag o HTML SVG
o HTML Head o HTML Drag & Drop
HTML5
o HTML Layout o HTML Google Maps
o HTML Responsive o HTML5 tutorial o HTML5 Semantics
o HTML Computercode o HTML5 User Manual o HTML5 Migration
o HTML Entities

5
 ACMS

HTML
HTML or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed
for beginners and professionals. The major points of HTML are given below:

HTML stands for Hyper Text Markup Language.

HTML is used to create web pages.

HTML is widely used language on the web.

We can create static website by HTML only.

HTML Example with HTML Editor

In this tutorial, you will get a lot of examples, in fact one example for every chapter. you can also edit and
run these examples, with our online HTML editor.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

HTML 5 Tags
In this tutorial, we will learn HTML 5 tags such as audio tag, video tag, canvas tag, HTML svg, HTML
geolocation, HTML drag and drop etc.

All HTML Tags

At last, we will learn all HTML tags one by one for example, marquee tag, textarea tag, br tag, hr tag, pre
tag, h tag, code tag, input tag, title tag, meta tag, script tag, style tag etc.

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and
what is Markup Language?
6
 ACMS

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every
time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more
interactive and dynamic. It can turn a text into images, tables, links etc.

An HTML document is made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

Description of HTML example

DOCTYPE: It defines the document type.

html : Text between html tag describes the web document.

body : Text between body tag describes the body content of the page that is visible to the end user.

h1 : Text between h1 tag describes the heading of the webpage.

p : Text between p tag describes the paragraph of the webpage.

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make effective presentation with HTML because it has a lot of formatting tags.

3) It is a markup language so it provides a flexible way to design web pages along with the text.

4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the
interest of browsing of the user.

7
 ACMS

5) It is platform-independent because it can be displayed on any platform like Windows, Linux and
Macintosh etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it
more attractive and interactive.

HTML Tags
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are
unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right.
HTML tags are used to create HTML documents and render their properties. Each HTML tags have
different properties.

Syntax
<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.
8
 ACMS

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>,
<blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags

9
 ACMS

script and noscript

HTML Formatting

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. There are many formatting tags
in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 12 options
available that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1) Bold Text
If you write anything within <b>............</b> element, is shown in bold letters.

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

2) Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

3) HTML Marked formatting

10
 ACMS

If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Output:

I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin
line which cross the statement.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within <tt>.............</tt>
element.

11
 ACMS

Note: We know that most of the fonts are known as variable-width fonts because different letters have
different width. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every
letter.

See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within ^{..............} element, is shown in superscript ; means it is displayed
half a character's height above the other characters.

See this example:

1. <p>Hello ^{Write Your First Paragraph in superscript.}</p>

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within _{..............} element, is shown in subscript ; means it is displayed
half a character's height below the other characters.

See this example:

1. <p>Hello _{Write Your First Paragraph in subscript.}</p>

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text
12
 ACMS

Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>

Output:

Hello

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

Output:

Delete your first paragraph.Write another paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the previous one.

See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within
<small>.........</small>tag. It reduces one font size than the previous one.

13
 ACMS

See this example:

1. <p>Hello <small>Write the paragraph in smaller font.</small></p>

Output:

Hello Write the paragraph in smaller font.

HTML Heading

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the
webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser
in the bold format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6
is used for least important.

See this example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>

Output:

Heading no. 1
Heading no. 2

14
 ACMS

Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

Heading elements (h1....h6) should be used for headings only. They should not be used just to
make text bold or big.

HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example
to see how it work. It is a notable point that a browser itself add an empty line before and after a
paragraph.

See this example:

1. <p>This is first paragraph.</p>

2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while
displaying the page. The browser counts number of spaces and lines as a single one.

1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
15
 ACMS

8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>

Output:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

As you can see, all the extra lines and unnecessary spaces are removed by the browser.

HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the
most important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points out the
destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

16
 ACMS

A visited link displayed underlined and purple.

An active link is underlined and red.

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains
attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>

2. <img src="good_morning.jpg" alt="Good Morning Friends"/>

Output:

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given
below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to
look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describe the image in words. The alt attribute is considered good for SEO prospective.

17
 ACMS

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended
now. You should apply CSS in place of width attribute.

4) height

It specifies the height of the image. The HTML height attribute also supports iframe, image and object
elements. It is not recommended now. You should apply CSS in place of height attribute.

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a
row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content,
footer section etc. But it is recommended to use div tag over table to manage the layout of the page .

HTML Table Tags

Tag Description
<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

18
 ACMS

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Output:

First_Name Last_Name Marks

19
 ACMS

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

You can collapse all the borders in one border by border-collapse property.

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let's see
the code of CSS.

1. <style>
2. table, th, td {
20
 ACMS

3. border: 1px solid pink;

4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

Let's see the example that span two columns.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>

HTML code:

1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
21
 ACMS

8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

Let's see the example that span two rows.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

HTML code:

1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

22
 ACMS

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>

Styling HTML table even and odd cells

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11. }
12. table#alter tr:nth-child(odd) {
13. background-color: #fff;
14. }
15. table#alter th {
16. color: white;
17. background-color: gray;
18. }
19. </style>

Output:

23
 ACMS

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There
are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is known as numbered list also.
The ordered list starts with <ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Click here for full details of HTML ordered list. HTML Ordered List

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The
Unordered list starts with <ul> tag and list items start with the <li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

24
 ACMS

Output:

 Aries
 Bingo
 Leo
 Oracle

Click here for full details of HTML unordered list. HTML Unordered List

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as
definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value
list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle

25
 ACMS

-It is a multinational technology corporation.

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for
ordered list. There can be different types of numbered list:

 Numeric Number (1, 2, 3)

 Capital Roman Number (I II III)
 Small Romal Number (i ii iii)
 Capital Alphabet (A B C)
 Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not
defining type="1" because it is the default type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

1. HTML
2. Java
3. JavaScript
4. SQL

26
 ACMS

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

27
 ACMS

Output:

A. HTML
B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1. <ol type="i" start="5">

2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
28
 ACMS

Output:

v. HTML
vi. Java
vii. JavaScript
viii. SQL

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul tag is used for
the unordered list. There can be 4 types of bulleted list:

 disc
 circle
 square
 none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description
Type "disc" This is the default style. In this style, the list items are marked with
bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example

1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

 HTML
 Java
 JavaScript
 SQL

29
 ACMS

ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

 HTML
 Java
 JavaScript
 SQL

ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

 HTML
 Java
 JavaScript

30
 ACMS

 SQL

HTML Description List | HTML Definition List

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>,
<dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10. </dl>

Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

HTML Form
An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.

31
 ACMS

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
32
 ACMS

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield control.
The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in
label tag that must be same as id attribute of input tag.

1. <form>
2. <label for="firstname">First Name: </label>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in
this field.

33
 ACMS

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

Radio Button Control

The radio button is used to select one from multiple options. It is used in gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

HTML Form Example

Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
5. <td><input type="text" name="name" value= id="register_name" style="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
9. <td><input type="password" name="password" id="register_password" style="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
13. <td
14. ><input type="email" name="email" value= id="register_email" style="width:160px"/></td>
34
 ACMS

15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>

Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or text
horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right automatically.

Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It is compared with
Netscape's blink element.

Marquee HTML Example

1. <marquee>This is an example of html marquee </marquee>

Output:

35
 ACMS

HTML Marquee Attributes

Marquee's element contains several attributes that are used to control and adjust the appearance of the
marquee.

Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the three
different types: scroll, slide and alternate.

direction defines direction for scrolling content. It may be left, right, up and down.

width defines width of marquee in pixels or %.

height defines height of marquee in pixels or %.

hspace defines horizontal space in pixels around the marquee.

vspace defines vertical space in pixels around the marquee.

scrolldelay defines scroll delay in seconds.

scrollamount defines scroll amount in number.

loop defines loop for marquee content in number.

bgcolor defines background color. It is now deprecated.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts at the right side of the
marquee when it is reached to the end of left side. After the completion of loop text disappears.

1. <marquee width="100%" behavior="scroll" bgcolor="pink">

2. This is an example of a scroll marquee...
3. </marquee>

Output:

36
 ACMS

HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee but stops at the
end to display the content permanently.

1. <marquee width="100%" behavior="slide" bgcolor="pink">

2. This is an example of a slide marquee...
3. </marquee>

Output:

HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.

1. <marquee width="100%" behavior="alternate" bgcolor="pink">

2. This is an example of a alternate marquee...
3. </marquee>

Output:

Direction in HTML marquee

This is used to change the direction of scrolling text. Let's take an example of marquee scrolling to the
right. The direction can be left, right, up and down.

1. <marquee width="100%" direction="right">

2. This is an example of a right direction marquee...
3. </marquee>

Output:

Nested marquee example

37
 ACMS

1. <marquee width="400px" height="100px" behavior="alternate" style="border:2px solid red">

2. <marquee behavior="alternate">
3. Nested marquee...
4. </marquee>
5. </marquee>

Disadvantages HTML marquee

1) Marquee may be distracting because human eyes are attracted towards movement and marquee text
constantly.

2) Since Marquee text moves, so it is more difficult to click static text, depending on the scrolling speed.

3) It is a non-standard HTML element.

4) It draws user's attention needlessly and makes the text harder to read.

HTML Textarea
The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually
courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined through
CSS height and width properties.

HTML Textarea Example

1. <textarea rows="9" cols="70">
2. Atharva textarea tag example with rows and columns.
3. </textarea>

Output:

38
 ACMS

New HTML 5 Textarea Attributes

Attribute Description
autofocus It specifies that a text area should be automatically get focused when the page is
loaded.

form It specifies one or more forms the textarea belongs to.

maxlength It specifies the maximum number of characters allowed in the text area.

placeholder It specifies a short hint that describes the expected value of a textarea.

required It specifies that textarea must be filled out.

wrap It specifies that how the texts in the textarea are wrapped at the time of the submission
of the form.

HTML Textarea form attribute

The form attribute specifies one or more forms the text area belongs to.

1. <form action="updates.jsp" id="usrform">

2. Name: <input type="text" name="usrname">
3. <input type="submit">
4. </form>
5. <br>
6. <textarea rows="9" cols="70" name="comment" form="usrform">
7. Enter text here...</textarea>
8. <p>The text area above is outside the form element, but should still be a part of the form.</p>
9. <p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>

Output:

S u b m it
Name:
39
 ACMS

The textarea element above is outside the form , but it is still the part of the form.

Note: The form attribute is not supported in Internet Explorer.

HTML Style
HTML Style is used to change or add the style on existing HTML elements. There is a default style for
every HTML element e.g. background color is white, text color is black etc.

The style attribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic
knowledge of css properties e.g. color, background-color, text-align, font-family, font-size etc.

The syntax of style attribute is given below:

1. style= "property:value"

HTML Style color

The color property is used to define the text color.

Let's see a simple example of styling html tags by color property of css.

1. <h3 style="color:green">This is Green Color</h3>

2. <h3 style="color:red">This is Red Color</h3>

Output:

This is Green Color

This is Red Color

HTML Style background-color

40
 ACMS

The background-color property is used to define background color for the HTML tag.

Let's see an example of styling html tag by of css background-color property

1. <h3 style="background-color:yellow;">This is yellow background</h3>

2. <h3 style="background-color:red;color:white">This is red background</h3>

Output:

This is yellow background

This is red background

HTML Style font-family

The font-family property specifies the font family of the HTML tag.

Let's see an example of styling html tag by css font-family property

1. <h3 style="font-family:times new roman">This is times new roman font family</h3>

2. <p style="font-family:arial">This is arial font family</p>

Output:

This is times new roman font family

This is arial font family

HTML Style font-size

The font-size property is used to define the text size of the HTML tag.

Let's see an example of font-size property

1. <h3 style="font-size:200%">This is 200% h3 tag</h3>

2. <p style="font-size:200%">This is 200% p tag</p>

Output:

41
 ACMS

This is 200% h3 tag

This is 200% p tag

HTML Style text-align

The text-align property is used to define the horizontal text alignment for the HTML element.

Let's see an example of styling html tag by css text-align property

1. <h3 style="text-align:right;background-color:pink;">This text is located at right side</h3>

2. <p style="text-align:center;background-color:pink;">This text is located at center side</p>

If you want to put heading at center or left, use "text-align:center" or "text-align:left" respectively.

Output:

This text is located at right side

This text is located at center side

HTML5 doesn't support <center> tag which is supported in older version of HTML.

HTML Title
HTML title tag is used to provide a title name for your webpage. It is necessary for Search Engine
Optimization (SEO).

The HTML title tag must be used inside the <head> tag.

The title of the page is displayed on the title bar of the browser.

Let's see the example of HTML title tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First web page.</title>
5. </head>
6. <body>
7. <p>Welcome to my first web page.</p>
8. </body>
42
 ACMS

9. </html>

Here you see that we are using two elements, the head tag and the title tag. The whole title element is
within the head tag.

The head element which appears before body element just contains the information about the page but it
doesn't display on the browser window. So, to display a title name on the web page, title element is used.

If you look at the above example, you will see that "First web page" will be displayed on the tab/ title bar of
the browser. Content(text) between <title>.............</title> is shown on the title bar.

HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph, <h1> to <h6> tag
are used to specify headings but the <div> tag is just like a container unit which is used to encapsulate
other page elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles
to many elements at once. For example: If you wrap a set of paragraph elements into a div element so
you can take the advantage of CSS styles and apply font style to all paragraphs at once instead of coding
the same style for each paragraph element.

1. <div style="border:1px solid pink;padding:20px;font-size:20px">

2. <p>Welcome to Atharva.com, Here you get tutorials on latest technologies.</p>
3. <p>This is second paragraph</p>
4. </div>

Output:

Welcome to Atharva.com, Here you get tutorials on latest

technologies.

This is second paragraph.

Difference between HTML div tag and span tag

43
 ACMS

div tag span tag

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap large HTML span element is used to wrap
sections of elements. small portion of texts, image etc.

HTML pre tag

The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>.......</pre> tag is displayed
in a fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.

It is widely used to display language examples e.g. Java, C#, C, C++ etc because it displays the code as it
is typed.

HTML pre tag example

1. <pre>
2. This is a formatted text
3. by using the HTML pre tag. It maintains
4. both space and line break.
5. </pre>

Output:

This is a formatted text

by using the HTML pre tag. It maintains
both space and line break.

HTML pre tag example: Java code within pre

1. <pre>
2. package com.atharva;
3. public class FirstJava{
4. public static void main(String args[]){
5. System.out.println("hello java");
6. }
7. }
8. </pre>

44
 ACMS

Output:

package com.atharva;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}

If you remove pre tag from the above example, all the text will be displayed in a single line.

Output without pre:

package com.atharva; public class FirstJava{ public static void main(String

args[]){ System.out.println("hello java"); } }

HTML Label Tag

The <label> tag is used to specify a label for an <input> element. It adds a label to a form control such as
text, email, password, textarea etc.

HTML Label Tag Example

Let's see the example of HTML label tag.

1. <label for="email">EMAIL-ID:<br /> <input type="email" value= name="emailid" size="30"

2. placeholder="Enter a valid email address"><br /><br />
3. <label for="phone">PHONE NO:<br /> <input type="text" value= name="phno" size="30"
4. maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]{10}"><br /><br />

Output:

EMAIL-ID:

PHONE NO:

Attributes of HTML Button Tag

45
 ACMS

<button> tag supports all global attributes and some specific additional attributes.

There is given a list of HTML button tag attributes.

Attribute Description

autofocus It specifies that a button should automatically get focus while the
loading of the page.

disabled It specifies that a button shuld be disabled.

form It specifies one or more forms that the button belongs to.

formaction It is used for submit type. It specifies where to send the form data
when form is submitted.

formmethod It specifies how to send form-data.

formenctype It specifies how form-data should be encoded before sending it to

server.

formnovalidate It specifies that the form data should not be validated on

submission.

formtarget It specifies that where to display the response after submitting the
form.

name It specifies the name of the button.

type It specifies the type of the button.

value It specifies the value of the button.

HTML hr tag
46
 ACMS

HTML <hr> tag is used to specify a paragraph-level thematic break in HTML document. It is used when
you abruptly change your topic in your HTML document. It draw a horizontal line between them. It is also
called a Horizontal Rule in HTML.

HTML hr tag
1. <h2>HTML</h2>
2. <p>HTML is a language for describing web pages.</p>
3. <hr/>
4. <h2>HR Tag </h2>
5. <p> HR tag is used to draw a horizontal line within the texts to sepate content.<p>

Output:

HTML
HTML is a language for describing web pages.

HR Tag
HR tag is used to draw a horizontal line within the texts to separate content.

HTML br tag
HTML <br> tag or element is used to break line in a paragraph.

It is generally used in poem or address where the division of line is necessary.

It is an empty tag, means it does not need a company of end tag.

Don't use br tag for margin between two paragraphs, use CSS margin property instead.

HTML Script Tag

HTML script tag is used to specify client-side script such as JavaScript. It facilitate you to place a script
within your HTML document.

JavaScript is used for image manipulation, form validation, and dynamic content.
47
 ACMS

The syntax of script tag is given below:

1. <script>
2. //code to be executed
3. </script>

Attributes of HTML script tag

Attribute Description Compatibility
src It specifies the URL of an external script file. HTML 4.01, HTML5

type It specifies the media type of the script. HTML 4.01

async It is a boolean value which specifies that the script HTML5

is executed asynchronously.

defer It is a boolean value which is used to indicate that HTML 4.01, HTML5
script is executed after document has been parsed.

Usage of script tag

There can be two usage of HTML script tag:

1. to embed script code

2. to link script file

Embed script code

The script tag can be used within <body> or <head> tag to embed the scripting code. Let's see the
example to have script tag within HTML body.

1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for atharva learners")
3. </script>

Output:

JavaScript is a simple language for atharva learners

48
 ACMS

Let's see the example to have script tag within HTML head tag.

1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Atharva");
4. }
5. </script>

Link script file

The script tag can be used to link external script file by src attribute. It must be used within the <head>
tag only.

1. <script type="text/javascript" src="message.js" />

49
 ACMS

HTML5
HTML5 provides details of all 40+ HTML tags including audio, video, header, footer, data, datalist, article
etc. This HTML tutorial is designed for beginners and professionals.

HTML5 is a next version of HTML. Here, you will get some brand new features which will make HTML
much easier. These new introducing features make your website layout clearer to both website designers
and users. There are some elements like <header>, <footer>, <nav> and <article> that define the layout of
a website.

Why use HTML5

It is enriched with advance features which makes it easy and interactive for designer/developer and users.

It allows you to play a video and audio file.

It allows you to draw on a canvas.

It facilitate you to design better forms and build web applications that work offline.

It provides you advance features for that you would normally have to write JavaScript to do.

The most important reason to use HTML 5 is, we believe it is not going anywhere. It will be here to serve
for a long time according to W3C recommendation.

HTML 5 Example
Let's see a simple example of HTML5.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements) provide a better

50
 ACMS

document structure. This list shows all HTML 5 tags in alphabetical order with description.

HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three
supported file format for HTML 5 audio tag.

1. mp3
2. wav
3. ogg

HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar technologies are used to
play the multimedia items.

This table defines that which web browser supports which audio file format.

Browser mp3 wav ogg

Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes* yes yes

Opera no yes yes

Apple Safari yes yes no

HTML Audio Tag Example

Let's see the code to play mp3 file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>

Output:

Let's see the example to play ogg file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.ogg" type="audio/ogg">

51
 ACMS

3. Your browser does not support the html audio tag.

4. </audio>

Attributes of HTML Audio Tag

There is given a list of HTML audio tag.

Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time when it is
completed.

muted It is used to mute the audio output.

preload It specifies the author view to upload audio file when the page loads.

src It specifies the source URL of the audio file.

HTML Audio Tag Attribute Example

Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.

1. <audio controls autoplay loop>

2. <source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format

The available MIME type HTML audio tag is given below.

Audio Format MIME Type

mp3 audio/mpeg

ogg audio/ogg

wav audio/wav

HTML Meter Tag

52
 ACMS

HTML <meter> tag is used to measure data within a given range. It defines a scalar
measurement with range. It is also known as a gause.

It should be used to display disk usage, voting population etc.

The HTML meter tag is new in HTML5 so you must use new browsers.

Attributes of HTML Meter Tag

HTML <meter> tag supports the global and event attributes as well as some specific
attributes.

Attributes Description

It is a mandatory attribute which is used to specify a value in numbers. The number

value
may be integer or floating point number.

form It specifies one or more forms to which meter element belongs to.

high It specifies a range that is considered as high value.

low It specifies a range that is considered as low value.

max It specifies the maximum value defined in the range.

min It specifies the minimum value defined in the range.

optimum It specifies the optimum value for the gauge.It is an optional attribute.

HTML Meter Tag Example

Let's see the progress example with min, max and value attributes.

1. <p>Display a gauge:</p>
2. <meter value="30" min="1" max="100">30 out of 100</meter><br>
3. <meter value="0.8">80%</meter>

Output:

Display a gauge:

30 out of 100
80%

53
 ACMS

Styling Meter
You can apply CSS code on meter tag.

1. meter{
2. width: 300px;
3. height: 30px;
4. }

Output:

HTML Datalist Tag

The HTML <datalist> tag is is used to provide an auto complete feature on form
element. It provides a list of predefined options to the users to select data.

The datalist tag is introduced in HTML5.

The <datalist> tag should be used with an <input> element that contains a "list" attribute.
The value of "list" attribute is linked with the datalist id.

The HTML datalist tag supports global and event attributes also.

HTML datalist tag example

Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list of
cricketers starting with A letter.

1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18. </label>

54
 ACMS

Output:

Attribute Description

open It specifies that the details will be displayed (open) to the user.

HTML details tag example

1. <details>
2. <summary>Copyright 2011-2014.</summary>
3. <p> - by atharva. All Rights Reserved.</p>
4. <p>All content and graphics on this web site are the property of the atharva.com</p>
5. </details>
6. <p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>

Output:

Copyright 2011-2014.

Note: The details tag is currently only supported in Opera, Chrome, and in Safari 6.

55
ACMS

56
 ACMS

CSS Index

o CSS Display o CSS Visibility

CSS Tutorial
o CSS Float o CSS Counter
o Introduction to CSS o CSS Font
CSS Advance
o What is CSS o CSS Line Height
o CSS Syntax o CSS Margin o CSS Animation
o CSS Selector o CSS Opacity o CSS Gradient
o How to Add CSS o CSS Overflow o CSS Transition
o Inline CSS o CSS Padding o CSS Tooltips
o Internal CSS o CSS Position o CSS Tooltip
o External CSS o CSS Vertical Align Animation

o CSS Comments o CSS White Space CSS Design

o CSS Width
CSS Properties
o CSS Word Wrap o CSS Layout

o CSS Background o CSS Outline o CSS Table

o CSS Border

57
 ACMS

What is CSS
CSS is an acronym stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It
can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

What does CSS do

o You can add new looks to your old HTML documents.

o You can completely change the look of your website with only a few changes in CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had to be
repeated on every web page. This was a very long process. For example: If you are developing a large
website where fonts and color information are added on every single page, it will be become a long and
expensive process. CSS was created to solve this problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website by
changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the website.

CSS Syntax
A CSS rule set contains a selector and a declaration block.

58
 ACMS

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon.
For the above example, there are two declarations:

1. color: yellow;

2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color
property.

1. Selector{Property1: value1; Property2: value2; ..........;}

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector

3. CSS Class Selector

4. CSS Universal Selector

5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

59
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

17. Output:
18. This style will be applied on every paragraph.
19. Me too!
20. And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
60
 ACMS

12. <p id="para1">Hello atharva.com</p>

13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

Output:

Hello atharva.com

This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Output:

61
 ACMS

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should use the
element name with class selector.

Let's see an example.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Output:

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

1. <!DOCTYPE html>
2. <html>

62
 ACMS

3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

Let's see the CSS code without group selector.

1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;
63
 ACMS

7. color: blue;
8. }
9. p {
10. text-align: center;
11. color: blue;
12. }

As you can see, you need to define CSS properties for all the elements. It can be grouped in following
ways:

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

Let's see the full example of CSS group selector.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello atharva.com</h1>
13. <h2>Hello atharva.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>

Output:

Hello atharva.com
Hello atharva.com (In smaller font)

This is a paragraph.
64
 ACMS

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There
are three ways to insert CSS in HTML documents.

1. Inline CSS

2. Internal CSS

3. External CSS

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.

For example:

1. <p style="color:blue">Hello CSS</p>

For more visit here: Inline CSS

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page.
It is written inside the style tag within head section of html.

For example:

1. <style>
2. p{color:blue}
3. </style>

For more visit here: Internal CSS

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css
file. Its extension must be .css for example style.css.

For example:

1. p{color:blue}

65
 ACMS

You need to link this style.css file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.

For more visit here: External CSS

CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users who reads your
code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. color: blue;
7. /* This is a single-line comment */
8. text-align: center;
9. }
10. /* This is
11. a multi-line
12. comment */
13. </style>
14. </head>
15. <body>
16. <p>Hello atharva.com</p>
17. <p>This statement is styled with CSS.</p>
18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>
19. </body>
20. </html>

CSS Background
CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

66
 ACMS

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello atharva. This is an example of CSS background-color.</p>
13. </body>
14. </html>

Output:

My first CSS page.

Hello atharva. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By default the
image covers the entire element. You can set the background image for a page like this.

67
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello atharva.com</h1>
13. </body>
14. </html>

Note: The background image should be chosen according to text color. The bad combination of text and
background image may be a cause of poor designed and not readable webpage.

3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello atharva.com</h1>

68
 ACMS

13. </body>
14. </html>

background-repeat: repeat-y;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello atharva.com</h1>
13. </body>
14. </html>

4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll with the
rest of the page in browser window. If you set fixed the background image then the image will not move
during scrolling in the browser. Let?s take an example with fixed background image.

1. background: white url('bbb.gif');

2. background-repeat: no-repeat;
3. background-attachment: fixed;

5) CSS background-position
The background-position property is used to define the initial position of the background image. By
default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
69
 ACMS

2. top

3. bottom

4. left

5. right

1. background: white url('good-morning.jpg');

2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an element. The
CSS border properties are given below

o border-style

o border-color

o border-width

o border-radius

1) CSS border-style
The Border style property is used to specify the border type which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

Solid It is used to define a solid border.

70
 ACMS

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-color value.

ridge It defines a 3d ridged border. effect is generated according to border-color value.

inset It defines a 3d inset border. effect is generated according to border-color value.

outset It defines a 3d outset border. effect is generated according to border-color value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}
14. p.hidden {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>
27. <p class="hidden">A hidden border.</p>
71
 ACMS

28. </body>
29. </html>

Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also use the one of
the three pre-defined values, thin, medium or thick to set the width of the border.

Note: The border-width property is not used alone. It is always used with other border properties
like "border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
6. border-style: solid;
7. border-width: 5px;
8. }
72
 ACMS

9. p.two {
10. border-style: solid;
11. border-width: medium;
12. }
13. p.three {
14. border-style: solid;
15. border-width: 1px;
16. }
17. </style>
18. </head>
19. <body>
20. <p class="one">Write your text here.</p>
21. <p class="two">Write your text here.</p>
22. <p class="three">Write your text here.</p>
23. </body>
24. </html>

3) CSS border-color
There are three methods to set the color of the border.

o Name: It specifies the color name. For example: "red".

o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".

o Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is inherited from the color
property of the element.

Note: The border-color property is not used alone. It is always used with other border properties
like "border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
6. border-style: solid;
7. border-color: red;

73
 ACMS

8. }
9. p.two {
10. border-style: solid;
11. border-color: #98bf21;
12. }
13. </style>
14. </head>
15. <body>
16. <p class="one">This is a solid red border</p>
17. <p class="two">This is a solid green border</p>
18. </body>
19. </html>

CSS Display
CSS display is the most important property of CSS which is used to control the layout of the element. It
specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the webpage is a
rectangular box and the CSS property defines the behavior of that rectangular box.

CSS Display default properties

default value

inherited

animation supporting

version

javascript syntax

Syntax
1. display:value;

CSS display values

74
 ACMS

There are following CSS display values which are commonly used.

1. display: inline;

2. display: inline-block;

3. display: block;

4. display: none;

1) CSS display inline

The inline element takes the required width only. It doesn't force the line break so the flow of text doesn't
break in inline example.

The inline elements are:

o <span>

o <a>

o <em>

o <b> etc.

Let's see an example of CSS display inline.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello atharva.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

75
 ACMS

Output:

Hello atharva.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2) CSS display inline-block

The CSS display inline-block element is very similar to inline element but the difference is that you are
able to set the width and height.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline-block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello atharva.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello atharva.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

3) CSS display block

The CSS display block element takes as much as horizontal space as they can. Means the block element
takes the full available width. They make a line break before and after them.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
76
 ACMS

5. p {
6. display: block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello atharva.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello atharva.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

5) CSS display none

The "none" value totally removes the element from the page. It will not take any space.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.hidden {
6. display: none;
7. }
8. </style>
9. </head>

77
 ACMS

10. <body>
11. <h1>This heading is visible.</h1>
12. <h1 class="hidden">This is not visible.</h1>
13. <p>You can see that the hidden heading does not contain any space.</p>
14. </body>
15. </html>

Output:

This heading is visible.

You can see that the hidden heading does not contain any space.

Other CSS display values

Property-value Description

flex It is used to display an element as an block-level flex container. It is new in css

inline-flex It is used to display an element as an inline-level flex container. It is new in css

inline-table It displays an element as an inline-level table.

list-Item It makes the element behave like a <li> element.

table It makes the element behave like a <table> element.

table-caption It makes the element behave like a <caption> element.

table-column-group It makes the element behave like a <colgroup> element.

table-header-group It makes the element behave like a <thead> element.

table-footer-group It makes the element behave like a <tfoot> element.

78
 ACMS

table-row-group It makes the element behave like a <tbody> element.

table-cell It makes the element behave like a <td> element.

table-row It makes the element behave like a <tr> element.

table-column It makes the element behave like a <col> element.

CSS Float
The CSS float property is a positioning property. It is used to push an element to the left or right, allowing
other element to wrap around it. It is generally used with images and layouts.

To understand its purpose and origin, let's take a look to its print display. In the print display, image is set
into the page such that text wraps around it as needed.

Its web layout is also just similar to print layout.

79
 ACMS

How it works
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.

1. A floated element may be moved as far to the left or the right as possible. Simply, it means that a
floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.

4. If the image floated to the right, the texts flow around it, to the left and if the image floated to the
left, the text flows around it, to the right.

CSS Float Properties

Property Description Values

clear The clear property is used to avoid left, right, both, none, inherit
elements after the floating
elements which flow around it.

float It specifies whether the box left, right, none, inherit

should float or not.

80
 ACMS

CSS Float Property Values

Value Description

none It specifies that the element is not floated, and will be displayed just where it occurs
in the text. this is a default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

initial It sets the property to its initial value.

inherit It is used to inherit this property from its parent element.

CSS Float Property Example

Let's see a simple example to understand the CSS float property.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img {
6. float: right;
7. }
8. </style>
9. </head>
10. <body>
11. <p>The following paragraph contains an image with style
12. <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
13. <img src="good-morning.jpg" alt="Good Morning Friends"/>
14. This is some text. This is some text. This is some text.
15. This is some text. This is some text. This is some text.
16. This is some text. This is some text. This is some text.
17. This is some text. This is some text. This is some text.

81
 ACMS

18. This is some text. This is some text. This is some text.
19. This is some text. This is some text. This is some text.
20. This is some text. This is some text. This is some text.
21. This is some text. This is some text. This is some text.
22. This is some text. This is some text. This is some text.
23. This is some text. This is some text. This is some text.
24. This is some text. This is some text. This is some text.
25. This is some text. This is some text. This is some text.
26. This is some text. This is some text. This is some text.
27. </p>
28. </body>
29. </html>

CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can change the
text size, color, style and more. You have already studied how to make text bold or underlined. Here, you
will also know how to resize your font using percentage.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone attribute)

2. CSS Font family: This property is used to change the face of the font.

3. CSS Font size: This property is used to increase or decrease the size of the font.

4. CSS Font style: This property is used to make the font bold, italic or oblique.

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to
change the color of the text.

There are three different formats to define a color:

o By a color name

o By hexadecimal value

o By RGB

In the above example, we have defined all these formats.

82
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { color: red; }
9. h2 { color: #9000A1; }
10. p { color:rgb(0, 220, 98); }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This is heading 1</h1>
16. <h2>This is heading 2</h2>
17. <p>This is a paragraph.</p>
18. </body>
19. </html>

Output:

This is heading 1
This is heading 2

This is a paragraph.

2) CSS Font Family

CSS font family can be divided in two types:

o Generic family: It includes Serif, Sans-serif, and Monospace.

o Font family: It specifies the font family name like Arial, New Times Roman etc.

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman, Georgia
etc.

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-
serif: Arial, Verdana etc.

83
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { font-family: sans-serif; }
9. h2 { font-family: serif; }
10. p { font-family: monospace; }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This heading is shown in sans-serif.</h1>
16. <h2>This heading is shown in serif.</h2>
17. <p>This paragraph is written in monospace.</p>
18. </body>
19. </html>

Output:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.

3) CSS Font Size

84
 ACMS

CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

1. <html>
2. <head>
3. <title>Practice CSS font-size property</title>
4. </head>
5. <body>
6. <p style="font-size:xx-small;"> This font size is extremely small.</p>
7. <p style="font-size:x-small;"> This font size is extra small</p>
8. <p style="font-size:small;"> This font size is small</p>
9. <p style="font-size:medium;"> This font size is medium. </p>
10. <p style="font-size:large;"> This font size is large. </p>
85
 ACMS

11. <p style="font-size:x-large;"> This font size is extra large. </p>

12. <p style="font-size:xx-large;"> This font size is extremely large. </p>
13. <p style="font-size:smaller;"> This font size is smaller. </p>
14. <p style="font-size:larger;"> This font size is larger. </p>
15. <p style="font-size:200%;"> This font size is set on 200%. </p>
16. <p style="font-size:20px;"> This font size is 20 pixels. </p>
17. </body>
18. </html>

Output:

This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

This font size is large.

This font size is extra large.

This font size is extremely

large.
This font size is smaller.

This font size is larger.

This font size is set on 200%.

This font size is 20 pixels.

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique, or normal.

86
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h2 { font-style: italic; }
9. h3 { font-style: oblique; }
10. h4 { font-style: normal; }
11. }
12. </style>
13. </head>
14. <body>
15. <h2>This heading is shown in italic font.</h2>
16. <h3>This heading is shown in oblique font.</h3>
17. <h4>This heading is shown in normal font.</h4>
18. </body>
19. </html>

Output:

This heading is shown in italic font.

This heading is shown in oblique font.
This heading is shown in normal font.

CSS Margin
CSS Margin property is used to define the space around elements. It is completely transparent and
doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties. You can also
change all properties at once by using shorthand margin property.

There are following CSS margin properties:

CSS Margin Properties

87
 ACMS

Property Description

margin This property is used to set all the properties in one

declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description

Auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.

% It is used to define a margin in percent of the width of containing element.

inherit It is used to inherit margin from parent element.

Note: You can also use negative values to overlap content.

CSS margin Example

You can define different margin for different sides for an element.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;

88
 ACMS

7. }
8. p.ex {
9. margin-top: 50px;
10. margin-bottom: 50px;
11. margin-right: 100px;
12. margin-left: 100px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This paragraph is not displayed with specified margin. </p>
18. <p class="ex">This paragraph is displayed with specified margin.</p>
19. </body>
20. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

Margin: Shorthand Property

CSS shorthand property is used to shorten the code. It specifies all the margin properties in one property.

There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;

2. margin: 50px 100px 150px;

3. margin: 50px 100px;

4. margin 50px;

1) margin: 50px 100px 150px 200px;

It identifies that:

89
 ACMS

top margin value is 50px

right margin value is 100px

bottom margin value is 150px

left margin value is 200px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px 150px 200px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

2) margin: 50px 100px 150px;

90
 ACMS

It identifies that:

top margin value is 50px

left and right margin values are 100px

bottom margin value is 150px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px 150px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

3) margin: 50px 100px;

91
 ACMS

It identifies that:

top and bottom margin values are 50px

left and right margin values are 100px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

4) margin: 50px;
It identifies that:

top right bottom and left margin values are 50px

1. <!DOCTYPE html>
2. <html>

92
 ACMS

3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple word, you can say
that it specifies the clarity of the image.

In technical terms, Opacity is defined as degree in which light is allowed to travel through an object.

How to apply CSS opacity setting

Opacity setting is applied uniformly across the entire object and the opacity value is defined in term of
digital value less than 1. The lesser opacity value displays the greater opacity. Opacity is not inherited.

CSS Opacity Example: transparent image

93
 ACMS

Let's see a simple CSS opacity example of image transparency.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.trans {
6. opacity: 0.4;
7. filter: alpha(opacity=40); /* For IE8 and earlier */
8. }
9. </style>
10. </head>
11. <body>
12. <p>Normal Image</p>
13. <img src="rose.jpg" alt="normal rose">
14. <p>Transparent Image</p>
15. <img class="trans" src="rose.jpg" alt="transparent rose">
16. </body>
17. </html>

Output:

Normal Image

Transparent Image

94
 ACMS

Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for transparency. The
opacity value ranges from 0.1 to 1.0. Lower value produces the greater opacity.

Note 2: The older versions of IE use filter: alpha(opacity=x). Here x value varies from 0 to 100.
Lower value produces the greater opacity.

CSS Overflow
The CSS overflow property specifies how to handle the content when it overflows its block level container.

We know that every single element on a page is a rectangular box and the size, positioning and behavior
of these boxes are controlled via CSS.

Let's take an example: If you don't set the height of the box, it will grow as large as the content. But if you
set a specific height or width of the box and the content inside cannot fit then what will happen. The CSS
overflow property is used to overcome this problem. It specifies whether to clip content, render scroll
bars, or just display content.

CSS Overflow property values

Value Description

Visible It specifies that overflow is not clipped. it renders outside the element's box.this is
a default value.

hidden It specifies that the overflow is clipped, and rest of the content will be invisible.

Scroll It specifies that the overflow is clipped, and a scroll bar is used to see the rest of
the content.

Auto It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the
content.

inherit It inherits the property from its parent element.

Initial It is used to set the property to its initial value.

95
 ACMS

CSS Overflow Example

Let's see a simple CSS overflow property.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div.scroll {
6. background-color: #00ffff;
7. width: 100px;
8. height: 100px;
9. overflow: scroll;
10. }
11.
12. div.hidden {
13. background-color: #00FF00;
14. width: 100px;
15. height: 170px;
16. overflow: hidden;
17. }
18. </style>
19. </head>
20. <body>
21. <p>The overflow property specifies what to do if the content of an element exceeds the size of the eleme
nt's box.</p>
22. <p>overflow:scroll</p>
23. <div class="scroll">You can use the overflow property when you want to have better control of the layout.

24. The default value is visible.</div>

25. <p>overflow:hidden</p>
26. <div class="hidden">You can use the overflow property when you want to have better control of the layout.

27. The default value is visible.</div>

28. </body>
29. </html>

Output:

96
 ACMS

The overflow property specifies what to do if the content of an element exceeds the size of the element's
box.

overflow:scroll

You can use the overflow property when you want to have better control of the layout. The default value is
visible.

overflow:hidden

You can use the overflow property when you want to have better control of the layout. The default value
is

CSS Padding
CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS
padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can
also change all properties at once by using shorthand padding property.

CSS Padding Properties

Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.

CSS Padding Values

97
 ACMS

Value Description

Length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.

CSS Padding Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.padding {
9. padding-top: 50px;
10. padding-right: 100px;
11. padding-bottom: 150px;
12. padding-left: 200px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This is a paragraph with no specified padding.</p>
18. <p class="padding">This is a paragraph with specified paddings.</p>
19. </body>
20. </html>

Output:

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.

98
 ACMS

CSS Position
The CSS position property is used to set position for an element. it is also used to place an element
behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These properties can be used
only after position property is set first. A position element's computed position property is relative,
absolute, fixed or sticky.

Let's have a look at following CSS positioning:

1. CSS Static Positioning

2. CSS Fixed Positioning

3. CSS Relative Positioning

4. CSS Absolute Positioning

1) CSS Static Positioning

This is a by default position for HTML elements. It always positions an element according to the normal
flow of the page. It is not affected by the top, bottom, left and right properties.

2) CSS Fixed Positioning

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned
relative to the browser window, and doesn't move even you scroll the window.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.pos_fixed {
6. position: fixed;
7. top: 50px;
8. right: 5px;
9. color: blue;
10. }
11. </style>
12. </head>
13. <body>
14.

99
 ACMS

15. <p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p

16. ><p>........</p><p>........</p><p>........</p><p>........</p>
17. <p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
18. <p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text...</p>
19. <p class="pos_fixed">This is the fix positioned text.</p>
20. </body>
21. </html>

3) CSS Relative Positioning

The relative positioning property is used to set the element relative to its normal position.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2.pos_left {
6. position: relative;
7. left: -30px;
8. }
9. h2.pos_right {
10. position: relative;
11. left: 30px;
12. }
13. </style>
14. </head>
15. <body>
16. <h2>This is a heading with no position</h2>
17. <h2 class="pos_left">This heading is positioned left according to its normal position</h2>
18. <h2 class="pos_right">This heading is positioned right according to its normal position</h2>
19. <p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>
20. <p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
21. </body>
22. </html>

4) CSS Absolute Positioning

100
 ACMS

The absolute positioning is used to position an element relative to the first parent element that has a
position other than static. If no such element is found, the containing block is HTML.

With the absolute positioning, you can place an element anywhere on a page.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2 {
6. position: absolute;
7. left: 150px;
8. top: 250px;
9. }
10. </style>
11. </head>
12. <body>
13. <h2>This heading has an absolute position</h2>
14. <p> The heading below is placed 150px from the left and 250px from the top of the page.</p>
15. </body>
16. </html>

CSS Vertical Align

The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is
the one of the self-explanatory property of CSS. It is not very easy property for beginners.

What it does
1. It is applied to inline or inline-block elements.

2. It affects the alignment of the element, not its content. (except table cells)

3. When it applied to the table cells, it affect the cell contents, not the cell itself.

101
 ACMS

CSS Vertical Align Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.top {
6. vertical-align: text-top;
7. }
8. img.bottom {
9. vertical-align: text-bottom;
10. }
11. </style>
12. </head>
13. <body>
14. <p><img src="good-
morning.jpg" alt="Good Morning Friends"/> This is an image with a default alignment.</p>
15. <p><img src="good-
morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text-
top alignment.</p>
16. <p><img src="good-
morning.jpg" class="bottom" alt="Good Morning Friends"/> This is an image with a text-
bottom alignment.</p>
17. </body>
18. </html>

Output:

This is an image with a default alignment.

102
 ACMS

This is an image with a text-top alignment.

This is an image with a text-bottom alignment.

CSS White Space

The CSS white space property is used to specify how to display the content within an element. It is
used to handle the white spaces inside an element.

CSS White Space values

There are many white space values that can be used to display the content inside an element.

Value Description

normal This is a default value. in this value, text is wrapped when necessary. sequences
of white space will collapse into a single whitespace.

nowrap Sequences of white space will collapse into a single whitespace. in this value,
text will never wrap to the next line and only break when <br> tag is used.

Pre Whitespace is preserved by the browser. it is act like html <pre> tag. text will only
wrap on line breaks.

pre-line Sequences of white space will collapse into a single whitespace. texts are
wrapped when necessary, and on line break.

pre-wrap Whitespace is preserved by the browser. texts are wrapped when necessary, and

103
 ACMS

on line break.

initial It sets this property to its default value.

inherit It inherits this property from its parent element.

CSS White Space Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. white-space: nowrap;
7. }
8. </style>
9. </head>
10. <body>
11. <p>
12. Write some text..Write some text..Write some text..
13. Write some text..Write some text..Write some text..
14. Write some text..Write some text..Write some text..
15. Write some text..Write some text..Write some text..
16. Write some text..Write some text..Write some text..
17. </p>
18. </body>
19. </html>

CSS Width
The CSS width property is used to set the width of the content area of an element.

It does not include padding borders or margins. It sets width of the area inside the padding, border, and
margin of the element.

CSS width values

Value Description

104
 ACMS

auto It is a default value. it is used to calculate the width.

length It is used to define the width in px, cm etc.

% It defines the width of the containing block in %.

initial It is used to set the property to its default value.

inherit It is used to inherit the property from its parent element.

CSS Width Example: width in px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.normal {
6. width: auto;
7. }
8. img.big {
9. width: 150px;
10. }
11. p.ex {
12. height: 150px;
13. width: 150px;
14. }
15. </style>
16. </head>
17. <body>
18. <img class="normal" src="good-morning.jpg" width="95" height="84"><br>
19. <img class="big" src="good-morning.jpg" width="95" height="84">
20. <p class="ex">The height and width of this paragraph is 150px.</p>
21. <p>This is a paragraph.</p>
22. </body>
23. </html>

105
 ACMS

Output:

The height and width of this paragraph is 150px.

This is a paragraph.

CSS Width Example: width in %

The percent width is a measurement unit for the containing block. It is great for images.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.normal {
6. width: auto;
7. }
8. img.big {
9. width: 50%;
10. }
11. img.small {
12. width: 10%;
13. }
14. </style>
15. </head>
16. <body>
17. <img class="normal" src="good-morning.jpg" width="95" height="84"><br>
18. <img class="big" src="good-morning.jpg" width="95" height="84"><br>
19. <img class="small" src="good-morning.jpg" width="95" height="84">
20. </body>

106
 ACMS

21. </html>

Output:

CSS Outline
CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to
get visual attention.

It is as easy as to apply as a border.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style type="text/css">
4. .box {
5. background-color: #eee;
6. outline: 3px solid red;
7. border: 3px solid lightgreen;
8. padding: 5px 10px;
9. }
10. </style>
11. <div class="box">Welcome to Atharva</div>
12. </body>
13. </html>

107
 ACMS

Difference between Border and Outline

At first glance, border and outline look similar, but there are some very important differences between
them:

o It is not possible to apply a different outline width, style and color for the four sides of an element
while in border; you can apply the provided value for all four sides of an element.

o The border is a part of element's dimension while the outline is not the part of element's
dimension. Means, it doesn't matter how thick an outline you apply to the element, the
dimensions of it won't change.

The outline property is a shorthand property. It can be divided into outline-width, outline-style and outline-
color properties. It facilitates you to use any of the property alone, if you need it.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style type="text/css">
4. .box {
5. background-color: #eee;
6. border: 3px solid Lightgreen;
7. padding: 5px 10px;
8. outline-width: 3px;
9. outline-style: solid;
10. outline-color: red;
11. }
12. </style>
13. <div class="box">Welcome to Atharva</div>
14. </body>
15. </html>

In the above example, you can see the three outline properties:

Outline-width:It is similar to margin and padding. It can be either an absolute value or a relative value or
one of the predefined outline width values i.e. thin, medium or thick. It is preferred to use either an
absolute value or a relative value because different browsers interpret differently while using predefined
outline width values like thin, medium or thick.

Outline-color:It specifies the color that you use for the outline. It supports all the colors available in HTML
and CSS.

Outline-style:In the above example, we have used only solid outline style while there are a lot of outline

108
 ACMS

style i.e. hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

Let's take an example to demonstrate the usage of different outline-styles.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style type="text/css">
4. .box {
5. outline-color: red;
6. outline-width: 4px;
7. margin: 10px;
8. float: left;
9. border: 2px solid lightgreen;
10. padding: 5px 10px;
11. }
12. </style>
13. <div class="box" style="outline-style: dashed;">This is dashed outline.</div>
14. <div class="box" style="outline-style: dotted;">This is dotted outline.</div>
15. <div class="box" style="outline-style: double;">This is double outline.</div>
16. <div class="box" style="outline-style: groove;">This is groove outline.</div>
17. <div class="box" style="outline-style: inset;">This is inset outline.</div>
18. <div class="box" style="outline-style: outset;">This is outset outline.</div>
19. <div class="box" style="outline-style: ridge;">This is ridge outline.</div>
20. <div class="box" style="outline-style: solid;">This is solid outline.</div>
21. </body>
22. </html>

Outline offset
The outline offset is used to create a distance between outline and border.

It takes a CSS length unit and the empty space between the border and the outline will be transparent and
then it takes the background color of the parent element. So you can see a visible difference between
outline and border.

Let's take an example to see the difference between outline and border.

See this example:

109
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <style type="text/css">
4. .box {
5. background-color: #eee;
6. outline: 3px solid red;
7. outline-offset: 6px;
8. border: 3px solid Lightgreen;
9. padding: 5px 10px;
10. }
11. </style>
12. <div class="box">Welcome to Atharva</div>
13. </body>
14. </html>

110
 ACMS

CSS Counters
CSS counters are similar to variables. These are maintained by CSS and those values can be incremented
by CSS rules to track how many times they are used.

CSS counters facilitate simple CSS based incrementing and display of a number for generated content.

CSS Counter Properties

Following is a list of properties that are used with CSS counter:

o counter-reset: It is used to create or reset a counter.

o counter-increment: It is used to increment the counter value.

o content: It is used to insert generated content.

o counter() or counters() function: It is used to add the value of a counter to an element.

Note:Before using a CSS counter, it must be created with counter-reset.

CSS Counter Example

Let's take an example to create a counter for a page and increment the counter value for each next
element.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. counter-reset: section;
7. }
8. h2::before {
9. counter-increment: section;
10. content: "Section " counter(section) ": ";
11. }
12. </style>
13. </head>
14. <body>

111
 ACMS

15. <h1>Example of CSS Counters:</h1>

16. <h2>Java Tutorial</h2>
17. <h2>HTML Tutorial</h2>
18. <h2>CSS Tutorial</h2>
19. <h2>Oracle Tutorial</h2>
20. <p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
21. </body>
22. </html>

Note: In the above example you can see that a counter is created for the page in the body selector
and it increments the counter value for each <h2> element and adds "Section <value of the
counter>:" to the beginning of each <h2> element.

CSS Nesting Counters

You can also create counters within the counter. It is called nesting of a counter. Let's take an example to
demonstrate nesting counter.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. counter-reset: section;
7. }
8. h1 {
9. counter-reset: subsection;
10. }
11. h1::before {
12. counter-increment: section;
13. content: "Section " counter(section) ". ";
14. }
15. h2::before {
16. counter-increment: subsection;
17. content: counter(section) "." counter(subsection) " ";
18. }
19. </style>
112
 ACMS

20. </head>
21. <body>
22. <h1>Java tutorials:</h1>
23. <h2>Core Java tutorial</h2>
24. <h2>Servlet tutorial</h2>
25. <h2>JSP tutorial</h2>
26. <h2>Spring tutorial</h2>
27. <h2>Hibernate tutorial</h2>
28.
29. <h1>Web technology tutorials:</h1>
30. <h2>HTML tutorial</h2>
31. <h2>CSS tutorial</h2>
32. <h2>jQuery tutorial</h2>
33. <h2>Bootstrap tutorial</h2>
34.
35. <h1>Database tutorials:</h1>
36. <h2>SQL tutorial</h2>
37. <h2>MySQL tutorial</h2>
38. <h2>PL/SQL tutorial</h2>
39. <h2>Oracle tutorial</h2>
40. <p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
41. </body>
42. </html>

Note:In the above example you can see that a counter is created for the section and another nesting
counter named subsection is created within section.

Different level of nesting counters

You can create outlined lists by using nesting counters. It facilitates you to insert a string between
different levels of nested counters.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. ol {

113
 ACMS

6. counter-reset: section;
7. list-style-type: none;
8. }
9.
10. li::before {
11. counter-increment: section;
12. content: counters(section,".") " ";
13. }
14. </style>
15. </head>
16. <body>
17. <h2>Different level of Nesting counters</h2>
18. <ol>
19. <li>item</li>
20. <li>item
21. <ol>
22. <li>item</li>
23. <li>item</li>
24. <li>item
25. <ol>
26. <li>item</li>
27. <li>item</li>
28. <li>item</li>
29. </ol>
30. </li>
31. <li>item</li>
32. </ol>
33. </li>
34. <li>item</li>
35. <li>item</li>
36. </ol>
37. <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
38. </body>
39. </html>

114
 ACMS

CSS Visibility
The CSS visibility property is used to specify whether an element is visible or not.

Note: An invisible element also take up the space on the page. By using display property you can create
invisible elements that don't take up space.

Syntax:

1. visibility: visible|hidden|collapse|initial|inherit;

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

hidden:It specifies that the element is invisible (but still takes up space).

collapse:It is used only for table elements. It is used to remove a row or column, but it does not affect the
table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

initial:It is used to set this property to its default value.

inherit:It is used to inherit this property from its parent element.

CSS Visibility Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.visible {
6. visibility: visible
7. }
8. h1.hidden {
9. visibility: hidden
10. }
11. </style>
12. </head>
13. <body>
14. <h1 class="visible">I am visible</h1>
115
 ACMS

15. <h1 class="hidden">I am invisible</h1>

16. <p><strong>Note:</strong> An invisible element also take up the space on the page.
17. By using display property you can create invisible elements that don't
18. take space.</p>
19. </body>
20. </html>

JavaScript Syntax:
1. object.style.visibility="hidden"

See the JavaScript example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #myDIV {
6. margin: auto;
7. width: 400px;
8. height: 200px;
9. background-color: lightpink;
10. border: 1px solid black;
11. }
12. </style>
13. </head>
14. <body>
15. <p>Click the "Try it" button to set the visibility property and hide the div element.</p>
16. <button onclick="myFunction()">Try it</button>
17. <div id="myDIV">This is my DIV element.</div>
18. <p><strong>Note:</strong> An invisible element also take up the space on the page. </p>
19. <script>
20. function myFunction() {
21. document.getElementById("myDIV").style.visibility = "hidden";
22. }
23. </script>
24. </body>
25. </html>
116
ACMS

117
 ACMS

CSS Animation
CSS Animation property is used to create animation on the webpage. It can be used as a replacement of
animation created by Flash and JavaScript.

CSS3 @keyframes Rule

The animation is created in the @keyframe rule. It is used to control the intermediate steps in a CSS
animation sequence.

What animation does

An animation makes an element change gradually from one style to another. You can add as many as
properties you want to add. You can also specify the changes in percentage.0% specify the start of the
animation and 100% specify its completion.

How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with selector; otherwise the
animation will have no effect.

The animation could be bound to the selector by specifying at least these two properties:

o The name of the animation

o The duration of the animation

CSS animation properties

Property Description

@keyframes It is used to specify the animation.

animation This is a shorthand property, used for setting all the properties,
except the animation-play-state and the animation-fill- mode
property.

animation-delay It specifies when the animation will start.

animation-direction It specifies if or not the animation should play in reserve on

alternate cycle.
118
 ACMS

animation-duration It specifies the time duration taken by the animation to complete

one cycle.

animation-fill-mode it specifies the static style of the element. (when the animation is
not playing)

animation-iteration- It specifies the number of times the animation should be played.

count

animation-play-state It specifies if the animation is running or paused.

animation-name It specifies the name of @keyframes animation.

animation-timing- It specifies the speed curve of the animation.

function

CSS animation example: changing background color

Let's see a simple CSS animation example that changes background color of rectangle from RED to
BLACK.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: green;}
}

119
 ACMS

/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>
<div></div>
</body>
</html>

CSS animation example: Moving Rectangle

Let's take another example to display animation with percentage value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. width: 100px;
7. height: 100px;
8. background: red;
9. position: relative;
10. -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
11. animation: myfirst 5s;
12. }
13. /* Chrome, Safari, Opera */
14. @-webkit-keyframes myfirst {
15. 0% {background:red; left:0px; top:0px;}
16. 25% {background:yellow; left:300px; top:0px;}
17. 50% {background:blue; left:200px; top:300px;}
18. 75% {background:green; left:0px; top:200px;}
19. 100% {background:red; left:0px; top:0px;}
20. }
21. /* Standard syntax */
120
 ACMS

22. @keyframes myfirst {

23. 0% {background:red; left:0px; top:0px;}
24. 25% {background:yellow; left:300px; top:0px;}
25. 50% {background:blue; left:300px; top:200px;}
26. 75% {background:green; left:0px; top:200px;}
27. 100% {background:red; left:0px; top:0px;}
28. }
29. </style>
30. </head>
31. <body>
32. <p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
33. <div></div>
34. </body>
35. </html>

CSS Gradient
CSS gradient is used to display smooth transition within two or more specified colors.

Why CSS Gradient

These are the following reasons to use CSS gradient.

o You don't have to use images to display transition effects.

o The download time and bandwidth usage can also be reduced.

o It provides better look to the element when zoomed, because the gradient is generated by the
browser.

There are two types of gradient in CSS3.

1. Linear gradients

2. Radial gradients

1) CSS Linear Gradient

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, you
must have to define two or more color stops. The color stops are the colors which are used to create a
smooth transition. Starting point and direction can also be added along with the gradient effect.
121
 ACMS

1. background: linear-gradient (direction, color-stop1, color-stop2.....);

(i) CSS Linear Gradient: (Top to Bottom)

Top to Bottom Linear Gradient is the default linear gradient. Let's take an example of linear gradient that
starts from top. It starts red and transitions to green.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #grad1 {
6. height: 100px;
7. background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
8. background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
9. background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
10. background: linear-gradient(red, green); /* Standard syntax (must be last) */
11. }
12. </style>
13. </head>
14. <body>
15. <h3>Linear Gradient - Top to Bottom</h3>
16. <p>This linear gradient starts at the top. It starts red, transitioning to green:</p>
17. <div id="grad1"></div>
18. </body>
19. </html>

Output:

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to green:

(ii) CSS Linear Gradient: (Left to Right)

The following example shows the linear gradient that starts from left and goes to right. It starts red from
left side and transitioning to green.

1. <!DOCTYPE html>
2. <html>

122
 ACMS

3. <head>
4. <style>
5. #grad1 {
6. height: 100px;
7. background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */
8. background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
9. background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
10. background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
11. }
12. </style>
13. </head>
14. <body>
15. <h3>Linear Gradient - Left to Right</h3>
16. <p>This linear gradient starts at the left. It starts red, transitioning to green:</p>
17. <div id="grad1"></div>
18. </body>
19. </html>

Output:

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to green:

(iii) CSS Linear Gradient: (Diagonal)

If you specify both the horizontal and vertical starting positions, you can make a linear gradient diagonal.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #grad1 {
6. height: 100px;
7. background: -webkit-linear-gradient(left top, red , green); /* For Safari 5.1 to 6.0 */
8. background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
9. background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
10. background: linear-gradient(to bottom right, red , green); /* Standard syntax (must be last) */
11. }
123
 ACMS

12. </style>
13. </head>
14. <body>
15. <h3>Linear Gradient - Diagonal</h3>
16. <p>This linear gradient starts at top left. It starts red, transitioning to green:</p>
17. <div id="grad1"></div>
18. </body>
19. </html>

Output:

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to green:

2) CSS Radial Gradient

You must have to define at least two color stops to create a radial gradient. It is defined by its center.

1. background: radial-gradient(shape size at position, start-color, ..., last-color);

(i) CSS Radial Gradient: (Evenly Spaced Color Stops)

Evenly spaced color stops is a by default radial gradient. Its by default shape is eclipse, size is farthest-
carner, and position is center.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #grad1 {
6. height: 150px;
7. width: 200px;
8. background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */
9. background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */
10. background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */
11. background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */
12. }
13. </style>
14. </head>
124
 ACMS

15. <body>
16. <h3>Radial Gradient - Evenly Spaced Color Stops</h3>
17. <div id="grad1"></div>
18. </body>
19. </html>

Output:

Radial Gradient - Evenly Spaced Color Stops

(ii) Radial Gradient: (Differently Spaced Color Stops)

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #grad1 {
6. height: 150px;
7. width: 200px;
8. background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */
9. background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */
10. background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */
11. background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */
12. }
13. </style>
14. </head>
15. <body>
16. <h3>Radial Gradient - Differently Spaced Color Stops</h3>
17. <div id="grad1"></div>
18. </body>
19. </html>

Output:

Radial Gradient - Differently Spaced Color Stops

CSS Transition
125
 ACMS

The CSS transitions are effects that are added to change the element gradually from
one style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

 The CSS property on which you want to add an effect.

 The time duration of the effect.

Let's take an example which defines transition effect on width property and duration of
3 seconds.

Note: If you don't specify the duration part, the transition will have no effect because its
default value is 0. The transition effect is started when you move cursor over an element.

Note: The transition property is not supported by IE9 and earlier version.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. width: 100px;
7. height: 100px;
8. background: orange;
9. -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
10. transition: width 1s;
11. }
12. div:hover {
13. width: 300px;
14. }
15. </style>
16. </head>
17. <body>
18. <div></div>
19. <p>Move the cursor over the div element above, to see the transition effect.</p>
20. </body>
21. </html>

Note: When you take mouse cursor out of the element, it gains its original style gradually.

CSS Multiple Transition Effect

It is used to add transition effect for more than one CSS property. If you want to add
transition effect on more than one property, separate those properties with a comma.

Let's take an example. Here, the transition effects on width, height and transformation.
126
 ACMS

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. padding:15px;
7. width: 150px;
8. height: 100px;
9. background: violet;
10. -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
11. transition: width 2s, height 2s, transform 2s;
12. }
13. div:hover {
14. width: 300px;
15. height: 200px;
16. -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
17. transform: rotate(360deg);
18. }
19. </style>
20. </head>
21. <body>
22. <div><b>Atharva.com</b><p> (Move your cursor on me to see the effect)</p></div>
23. </body>
24. </html>

CSS sticky
The CSS position property is used to set the position for an element. It is also used to place an item
behind another element and also useful for the scripted animation effect. The "position: sticky;" is
used to position the element based on the scroll position of the user.

This CSS property allows the elements to stick when the scroll reaches to a certain point. Depends
upon the scroll position, a sticky element toggles in between fixed and relative. The element will be
positioned relative until the specified position of offset is met in the viewport. Then, similar
to position: fixed, the element sticks in one place.

Let us try to understand this CSS property by using an illustration.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body{
6. text-align:center;
7. }
127
 ACMS

8. .stick{
9. position: sticky;
10. top:50px;
11. padding: 10px;
12. font-size:20px;
13. font-weight:bold;
14. background-color: lightblue;
15. border: 1px solid blue;
16. }
17. </style>
18. </head>
19. <body>
20. <h1>Scroll and see the effect!</h1>
21. <div class = "stick">Sticky Element</div>
22. <div style = "padding-bottom:2000px">
23. <h2>Hello World</h2>
24. <h2>Welcome to javaTpoint.com</h2>
25. </div>
26. </body>
27. </html>

CSS Tooltips
CSS Tooltips are a great way to display extra information about something when the
user moves the mouse cursor over an element.

Basic Tooltip Example

Let's create basic tooltip that appears when the cursor of the mouse moves over an
element.

See this example:

1. <!DOCTYPE html>
2. <html>

128
 ACMS

3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {
10. visibility: hidden;
11. width: 120px;
12. background-color: red;
13. color: #fff;
14. text-align: center;
15. border-radius: 6px;
16. padding: 5px 0;
17. position: absolute;
18. z-index: 1;
19. }
20. .tooltip:hover .tooltiptext {
21. visibility: visible;
22. }
23. </style>
24. <body style="text-align:center;">
25. <p>Move the mouse over the text below:</p>
26. <div class="tooltip">Hover over me
27. <span class="tooltiptext">This is tooltip text</span>
28. </div>
29. </body>
30. </html>

By using tooltips, you can display the position of the tooltip information in four ways:

 Top of the element

 Left side of the element
 Right side of the element
 Bottom of the element

Top Tooltip
The top tooltip specifies that if you move your mouse cursor over the element, the
tooltip information will be displayed on the top of the element.

See this example:

1. <!DOCTYPE html>
2. <html>
129
 ACMS

3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {
10. visibility: hidden;
11. width: 120px;
12. background-color: red;
13. color: #fff;
14. text-align: center;
15. border-radius: 6px;
16. padding: 5px 0;
17. position: absolute;
18. z-index: 1;
19. bottom: 100%;
20. left: 50%;
21. margin-left: -60px;
22. }
23. .tooltip:hover .tooltiptext {
24. visibility: visible;
25. }
26. </style>
27. <body style="text-align:center;">
28. <h2>Top Tooltip Example</h2>
29. <p>Move your mouse cursor over the below heading</p>
30. <div class="tooltip"><strong> Welcome to Atharva</strong>
31. <span class="tooltiptext">A solution of all technology.</span>
32. </div>
33. </body>
34. </html>

Bottom Tooltip
The bottom tooltip specifies that if you move your mouse cursor over the element, the
tooltip information will be displayed on the bottom of the element.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;

130
 ACMS

7. border-bottom: 1px dotted black;

8. }
9.
10. .tooltip .tooltiptext {
11. visibility: hidden;
12. width: 120px;
13. background-color: red;
14. color: #fff;
15. text-align: center;
16. border-radius: 6px;
17. padding: 5px 0;
18. position: absolute;
19. z-index: 1;
20. top: 100%;
21. left: 50%;
22. margin-left: -60px;
23. }
24. .tooltip:hover .tooltiptext {
25. visibility: visible;
26. }
27. </style>
28. <body style="text-align:center;">
29. <h2>Bottom Tooltip Example</h2>
30. <p>Move your mouse cursor over the below heading</p>
31. <div class="tooltip"><strong> Welcome to Atharva</strong>
32. <span class="tooltiptext">A solution of all technology.</span>
33. </div>
34. </body>
35. </html>

Left Tooltip
The left tooltip specifies that if you move your mouse cursor over the element, the
tooltip information will be displayed on the left side of the element.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {

131
 ACMS

10. visibility: hidden;

11. width: 120px;
12. background-color: red;
13. color: #fff;
14. text-align: center;
15. border-radius: 6px;
16. padding: 5px 0;
17. position: absolute;
18. z-index: 1;
19. top: -5px;
20. right: 105%;
21. }
22. .tooltip:hover .tooltiptext {
23. visibility: visible;
24. }
25. </style>
26. <body style="text-align:center;">
27. <h2>Left Tooltip Example</h2>
28. <p>Move your mouse cursor over the below heading</p>
29. <div class="tooltip"><strong> Welcome to Atharva</strong>
30. <span class="tooltiptext">A solution of all technology.</span>
31. </div>
32. </body>
33. </html>

Right Tooltip
The right tooltip specifies that if you move your mouse cursor over the element, the
tooltip information will be displayed on the right side of the element.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {
10. visibility: hidden;
11. width: 120px;
12. background-color: red;
13. color: #fff;
14. text-align: center;

132
 ACMS

15. border-radius: 6px;

16. padding: 5px 0;
17. position: absolute;
18. z-index: 1;
19. top: -5px;
20. left: 105%;
21. }
22. .tooltip:hover .tooltiptext {
23. visibility: visible;
24. }
25. </style>
26. <body style="text-align:center;">
27. <h2>Right Tooltip Example</h2>
28. <p>Move your mouse cursor over the below heading</p>
29. <div class="tooltip"><strong> Welcome to Atharva</strong>
30. <span class="tooltiptext">A solution of all technology.</span>
31. </div>
32. </body>
33. </html>

CSS Tooltip Animation/ Fade In Tooltips

The CSS fade in tooltip or tooltip animation is used to fade in the tooltip text when it is
about to visible. The CSS3 "transition" property along with "opacity" property is used o
attain fade in tooltip or tooltip animation. The animation time from being completely
invisible to 100% visible is specified in second.

Let's take an example to demonstrate the CSS tooltip animation. In this example, the
fade in time is 5 second.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .tooltip {
5. position: relative;
6. display: inline-block;
7. border-bottom: 1px dotted black;
8. }
9. .tooltip .tooltiptext {
10. visibility: hidden;
11. width: 120px;
12. background-color: red;
13. color: #fff;
14. text-align: center;
15. border-radius: 6px;
16. padding: 5px 0;
133
 ACMS

17. position: absolute;

18. z-index: 1;
19. bottom: 100%;
20. left: 50%;
21. margin-left: -60px;
22.
23. /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
24. opacity: 0;
25. transition: opacity 5s;
26. }
27. .tooltip:hover .tooltiptext {
28. visibility: visible;
29. opacity: 1;
30. }
31. </style>
32. <body style="text-align:center;">
33. <h2>Fade In Tooltip Example</h2>
34. <p>Move your mouse cursor over the below heading</p>
35. <div class="tooltip"><strong> Welcome to Atharva</strong>
36. <span class="tooltiptext">A solution of all technology.</span>
37. </div>
38. </body>
39. </html>

What is Responsive Web Design?

The term Responsive Web Design was given by Ethan Marcotte. It facilitates you to use
fluid grids, flexible images, and media queries to progressively enhance a web page for
different viewing contexts i.e. Desktop, Smartphone, Tablet etc.

What screen resolutions do you use while taking

screenshots?
Smartphone: 320px

Tablet: 768px

Netbook: 1024px

Desktop: 1600px

Let's take an example to see the simple use of media query:

This example specifies that if you resize your window less than 500px, the background
134
 ACMS

color will be changed.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
5. <style>
6. body {
7. background-color:yellow;
8. }
9.
10. @media only screen and (max-width: 500px) {
11. body {
12. background-color:green;
13. }
14. }
15. </style>
16. </head>
17. <body>
18. <p>If you resize the browser window and the width of this document is less than 500 pix
els, the background-color is "green", otherwise it is "yellow"</p>
19. </body>
20. </html>

135