0% found this document useful (0 votes)

21 views77 pages

HTML and Css Notes For Beginners

Uploaded by

Manisha kumari

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

21 views77 pages

HTML and Css Notes For Beginners

Uploaded by

Manisha kumari

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 77

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email –id: jauharinstituteinfotech@gmail.com

+918630879950
md.jakirmadh@gmail.com

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,Btech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIPT • PGDCA,TALLY • MCA,MBA,Mtech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • BSc,MSc
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email –id: jauharinstituteinfotech@gmail.com

Index of HTML-Programming Language

No HTML-Programming Language Page Nos

1 HTML Definition 1-2
HTML Definition , Type of Tag, Heading tags ,Write a program Hello word
2 Tags in HTML 3-4
b tag ,i tag , u,sup, sub, mark ,del ,p , strong ,br ,hr and attributes of hr tag,font
tag and attributes of font tag img tag and attributes of img tag
3 List in html Language 5-6
Definition of list , type of list , program of order , unorder ,definition list
4 Marquee and Table 7-9
Definition of Marquee and Attributes , Definition of Table and attributes
5 Links and Form
10-11
a Definition of link and attributes ,Definition form and attributes
b Input tag of html and attribute
11-15
c Registration form example
6 Multimedia 16-20
a Definition of multimedia and extension multimedia file
b Video tag and attributes,Source tag and attributes,Audio tag and attributes
c Object tag and attributes ,Emed tag and attributes
7 Ifram (inline fram) tag 21-22
a Definition of ifram and attributes and display google map and YouTube
video
8 Body and meta tag 23-25
a Define body tag and attributes , meta tag and attributes
9 Div tag and symbols 25-26
a Define div and attributes , definition of symbol and types
10 Projects 27-30

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

What is HTML 5:
HTML stands for Hypertext Markup Language . It was developed by Tim Berner Lee in 1990. It
is a language that defines the structure and content of web pages. HTML is used to create
dynamic and static web pages and is the foundation of the World Wide Web.

What does HTML do?

• HTML tells web browsers how to display text, images, and other content on a web page
• HTML provides the basic framework for displaying multimedia and text on the internet
• HTML uses markup tags to structure the content of a web page

How does HTML work?

• HTML uses markup tags to define elements such as headings, paragraphs, links, and
images
• HTML tags are enclosed by less than < and > greater than and it called tags.
• HTML tags can include attributes, which provide more information about the element
• HTML tags can be used with other technologies, such as CSS and JavaScript, to describe
the appearance and behavior of a web page

Hyper Text: It is a link text if you click any link then transfer particular place.
Markup: It means make up of selected tag and give attractive style there are some types of tag
as following.
Types of Tag:
There are two type tag as following.
1. Container Tag: It have open and close tag and written content between tag
Syntax:
Close Tag
<TagName>Content</TagName>

Open Tag
Example:
<h1>Content</h1>
<p>Paragraph</p> etc.
2. Empty Tag: This type tag does not have open tag and it have only close tag.
Syntax:
<TagName/>
Example: <hr/>
<br/> etc.

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
2
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Heading tag in HTML: There are 6 heading tag and range h1 to h6

<h1>Heading Tag 1</h1>

<h2>Heading Tag 2</h2>
 Largest Heading

<h3>Heading Tag 3</h3>

<h4>Heading Tag 4</h4>
<h5>Heading Tag 5</h5>
<h6>Heading Tag 6</h6>
Explain some Tag:
 Smallest Heading

• <!Doctype HTML>: This tag to describe about html 5 version to browser

• <html>: This is a root tag and include beginning of HTML file This tag is an open and
closed tag
• <head>: This tag to have header information of HTML file this tag may be used other
technology like that CSS , JavaScript ,Bootstrap etc.
• <title>: This is a sub tag of head and it used to display title name of file in web browser
• <body>: This tag is a special tag it have actual code of program to display web browser

<!—WAP to display hello by html -- >

<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1> Hello By HTML</h1>
</body>
</html>

Save file : Hello.html

Extension file: dot (.) html

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
3
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

• <b>: It used to bold any text in html page

<b>About JIIT Khandari </b>
• <i>: It provide italic style of text
<i>Welcome</i>
• <u>: It provide underline style of text
<u>Capital of India</u>
• <sup>: It provide superscript of text
A2+B2
A<sup>2</sup>B<sup>2</sup>
• <sub>: It provide subscript of text
H2O
H<sub>2</sub>O
• <Mark>: It provide highlight text in web page
Delhi is <mark>capital</mark> of India
• <del>: This tag is used to give strikethrough of Text
Mobile price <del>10000</del>=10000
• <p>: This tag is used to give paragraph
<p>Agra is a smart city</p>
• <strong>: This tag is used to give strong style of text
<strong>Agra </strong> is a smart city

• <br/>: This tag is used to provide line break

Nanme :Amit <br/>
City :Agra <br/>
• <hr/>: It is used to insert horizontal line
Attribute of <hr/> Tage

1. Color: To give color of hr line

2. Size:To give thickness of hr line
3. Align:To give postion of hr line like that left, right , center

<hr color=”red” size=”10px” align=”right”/>

• <font>: This tag is used to define font format in web page like that font color, size and
family
Attribute of <font> Tag:
1. Size: To give size of font
2. Color : To give color of font
3. Face: To give family of font

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
4
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Color format :
A color gives two type name wise and hexadecimal wise
Name wise: red , green , blue etc.
Hexadecimal wise :
Blue
Red

#00 00 00
Example: Green
#000000 Black #ff0000 Red #00ff00 Green #0000ff Blue #ffffff White

<!DOCTYPE HTML>
<html> Output screen
<head>
<title>Font</title>
</head>
<body>
<h1><font color="#ff0000" size="14px" face="algerian">Font attributes</font></h1>
</body>
</html>
• <img>: This tag is used to insert a picture in web page and it is an empty tag does not
have open tag.
Attributes of <img> Tag:
1. Width &Height: To give width and height of <Img> tag
2. Border : To give border of picture
3. Src (Source) : To give source of picture
4. Align: To give alignment of the image like that lift , right, center.
5. Hspace: To give horizontal space of image Output screen
6. Vspace: To give vertical space of image

<!DOCTYPE HTML>
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>Image attributes</h1> <img src="images/a.jpg" alt="sea" width="150px"
height="100px" hspace="20px" vspace="20px" />
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
5
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

List in html: List is a collection of data When do you want to display data in list format we can
use it. There are three type list as following.
1. Order list
2. Unorder list
3. Definition list
1).Order List: To display data in order list in web browser like that numeric , alphabetically ,
roman number .etc.
There are some tag as following.
• <ol> : To define order list
• <li> : To define list item
Attributes of order list
Type: To give type of list like that numeric , alphabetically , roman number .etc.
• Start : Where do you want stat list
Example 1:
 Output screen
<!DOCTYPE HTML>
<html>
<head>
<title>Order List</title>
</head>
<body>
<h1><font color="#ff0000">Color List</font></h1>
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

<h1><font color="#00ff00">Fruit List</font></h1>

<ol start="5">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ol>

<h1><font color="#0000ff">Programming List</font></h1>

<ol type="i">
<li>Java</li>
<li>Python</li>
<li>Web Development</li>
</ol>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
6
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

2).Unorder List: To display data in unorder list in web browser like that bullets ,circle ,square
,rectangle etc.
There are some tag as following.
• <ul> : To define unorder list
• <li> : To define list item
Attributes of unorder list
• Type: To give type of list like that bullets ,circle ,square ,rectangle etc.
Example 1:
Output screen

<!DOCTYPE html>
<html>
<head>
<title>Unoder List</title>
</head>
<body>
<h1><font color="#ff7080">Friend List</font></h1>
<ul>
<li>Zoya</li>
<li>Ankit</li>
<li>Salman</li>
</ul>

<h1><font color="#90ff60">Employee List</font></h1>

<ul type="square">
<li>Tarun Kumar</li>
<li>Nisha Chaudhary</li>
<li>Shivangi</li>
</ul>
</body>
</html>

3).Definition List: To display data in heading with description in web browser

There are some tag as following.
• <dl> : To define definition list
• <dt> : To define term or item of definition list
• <dd>: To define description data of definition list

<dl> <dt>Java </dt>

<dd>Java is a high level Programming Language</dd>
</dl>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<Marquee>:The HTML marquee tag is used to scroll text or images across a web page.
and direction up, down, left, or right and create news tickers, dynamic headers, or footers.
and draw attention to important information.
Attributes <marquee> Tags
• Direction: Specifies direction in which the marquee scrolls.
• Behavior: Defines behavior of marquee default value smooth , alternate
• Scrolldelay: Sets delay in milliseconds between each movement.
• Scrollamount: Sets amount or speed of scrolling at each interval in pixels.
• Loop: Provides how many times the marquee will loop.
• Width: Provides width of a marquee.
• Height: Provides height of a marquee.
• Bgcolor: Provides background color of a marquee.
• Vspave : To provides vertical space color of a marquee.
• Hspave : To provides horizontal space color of a marquee.

<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee behavior="alternate" direction="right" width="100%" height="30px" bgcolor="blue"
scrolldelay="200px">
<font color="white">JIIT is a best institute</font>
</marquee>
<marquee direction="up" width="200px" height="300px" scrollamount="10px">
<img src="Images/a.jpg" alt="">
</marquee>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
8
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Table:Table is a collection of rows and columns. This tag is used to display data in
rows and columns. there are some tag of table as following
1. <table>: This tag to defines Table.
2. <tr>: This tag to creates a row, which is a horizontal line in the table.
3. <th>:This tag to creates a header cell, which labels columns or provides
additional information about the data in the column.
4. <td>:This tag to define data of cell in Table, which contains the actual data.
• A Table data may be lists, paragraphs, forms, figures, preformatted text, other
tables, text, images, and links.

• When you're building a project that needs to represent data visually, HTML
tables are a good way to display information so it's easy to read and understand.

• You can customize HTML tables by adding row and column headings, and by
grouping rows together.
Attributes of <Table> tag:
1. Width and height: To give width and height of Table.
Padding
2. Border : To set border of Table.
3. Cellpadding : To give cell padding of table. Spacing
4. Cellspacing : To give space between cell of table.
5. Bgcolor : To give background color of table.
6. Align : To give align of table.
Example:
<!DOCTYPE html>
<html>
<head> <title>Table</title>
</head>
<body>
<table border="5px" bgcolor="silver" width="200px" height="200px"
cellpadding="5px" cellspacing="3px"> <tr> <th>Rno</th>
<th>Name</th>
<th>Course</th>
</tr><tr>
<td>101</td>
<td>Sumit</td>
<td>BCA</td> </tr></table></body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
9
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="5px" bgcolor="silver" width="200px" height="200px" cellpadding="5px"
cellspacing="3px">
<tr>
<th colspan="3">Welcome</th>
</tr>
<tr>
<td>1</td>
<td rowspan="3"><img src="Images/a.jpg" width="150px" height="100px" ></td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
<tr>
<th colspan="3">Thanks</th>
</tr>
</table>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
10
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Link in HTML: Links are Hyperlinks to click any text and image and transfer controller
particular page.
<a> Tag :It is an anchor tag and it used to define link in web page and default unvisited link of
color blue and visited link color purple.
Attributes of <a> tag:
1. Name: To give name of anchor tag
2. href: To give reference or source path of anchor tag
3. target : To set target of links document should be opened, such as in a new tab _blank
and default self.
4. title: To Provides text that appears when the user hovers over a link.
5. rel: It Specifies the relationship between the source and the target document.
Auto download links:
Example:
<a href=”notes.pdf”>Coaching notes</a>
<a href=”bca.txt”>About BCA</a>
<a href=”Img.jpg”>Photo</a>

<!DOCTYPE html>
<html>
<head>
<title>Links </title>
</head>
<body>
<h1>Links</h1>
<table width="100%" bgcolor="blue" border="5px">
<tr>
<th><a href="Home.html"><font color="white">Home</font></a></th>
<th><a href="Contact.html"><font color="white">Contact</font></a></th>
<th><a href="Gellary.html"><font color="white">Gellary</font></a></th>
<th><a href="About.html"><font color="white">About</font></a></th>
</tr>
</table>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
11
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<form> tag: This tag to contain input elements like text fields, checkboxes, and
buttons. It used to transfer data on server from web page
Attributes <form> tag
action: It provides submission format where do you want controller of web page
method: It used to upload data on server with GET and POST methods GET is a
default method and Post provide security and hide resource data in URL Locator
Example:
<form action=”demo.php” method=”post”>
• <Input>: This tag is used to create textbox , radio button , checkbox , submit button ,reset
button etc.
Attributes of <input> Tag:
1. Value / Size / Type /name: These options are used to give value , size ,name and type of
input tag.
Example:

Output screen for text box

Output screen for password box

<form action="">
<input type="radio" value="male" name="gender" Checked/>Male
<input type="radio" value="Female" name="gender" />Female
</form>

Output screen for radio button

<form action="">
<input type="checkbox" value="Music" name="hoby[]" />Music
<input type="checkbox" value="Sport" name="hoby[]"/>Sport
</form>

Output screen for checkbox

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
12
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

2 Readonly: it provide read only in a textbox

Output screen for readonly

3 Disabled: It used to disabled selected text box of Input tag

<form action="">
<input type="text" value="About JAVA" size="30" disabled />
</form>
Output screen for Disabled
4 Maxlength : To set length of text box

<form action="">
<input type="text" value="C is high level language" maxlength="20"/>
</form>
Output screen for maxlength
5 Required: It used to must be filled text box and empty text box not allowed
<form action="">
<input type="text" name="name" size="30" required />
<input type="submit" value="Search" name="submit">
</form>

Output screen for required

6 Placeholder: It is to provide place holder in text field

Output screen for Placeholder

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
13
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

11.file/multiple: file type of input to provide choose file with multiple file from storage

Output screen for file

12.Email: It used to display error when give incomplete email in text box

Output screen for email

13. Number: To provide number with start and end range with step

Output screen of number

14.Date: To display calendar in web page

Output screen of date

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

15.range: To define range of number in text field

Output screen of range

16.submit: A button that submits the form data to a server.

17.reset: A button that resets the form data to its initial values.

Output screen of submit and rest button

• <Select>: This tag is used to create drop down or selection box in web page.
• <Option>: This tag to create option of select tag.

<form action="">
<label>City:</label>
<select name="city">
<option value="Agra">Agra</option>
<option value="Lucknow">Lucknow</option>
<option value="Mumbai">Mumbai</option>
</select>
</form>

Output screen of select tag

• <Textarea> :This tag to create text area and define with rows and columns .

<form action="">
<label>Address:</label><br>
     <textarea name="add" cols="5" rows="5" ></textarea>
</form>

Output screen of textarea

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Registration form:

<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
</head>
<body>
<h2>Register</h2>
<form action="#" method="POST">
<table> <tr>
<th>User Name</th>
<td><input type="text" name="uname" size="30" placeholder="User Name" required></td>
</tr> <tr>
<th>Password</th>
<td><input type="password" name="PWD" size="30" placeholder="Enter Passwor" required></td>
</tr> <tr>
<th>Gender</th>
<td><input type="radio" name="Gender" value="Male" checked/>Male
<input type="radio" name="Gender" value="Female"/>Female</td>
</tr> </tr> <th>Hobbies</th><td>
<input type="checkbox" name="hob[]" value="Music">Music
<input type="checkbox" name="hob[]" value="Cricke"> Cricket
<input type="checkbox" name="hob[]" value="Gym" checked>Gym
</tr> <tr>
<th>City</th><td>
<select name="city">
<option value="Select">Select</option>
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
<option value="Lucknow">Lucknow</option>
</select> </td> </tr> <tr>
<th>Address</th><td>
<textarea cols="30" rows="5"></textarea></td>
</tr> <tr>
<th colspan="2">
<input type="submit" name="submit" value="submit"/>
<input type="reset" name="reset" value="reset"/>
</th> </tr>
</table> </form> </body> </html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

What is Multimedia in HTML:

Multimedia is used to refer different elements. you can hear or see, like that images, music, sound,
videos, records, films, animations, and various tags and attributes to support multimedia content.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular
.mpeg video format on the web. Not supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers,
but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers,
but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and
TV hardware. Plays well on Apple computers, but not in web browsers.

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low
.ram bandwidths. Does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra component

.flv (plug-in) to play in web browsers.

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by

HTML.

WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by
HTML.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used
or MP4 in video cameras and TV hardware. Supported by all browsers
and recommended by YouTube.

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
17
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Video Tag: This tag is used to display video on web browser with different extension

Attributes of <video> Tag

Attribute Description
src It specifies to give URL of video
controls To displays controls button of video like that play, pause,volume.
autoplay It provides Start playing video automatically when the page loads.
loop To repeats video with the certain condition is true .
muted It provides mutes the video by default.
poster Specifies an image to be displayed before the video starts.
preload Specifies how the browser should load the video (auto, metadata, or none).
width & height Defines width and height of video.

<Source> Tag: To define multimedia resources from storage.

Attributes of <source> Tag

Attribute Description
src It give source of video
type To define type of media

Output screen

<!DOCTYPE html>
<html>
<head>

<title>Video</title>
</head>
<body>
<video width="250px" height="250px" autoplay controls>
<source src="videos/a.mp4" type="video/mp4">
</video>

</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
18
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Audio Tag: This tag is used to display audio on web browser with different extension

Attributes of <video> Tag

Attribute Description
src It specifies to give URL of audio
controls To displays controls button of audio like that play, pause,volume.
autoplay It provides Start playing audio automatically when the page loads.
loop To repeats audio with the certain condition is true .
muted It provides mutes the audio by default.
poster Specifies an image to be displayed before the audio starts.
preload Specifies how the browser should load the audio (auto, metadata, or none).

<Source> Tag: To define multimedia resources from storage.

Attributes of <source> Tag

Attribute Description
src It give source of audio
type To define type of media

<!DOCTYPE html>
<html>
<head>

<title>Audio</title>
</head>
<body>
<audio autoplay controls>
<source src="audios/a.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
19
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
20
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Embed Tag: This tag is used to embed or display images, audios, videos, and file with different
extension on web page.

Attributes of <embed> Tag:

Attribute Description
src To give URL of embedded tag
type To give type file like .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
width To give width of embedded tag.
height To give height of embedded.
autoplay Automatically starts playing the media (for audio/video).
loop Repeats the media audio and video.

<!DOCTYPE html>
<html>
<head>
<title>Object Tag</title>
</head><body>
<embed src="Images/b.jpg" type="image/png" width="150" height="150"/>
<embed src="Marquee_P7.html" width="200" height="150"/><br/>
<embed src="videos/b.mp4" width="200" height="200"/>
<embed src="audios/a.mp3" width="200" height="100"/><br/>
</body></html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
21
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<iframe> (Inline Frame) Tag:

this tag is used to embed another webpage within current webpage and display
external content such as websites, videos, YouTube, Google Maps, or documents
inside a frame.

Attributes of <iframe> Tag:

Attribute Description
src To give source or URL of iframe.
width Defines width of iframe (in pixels or percentage).
height Defines height of iframe.
title Set title in text description of iframe
name To give name of iframe
sandbox It provides security restrictions, such as preventing scripts from running.
allow It provides permissions like fullscreen, camera, microphone, etc.
allowfullscreen It provides full screen of iframe.
frameborder To set border of iframe (0 for no border, 1 for a border).
loading Controls how iframe is loaded (lazy for delayed loading).

Display Website
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<iframe src="https://www.wikipedia.org" width="300" height="150"></iframe>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
22
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Display YouTube Video

<!DOCTYPE html>
<html>
<head>
<title>iframe</title></head>
<body>
<iframe width="260" height="215"
src="https://www.youtube.com/embed/jCXCR0f_0as?si=VQuwGCh7es6iMC6t"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>

Output screen

Display Google Maps

<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3548.2228806266103!2d77.98690987450
068!3d27.212151347159978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x397477126da38655%3A
0x43ba8896dd1be90a!2sjauhar%20institute%20of%20information%20technology%20(JIIT)!5e0!3m2!1sen!
2sin!4v1740477683344!5m2!1sen!2sin"
width="250" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Body Tag in HTML: This tag is used to define main content of a webpage and display all data in
web browser and contains text, images, links, videos, and other elements that make up the webpage's
structure and design.

Attributes of <body> Tag:

Attribute Description Example

background Set a background image of page. background="bg.jpg"
bgcolor Set a background color of page. bgcolor="lightblue"
text Defines text color. text="black"
link Set color of unvisited links. link="blue"
Alink Defines color of active links. alink="red"
vlink Specifies the color of visited links. vlink="purple"

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
24
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head>
<title>Body tag</title>
</head>
<body link="red" alink="blue" vlink="Green">
<a href="#">Home</a><br/>
<a href="#">Contact</a><br/>
<a href="#">About</a><br/>
</body>
</html>

<meta> Tag HTML :

This tag is used to provide metadata information of webpage. it have information such as
character encoding, viewport settings, keywords, descriptions, and author details and it must be
inside <head> tag.

Attributes of <meta> Tag

Attribute Description Example

charset To set character encoding of <meta charset="UTF-8">
webpage.
name To give Name of metadata like( <meta name="author" content="John Doe">
description, keywords, author).
content Provides actual metadata <meta name="keywords" content="HTML,
information. CSS, web design">
http-equiv Simulates an HTTP response <meta http-equiv="refresh"
header. content="5;url=https://example.com">

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
25
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Meta Tag Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beginner-friendly HTML tutorial.">
<meta name="keywords" content="HTML, Web Development, Coding">
<meta name="author" content="By JIIT">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page demonstrates the use of meta tags.</p>
</body>
</html>

Output screen
<div> (short for division) Tag:
This tag is a container element of html and reserved space in web page. Mostly use this tag for
design by CSS styling.

Attributes of <div> Tag:

Attribute Description Example
id give id selector of <div> tag that’s <div id="header">
unique
class To give class selector of <div> tag <div class="container">
style Adds inline CSS styles. <div style="background-color:
lightblue;">
title To set title of <div> tag. <div title="This is a tooltip">
Width, To set width and height of <div> <div style=”width:500px;height:500px”>
height

<button> Tag:
This tag is used to create a clickable button. It can be used to submit forms, trigger JavaScript
functions.
Example:

<button>Click Me</button>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
26
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Symbols in HTML
Symbol is a special character that displayed on web page using HTML entities.
symbols mathematical operators, currency symbols, arrows, Greek letters, and
special characters that are not available on a standard keyboard.
Example:
© → © (Copyright Symbol)
Special Characters:

Symbol HTML Entity Description

& & Ampersand
< < Less than
> > Greater than
"" " Double quotation mark
'' ' Apostrophe
© © Copyright
® ® Registered trademark
Currency Symbols

Symbol HTML Entity Description

$ $ Dollar
€ € Euro
£ £ Pound Sterling
¥ ¥ Yen
₹ ₹ Indian Rupee

Mathematical Symbols

Symbol HTML Entity Description

+ + Plus
− − Minus
× × Multiplication
÷ ÷ Division
√ √ Square root
∑ ∑ Summation
π π Pi

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email –id: jauharinstituteinfotech@gmail.com

+918630879950
md.jakirmadh@gmail.com

Programming language: Computer diploma: University Courses:

Index of CSS-Style

No CSS-Style Page Nos

1 CSS Definition , Selector of CSS 1-4
CSS Definition and Syntax , example, Selector of CSS and Types
2 Type of CSS 5-7
Inline , Internal , External Style
3 Properties of Font in CSS 8
1. Font-Family,2. Font-Style,3. Font-Size,4. Font-Weight,5. Font-Variant,6.
Font(Shorthand Properties)
4 Properties of Text in CSS 9-15
• Color,• Text-Align,• Text-Indent,• Text -Decoration,• Text -Transform,• Text
-Height,• Letter-Space,• Line-Spacing,• Line-Height,• Letter-Spacing,• Word-
Spacing,• Text Overflow & Wrapping .,• Text Shadow
5 Background in CSS-3
a 1)background-color,2)background-image,3)background- 16-23
repeat,4)background-attachment,5)background-position,6)background
(shorthand property)
6 Box model ( ,Float (Position)) 24-31
a Margin: i)margin-left,ii)margin-right,iii)margin-top,iv)margin-bottom 24-25
b Padding: i) Padding -left,ii) Padding -right,iii) Padding -top,iv) Padding -
26-27
bottom
c Border: 1.Border-color,2.Border-style,3.Border-width,4.Border Shorhand
27-29
Properties
d Border-radius: 1. border-top-left-radius,2. border-top-right-radius,3.
border-bottom-right-radius,4. border-bottom-left-radius,5. border-radius 29-31
(shorthand)
e Float : left ,righ,none,inherit 31
7 List style, Links, Table, Overflow 32-38
8 Display , Position 39-41
9 Navbar 42-47
a horizontal navbar, vertical navbar, dropdown navbar, navbar with icon,
icon hover navbar
10 Projects 48-53

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

What is CSS3:
CSS is a Cascading style sheets. It used to design elements of HTML and CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript. it was developed by Håkon
Wium Lie and Bert Bos in 10 october1994 at the European Organization for Nuclear Research
(CERN) there are option to design by css.

• Adjusts font, size, and color of text

• Adds decorative elements like images and animations
• Creates space around elements with margins
• Creates a visible outline around elements with borders
• Controls the layout, stacking order, and alignment of elements with positioning

Syntax of CSS

selector {

property: value;
……………………
……………………
……………………
}

Selector: To select elements of HTML and give style.

Property: To Defines styling attribute (e.g., color, font-size).

Value : To give value of property.

Declaration Block: To declare block with curly brackets {} and terminate each statement by
semicolon.

Example of CSS :

p{
color: blue;
}

Programming language: Computer diploma: University Courses:

Selector of CSS :
Selectors are used to select particular element of html and give css style
There are some selectors as following.
Type of selector

1. Element Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Group Selector
1)Element Selector
This selector is used to select elements of HTML by name

Example:

<!DOCTYPE html> Output screen

<html>
<head>
<title>Selector Element</title>
<style>

h1{
color:red;
font-family: algerian;
}
</style>
</head>
<body>
<h1> Element Selector</h1>
</body>
</html>

2)Id Selector
Id selector is used to select elements of HTML. it must be unique and define
with # keyword

Syntax of id selector:
#id-name {
property: value;
}

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
3
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Example id selector: Output screen

<!DOCTYPE html>
<html>
<head>
<title>Id Selector</title>
<style>
#id1{
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<p id="id1">This is an id selector.</p>
</body>
</html>
3)Class Selector:
Class selector is used to select elements of html and give style of CSS it define . (dot) operator
Syntax of id selector: .class-name {
property: value;
}
Example of class selector:
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style>

.cls{
color:white;
font-variant:small-caps;
background-color: #0000ff;
}
</style>
</head>
<body>
<h1 class="cls">This is a class Selector</h1>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
4
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

4)Universal Selector:This selector to provide selection of all element on an html page and
represent asterisk (*) symbol mostly use this selector when do you want to give same style all elements of html.
Syntax of universal selector: *{
property: value;
}
Example of Universal selector:
Output screen
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector</title>
<style>

*{
color:white;
font-variant:titling-caps;
background-color: #00ff00;
}
</style>
</head>
<body>
<h1 class="cls">This is an universal Selector</h1>
</body>
</html>
5)Group Selector: Group selector are used to select multi tag and give CSS style
Syntax of group selector: tag1,tag2,tag3 { property: value; }
Output screen
<!DOCTYPE html>
<html>
<head>
<title>Group Selector</title>
<style>
h1, #k1, .k2 {
color: blue;
font-family:algerian;
border:5px solid green;
} </style>
</head>
<body>
<h1>This is group Selector 1</h1>
<h3 id="k1">This is group Selector 2</h3>
<h4 class="k2">This is group Selector 2</h4>
</body>
</html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

How many type to add CSS style in web page elements:

When do you want to add CSS in HTML pages and give attractive style selected elements There
are three type to give CSS in HTML documents.
1. Inline CSS Style
2. Internal CSS Style
3. External CSS Style

1)Inline CSS Style:

Inline CSS style is used to apply CSS style on a single line or element.
Syntax of Inline Style:
<tagname style="property: value; property: value;">Content</tagname>

<!DOCTYPE html>
<html>
<head>
<title>Inline Style Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Page</h1>
<p style="font-size: 16px; color:#ffff;background-color: blue;">This paragraph has inline styles
applied directly.</p>
</body>
</html>
Output screen

Internal CSS Style:

This type style is used to add a unique style of a single document. It is defined in <head> section
of the HTML page inside <style> tag.
Syntax of Internal Style:
<html>
<head>
<style>
selector {
property: value;
property: value;
}
</style>
</head>
<body>

</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
6
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS </title>
<style>
body {background-color: bisque; }
h1 {
color: blue;
text-align: left; }
p{
font-size: 18px;
color:#00ff00; }
.d1 {
color: red;
font-weight: bold; }
</style>
</head> Output screen
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using internal CSS.</p>
<p class="d1">This paragraph has a special class applied.</p>
</body>
</html>
External CSS Style:
This type style is used to give single css style page add to multiple page and you want to make
changes on multiple pages.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
Syntax of external Style:
Linking the External CSS File
<html><head>
<link rel="stylesheet" href="filename.css">
</head><body>

</body></html>

External CSS File (filename.css)

selector {
property: value;}
selector {
property: value; }

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
7
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Linking the External CSS File (external.html):

<!DOCTYPE html>
<html>
<head>
<title>External CSS Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Site Header</h1>
</header>
<p class="content">This is the main content of the page.</p>
<button>Click Me</button>
</body>
</html>

External CSS File (style.css)

h1 {
color: darkred;
font-size: 28px;
text-transform: uppercase;
}

.content {
font-size: 18px;
color: #555;
margin: 20px;
}

button {
background-color: blue;
color: white;
padding: 10px 20px;

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
8
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Properties of Font in CSS:

1. Font-Family
2. Font-Style
3. Font-Size
4. Font-Weight
5. Font-Variant
6. Font(Shorthand Properties)
7. Color(text-properties)
1)Font family: This property is used to give face of font like that Arial, Times New Roman etc.
2)Font style: This property is used to make the font bold, italic or oblique.
3)Font size: This property is used to increase or decrease size of font.
4)Font weight: This property is used to increase or decrease boldness and lightness of font.
5)Font variant: This property creates a small-caps effect.
6)Font(Shorthand Properties)
7)Font color: This property is used to change the color of text. (standalone attribute)
There are three types color style as following.
1)By Name color (red,green,blue,etc.)
2)By HexadecimalValue (#000000-)black,#ffffff-)White,#ff0000-)red,#00ff00-)green,#ff0000-
)blue)
3)By RGB(Red,Green,Blue) rgb(255,0,0)
Example: Output screen
<!DOCTYPE html>
<html>
<head>
<title>Font-Style</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<h1>Font-Properties</h1>
<p style="font-family: algerian;">Font-Family</p>
<p style="font-style:italic;">Font-Style</p>
<p style="font-size:20px;font-weight: bold;">Font-size and font-weight</p>
<p style="font-variant: small-caps;">Font-variant</p>
<p style="font: italic small-caps bold 16px Times New Roman">Short hand properties Font</p>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
9
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Properties of Text in CSS:

• Color
• Text-Align
• Text-Indent
• Text -Decoration
• Text -Transform
• Text -Height
• Letter-Space
• Line-Spacing
• Line-Height
• Letter-Spacing
• Word-Spacing
• Text Overflow & Wrapping .
• Text Shadow
1) Color: This property is used to font color.

Color Format Example Description

Color Name color: red; Uses predefined color names (blue, green, yellow).
HEX Code color: #ff5733; A six-digit hexadecimal code (#RRGGBB) or three-digit (#RGB).
RGB color: rgb(255, 87, 51); Defines colors using Red, Green, and Blue values (0-255).
RGBA color: rgba(255, 87, 51, 0.5); Same as RGB but includes an alpha value (0-1) for transparency.
HSL color: hsl(10, 100%, 60%); Uses Hue (0-360), Saturation (%), and Lightness (%).
HSLA color: hsla(10, 100%, 60%, 0.5); HSL with an alpha value for transparency.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Color</title>
<style>
h1 {
color: blue;}
p{
color: #ff5733;}
span {
color: rgb(34, 139, 34);}
button {
color: rgba(255, 0, 0, 0.7); }
h2 {
color: hsl(240, 100%, 50%); opacity: 0.5;}
</style>
</head>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
10
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<body>
<h1>Heading 1st blue color</h1>
<p>Paragraph color </p>
<span>Span tag color</span>
<button>Button Color</button>
<h2>Heading 2nd Color</h2>
</body>
</html>

Output screen
2) Text Alignment & Direction: When do you want to give alignment of text then use it like that
Left , Right , Center, justify

<!DOCTYPE html>
<html lang="en">
<head>
<title>Text-Align</title>
<style>
h1 { text-align: left; }
h2 { text-align: center; }
h3 { text-align: right; }
p { text-align: justify; }

</style>
</head>
<body>
<h1>Text-Align left</h1>
<h2>Text-Align center</h2>
<h3>Text-Align right</h3>
<p>Text-Align justify</p>
</body>
</html>
3)Text-Indent & Spacing : there are some text properties to control spacing between letters,
words, and indentation.

Property Description Example

letter-spacing Adjusts space between characters. letter-spacing: 2px;

word-spacing Adjusts space between words. word-spacing: 5px;

line-height Controls the height between text lines. line-height: 1.5;

text-indent Indents the first line of a paragraph. text-indent: 20px;

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
11
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head>
<title>Text Spacing Example</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
background-color: #f4f4f4; }
p{
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.5;
text-indent: 50px;
font-size: 18px;
color: #333; }
</style>
</head>
<body>
<h2>CSS Text Spacing Example</h2>
<p> Agra is a smart city for visitors.
Agra is a smart city for visitors.
Agra is a smart city for visitors.
Agra is a smart city for visitors.
Agra is a smart city for visitors.
Agra is a smart city for visitors.
</p>
</body>
</html>

4)Text -Decoration:
This property is used to give text style like that underline, overline, strike through.

Property Description Example

text-decoration Adds underlines, overlines, or strikethrough. text-decoration: underline;

text-decoration-color Sets the color of the text decoration. text-decoration-color: red;

text-decoration-style Specifies the style (solid, dotted, dashed, etc.). text-decoration-style: dashed;

text-decoration-thickness Defines the thickness of the text decoration. text-decoration-thickness: 3px;

text-underline-offset Adjusts the position of the underline. text-underline-offset: 2px;

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Decoration Example</title>
<style>
body {
font-family: 'Times New Roman';
background-color: #f9f9f9;
}
p{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
text-decoration-thickness: 3px;
text-underline-offset: 2px;
font-size: 20px;
color: #333; }
</style>
</head>
<body>
<h2>CSS Text Decoration Example</h2>
<p>
To give all text properties in this paragrabh,
To give all text properties in this paragrabh
</p>
</body>
</html>

5)Text -Transform: This property is used to change case upper , lower, capitalize.

Property Description Example

text-transform Changes text case (uppercase, lowercase, capitalize). text-transform: uppercase;

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
13
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Transform Example</title>
<style>
body {
font-family:'Times New Roman';
background-color: #f4f4f4; color:red;}
.uppercase {
text-transform: uppercase;}
.lowercase {
text-transform: lowercase;}
.capitalize {
text-transform: capitalize;}
</style>
</head>
<body>
<h2>CSS Text Transform Example</h2>
<p class="uppercase">this text will be converted to uppercase.</p>
<p class="lowercase">THIS TEXT WILL BE CONVERTED TO LOWERCASE.</p>
<p class="capitalize">this text will be capitalized correctly.</p>
</body>
</html>

6)Text Overflow & Wrapping:

These property is used to wrapping and binding data in container.

Property Description Example

white-space Controls how text wraps (normal, nowrap, pre, etc.). white-space: nowrap;

text-overflow Handles overflowed text (clip, ellipsis). text-overflow: ellipsis;

overflow-wrap Specifies if words should break when overflowing. overflow-wrap: break-word;

word-break Specifies how words should break at the end of a line. word-break: break-all;

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
14
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Overflow Example</title>
<style>
body {
font-family: 'Times New Roman';
background-color: #f4f4f4; color:blue; }
.nowrap {
white-space: nowrap;
width: 200px;
border: 1px solid black;
overflow: hidden; }
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid black; }
.break-word {
overflow-wrap: break-word;
width: 200px;
border: 1px solid black;}
.break-all {
word-break: break-all;
width: 200px;
border: 1px solid black; }
</style>
</head>
<body>
<h2>CSS Text Overflow Example</h2>
<p class="nowrap">
This text will not wrap even if it exceeds the container width.
</p>
<p class="ellipsis">
This is a long text that will be truncated with an ellipsis if it overflows.
</p>
<p class="break-word">
ThisIsAReallyLongWordThatWillBreakAtTheRightPlaceToFitTheContainer.
</p>
<p class="break-all">
SupercalifragilisticexpialidociousWillBreakAnywhere.
</p>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
15
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

7) Text Shadow:
This properties is used to give shadow of text.

Property Description Example

text-shadow Adds shadow effects to text. text-shadow: 2px 2px 5px gray;

Syntax:
text-shadow: horizontal-offset vertical-offset blur-radius color;
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Shadow Example</title>
<style>
body {
font-family: 'Times New Roman';
background-color: #f4f4f4;
text-align: center; }
.shadow1 {
text-shadow: 2px 2px 5px gray;
font-size: 30px;
color: black; }
.shadow2 {
text-shadow: -3px -3px 3px red;
font-size: 30px;
color: black; }
.shadow3 {
text-shadow: 4px 4px 0px blue, 6px 6px 0px red;
font-size: 30px;
color: black;}
</style>
</head>
<body>
<h2 class="shadow1">Soft Shadow Example</h2>
<h2 class="shadow2">Red Offset Shadow</h2>
<h2 class="shadow3">Multiple Shadows</h2>
</body>
</html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Background in CSS-3:
1)background-color
2)background-image
3)background-repeat
4)background-attachment
5)background-position
6)background (shorthand property)
1)Background-Color: To give color of selected element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>

<title>CSS Background Color Example</title>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
17
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

2)background-image: It used to give image in background of elements.

Syntax:
background-image: url("image.jpg");
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Image Example</title>
<style>
body { background-image: url('images/b.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family:'Times New Roman';
text-align: center;
color: white; }
h1 {
background: rgba(0, 0, 0, 0.6);
Output screen
display: inline-block; }
.pattern-box {
background-image: url('images/c.jpg');
background-color: #f4f4f4;
width: 80%;
color: black;
font-weight: bold; }
.gradient-box {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
font-weight: bold;
width: 80%;}
footer {
background-image: url('images/a.jpg');
background-size: cover;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
</style></head><body>
<h1>CSS Background Image Example</h1>
<div class="pattern-box">
This div has a repeating pattern background.</div>
<div class="gradient-box">
This div has a gradient background.</div>
<footer>
This is the footer with a background image.</footer>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
18
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

3)background-repeat: It used to repeat or not image horizontal and vertical

Value Description
repeat Default, repeats both horizontally and vertically.
no-repeat Prevents image repetition.
repeat-x Repeats horizontally only.
repeat-y Repeats vertically only.

<!DOCTYPE html>
<html>
<head>
<title>CSS Background Repeat Example</title>
<style>
body {
background-image: url('images/a.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family:'Times New Roman';
text-align: center;
color: white;
padding: 20px;
}
.repeat-x {
background-image: url('images/b.jpg');
background-repeat: repeat-x;
background-color: lightgray;
padding: 20px;
margin: 20px auto;
width: 80%;
border-radius: 10px;
}
.repeat-y {
background-image: url('images/d.jpg');
background-repeat: repeat-y;
padding: 20px;
margin: 20px auto;
width: 80%;
border-radius: 10px;
color: red;
}

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
19
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.repeat-both {
background-image: url('images/e.jpg');
background-repeat: repeat;
background-color: white;
padding: 20px;
margin: 20px auto;
width: 80%;
border-radius: 10px;
border: 1px solid #ccc; }
.no-repeat {
background-image: url('images/c.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
padding: 50px;
margin: 20px auto;
width: 80%;
border-radius: 10px;
border: 1px solid #ccc;
background-color: #f8f8f8; }
</style></head><body>
<h1>CSS Background Repeat Example</h1>
<div class="repeat-x">
This div has a background image that repeats **horizontally**.</div>
<div class="repeat-y">
This div has a background image that repeats **vertically**.</div>
<div class="repeat-both">
This div has a background image that repeats **both horizontally and vertically**. </div>
<div class="no-repeat">
This div has a background image that **does not repeat**. </div>
</body>
</html>

Output screen

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
20
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

4)background-attachment: it used to controls background scrolling or not with the page.

Value Description
scroll Background scrolls with content (default).
fixed Background stays fixed while content scrolls.
local Background scrolls with element's content.

Syntax
element{ background-image: url("image");
background-attachment: fixed or scroll; }
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Attachment Example</title>
<style>
body { font-family:'Times New Roman'; }
.fixed-bg {
background-image: url('images/a.jpg');
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100px;
width:600px ;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em; }
.scroll-bg {
background-image: url('images/b.jpg');
background-attachment: scroll;
background-size: cover;
background-repeat: no-repeat;
height: 100px;
width:600px ;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em; }
.local-bg-container {
width: 41%;
height: 100px;
overflow: auto;
border: 2px solid #ccc;}

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
21
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.local-bg {
background-image: url('images/c.jpg');
background-attachment: local;
background-repeat: repeat;
background-size: contain;
padding: 20px;
height: 600px;
color: white;
font-weight: bold;}
</style>
</head>
<body>
<h1>CSS Background-Attachment Example</h1>
<div class="fixed-bg">
background-attachment: fixed</div>
<div class="scroll-bg">
background-attachment: scroll </div>
<div class="local-bg-container">
<div class="local-bg">
background-attachment: local<br/><br/>
Scroll inside this box to see how the background moves with the content.
</div></div></body></html>

5)background-position: This property is used to give position of image in background right-top,

center top , left top, center center , right bottom etc.
Syntax:
background-position: x y;
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Background Position Example</title>
<style>
body {
font-family: 'Times New Roman';
background-color: #f0f0f0;
text-align: center; color: #105c0e; text-shadow: ; }
.box {
width: 200px;
height: 100px;
border: 2px solid #ccc;
margin: 20px auto;
background-image: url('images/e.jpg');
background-repeat: no-repeat;
background-size: 100px 100px;

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
22
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

background-color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold; }
.center {
background-position: center; }
.top-left {
background-position: top left; }
.bottom-right {
background-position: bottom right; }
.custom-px {
background-position: 50px 30px; }
.custom-percent {
background-position: 75% 25%; }
</style>
</head>
<body>
<h3>CSS background-position Examples</h3>
<div class="box center">center</div>
<div class="box top-left">top left</div>
<div class="box bottom-right">bottom right</div>
<div class="box custom-px">50px 30px</div>
<div class="box custom-percent">75% 25%</div>

</body>
</html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

6)background (shorthand property): To give all background properties in selected element in

shorthand style
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Shorthand</title>
<style>
body {
font-family:'Times New Roman';
background: #dfbbbb;
text-align: center; }
.box {
width: 300px;
height: 200px;
margin: 20px auto;
border: 2px solid #ccc;
color: rgb(223, 44, 169);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center; }
.long-way {
background-color: #333;
background-image: url('images/a.jpg');
background-repeat: no-repeat;
background-position: top right;
background-size: 100px 100px; }
.shorthand {
background: #4CAF50 url('images/a.jpg') no-repeat bottom left / 100px 100px; }
.fixed-bg {
background: url('images/a.jpg') no-repeat center center fixed;
background-size: cover;
color: rgb(229, 32, 147); }
</style>
</head>
<body>
<h1>CSS Background Shorthand Examples</h1>
<div class="box long-way">
Individual Properties</div>
<div class="box shorthand">
Shorthand Property </div>
<div class="box fixed-bg">
Fixed Background </div>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
24
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Box model: It provide margin , padding ,border style selected elements of html.
1)Margin
2)Padding
3)Border
4)Border-radius
5)Float (Position)
1) Margin : This property is used to define margin around elements like that left right top
bottom and provide out side space.

Syntax Margin:Top Right Bottom Left;

Margin Properties of CSS
i)margin-left
ii)margin-right
iii)margin-top
iv)margin-bottom
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Properties Example</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
background-color: #f5f5f5;
text-align: center;
padding: 20px; }
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
padding: 10px;
background-color: #fff;
border: 2px solid #ddd; }
.box1 {
background-color: #e74c3c;
color: white;
padding: 10px;
margin-top: 5px;
margin-right: 40px;
margin-bottom: 5px;
margin-left: 10px; }
margin: 5px 30px 5px 20px; }

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
25
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.box2 {
background-color: #3498db;
color: white;
padding: 20px;
margin: 5px 30px 5px 20px; }
.box3 {
background-color: #2ecc71;
color: white;
padding: 20px;
margin: 10px auto 10px; }
.box4 {
background-color: #9b59b6;
color: white;
padding: 20px;
margin: 5px 60px; }
.box5 {
background-color: #f39c12;
color: white;
padding: 20px;
margin: 5px; }
</style>
</head>
<body>
<h1>CSS Margin Properties Example</h1>
<div class="container">
<div class="box1">Individual Margin Properties</div>
<div class="box2">Shorthand: 4 Values (top, right, bottom, left)</div>
<div class="box3">Shorthand: 3 Values (top, sides, bottom)</div>
<div class="box4">Shorthand: 2 Values (vertical, horizontal)</div>
<div class="box5">Shorthand: 1 Value (all sides)</div>
</div> </body> </html>

Output screen

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

2) Padding : This property is used to give padding of sleeted elements and provide inside space.

Syntax Padding:Top Right Bottom Left;

Padding Properties of CSS

i) Padding -left
ii) Padding -right
iii) Padding -top
iv) Padding -bottom
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Padding Properties Example</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px; }
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
background-color: #dc9a9a;
border: 2px solid #d45a5a;
padding: 20px; }
.box {
margin: 20px auto;
width: 80%;
color: white;
font-weight: bold; }
.box1 {
background-color: #e74c3c;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 50px; }
.box2 {
background-color: #3498db;
padding: 5px 15px 25px 35px; }
.box3 {
background-color: #2ecc71;
padding: 10px 30px 20px; }

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.box4 {
background-color: #9b59b6;
padding: 15px 40px;
}
.box5 {
background-color: #f39c12;
padding: 25px;
}
</style></head><body>
<h3>CSS Padding Properties Example</h3>
<div class="container">
<div class="box box1">Individual Padding Properties</div>
<div class="box box2">Shorthand: 4 Values (top, right, bottom, left)</div>
<div class="box box3">Shorthand: 3 Values (top, sides, bottom)</div>
<div class="box box4">Shorthand: 2 Values (vertical, horizontal)</div>
<div class="box box5">Shorthand: 1 Value (all sides)</div>
</div>
</body>
</html>

Output screen

3)Border in CSS: This property is used to give outline or border selected element of HTML
And provide border color , size , style etc.
Border properties:
1.Border-color
2.Border-style 3.Border-width
4.Border Shorhand Properties

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
28
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

1)Border-color: It used to give color of border

Color Example Description

Format
Color Name Border-color: red; To give color name wise (blue, green, yellow).
HEX Code Border-color: #ff5733; A six-digit hexadecimal code (#RRGGBB) or three-digit
(#RGB).
RGB Border-color: rgb(255, 87, 51); Defines colors using Red, Green, and Blue values (0-255).
RGBA Border-color: rgba(255, 87, 51, 0.5); Same as RGB but includes an alpha value (0-1) for
transparency.
HSL Border-color: hsl(10, 100%, 60%); Uses Hue (0-360), Saturation (%), and Lightness (%).
HSLA Border-color: hsla(10, 100%, 60%, HSL with an alpha value for transparency.
0.5);
2)Border-Style: this property is used to give border style of elements and value may be dotted ,
dashed , solid, double, groove, ridge, inset, outset, none, hidden etc.
3)Border-width : It used to define size of outline or border in an elements and value may be px,
cm,in,pt, em , thin, medium , etc.
4)Border(shorthand): It used to give short hand properties
syntax
border: border-width border-style (required) border-color;
Example: border: 5px solid red;

<!DOCTYPE html>
<html>
<head>
<title>CSS Border Properties Example</title>
<style>
body { text-align: center;}
.container {
width: 90%;
max-width: 800px; }
.box {
width: 80%;
margin: 20px;
padding: 20px;
background-color: white;
font-weight: bold; }
.box1 {
border: 3px solid #3498db; }
.box2 {
border-width: 4px;
border-style: dashed;
border-color: #e74c3c; }

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.box3 {
border-top: 5px solid green;
border-right: 5px dashed blue;
border-bottom: 5px dotted purple;
border-left: 5px double orange; }
</style>
</head>
<body>
<h3>CSS Border Properties Example</h3>
<div class="container">
<div class="box box1">Shorthand: border</div>
<div class="box box2">Individual: width, style, color</div>
<div class="box box3">Different borders on each side</div> </div>
</body>
</html>

4)Border-radius:This property is used to define rounded corner border in css

Border-radius properties in css

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
5. border-radius (shorthand)
Example:

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head>
<title>CSS Border-Radius Example</title>
<style>
body {
padding: 30px;
text-align: center; }
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; }
.box {
width: 150px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;}
.box1 { border-radius: 0;}
.box2 { border-radius: 15px;}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #2ecc71;}
.pill {
width: 150px;
height: 50px;
border-radius: 25px;
background-color: #f39c12; }
.box3 {border-radius: 10px 20px 30px 40px;}
.box4 { border-radius: 50px / 25px;}
.box5 {
border-top-left-radius: 20px;
border-top-right-radius: 20px; }
.box6 {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 10px; }
</style>
</head>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<body>
<h3>CSS Border-Radius Properties</h3>
<div class="container">
<div class="box box1">No Radius</div>
<div class="box box2">All Corners</div>
<div class="circle">Circle</div>
<div class="pill">Pill</div>
<div class="box box3">Custom Corners</div>
<div class="box box4">Elliptical</div>
<div class="box box5">Top Corners</div>
<div class="box box6">Bottom Corners</div>
</div></body></html>

5)Float: this property is used to give position of element left , right and none
<!DOCTYPE html>
<html lang="en">
<head> <title>Float</title> <style>
.d1{ border: 2px solid red;
width: 500px;
height: 200px;
padding: 15px; } #im1 {
width: 150px;
height: 100px;
float: right; }
#im2{
width: 150px;
height: 100px;
float: left;
padding: 0px 10px 10px 0px; }
</style></head><body>
<div class="d1">
<img src="Images/a.jpg" id="im1" alt="">
CSS Tutorial
CSS tutorial
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is
developed for beginners and professionals. The major points of CSS are given below:
<br><br>
<img src="Images/b.jpg" id="im2" alt="">
CSS Tutorial
CSS tutorial
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is
developed for beginners and professionals. The major points of CSS are given below:
</div>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 md.jakirmadh@gmail.com • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
32
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

List style in CSS: This style is used to define list style of elements there are some list properties as
following
List properties in CSS
1)list-style-type
2)list-style-position
3)list-style-image
4)list-style (Shorthand)
Example:
1)list-style-type: This properties is used to give type of list like that bullets Unordered List (square
,circle rectangle ,desc , none etc.) Ordered List (decimal, lower-alpha, upper-alpha, lower-roman,
upper-roman, decimal-leading-zero etc.)
Example: ul { list-style-type: square; } ol { list-style-type: upper-roman; }

2)list-style-position: This property is used to define position of list inside and outside
Example: ul { list-style-position: outside;} ul { list-style-position: inside;}

3)list-style-image: It used to give image of list

Syntax: list-style-image: none | url('path/to/image') | initial | inherit;

Example: ul { list-style-image: url('path/a.png');}

4)list-style (Shorthand): This property is used to give type ,position and image of list.

Syntax:
list-style: [list-style-type] [list-style-position] [list-style-image];

Example:

ul { list-style: square;}

ol { list-style: lower-alpha inside;}

ul { list-style: georgian outside url('a.png');}

ul { list-style: url('path/a.png');}

ul { list-style: none;}

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
33
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html><head><style>
.list-default {
list-style-type: disc; }
.list-none {
list-style: none;}
.list-square {
list-style-type: square;}
.list-roman {
list-style-type: upper-roman; }
.list-image {
list-style-image: url('Images/whatsapp.png'); }
.list-inside {
list-style-position: inside;
background-color: #f4f4f4;
padding: 10px;}
.list-outside {
list-style-position: outside;
background-color: #e0f7fa;
padding: 10px;}
</style></head><body>
<h3>Default Unordered List</h3>
<ul class="list-default">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li></ul>
<h3>No Bullets</h3>
<ul class="list-none">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li></ul>
<h3>Square Bullets</h3>
<ul class="list-square">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li></ul>
<h3>Ordered List Roman No.</h3>
<ol class="list-roman"> <h3>Inside Position</h3>
<li>First</li> <ul class="list-inside">
<li>Second</li> <li>This bullet is inside the box</li>
<li>Third</li></ol> <li>Second item</li></ul>
<h3>Custom Bullet Image</h3> <h3>Outside Position</h3>
<ul class="list-image"> <ul class="list-outside">
<li>GitHub</li> <li>This bullet is outside the box</li>
<li>Twitter</li> <li>Second item</li></ul></body></html>
<li>LinkedIn</li></ul>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Links in CSS: Links properties are used to give visited color ,active color and hover of link.

Example:
a:link { color: blue;
text-decoration: none;}
a:visited {
color: purple;}
a:hover { color: orange;
text-decoration: underline;}
a:active { color: red;}
a:focus { outline: 2px solid #000;}

Pseudo-class Description

a:link Unvisited link

a:visited Visited link

a:hover Link when mouse hovers over it

a:active Link that is being clicked

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

a:active {
color: #2ecc71; }
a:focus {
outline: 2px dashed orange;}
.btn-link { display: inline-block;
background-color: #2980b9;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
transition: background-color 0.3s; }
.btn-link:hover {
background-color: #1abc9c; }
</style></head><body>
<h2>Normal Link Styling</h2>
<p><a href="https://www.w3schools.com/" target="_blank">Visit Example Website</a></p>
<h2>Button-style Link</h2>
<p><a href="https://chatgpt.com/" class="btn-link" target="_blank">Visit OpenAI</a></p>
</body></html>

Table: Table properties are used to give border , width , height and merge row and column ,
alignment , hover and create responsive table.

Properties of Table:

Property Description
border It used to give border of table, rows, or cells
border-collapse To merges adjacent cell borders (collapse) or separates
border-spacing To sets space between cells (used when border-collapse: separate)
width, height To give size of table or specific cells
table-layout To defines table layout algorithm (auto or fixed)
text-align It used to give aligns text horizontally in cells
vertical-align It used to give aligns text vertically in cells
padding Controls inner space inside <td> and <th>
background-color To sets background color of cells, rows, or header
caption-side Sets position of <caption> (top or bottom)
empty-cells Controls display of empty table cells (show or hide)

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head>
<title>CSS Table Properties</title>
<style>
table { width: 80%;
margin: 20px auto;
border-collapse: collapse;
table-layout: fixed; }
caption {
caption-side: top;
font-size: 1.5em;
margin-bottom: 10px; }
th, td {
border: 2px solid #333;
padding: 15px;
text-align: center;
vertical-align: middle;
background-color: #f9f9f9; }
th {
background-color: #0000ff;
color: white; }
tbody tr:nth-child(odd) {
background-color: #e0f7fa; }
tbody tr:hover {
background-color: #d1c4e9; }
.hide-empty {
empty-cells: hide; }
</style></head><body> <table>
<caption>Employee Table</caption>
<thead><tr>
<th>Name</th>
<th>Position</th>
<th>Location</th>
</tr></thead>
<tbody><tr>
<td>Ankit</td>
<td>Manager</td>
<td>Agra</td></tr><tr>
<td>Shivangi</td>
<td></td> 
<td>Mathura</td></tr><tr>
<td>Salman</td>
<td>Developer</td>
<td>Lucknow</td></tr></tbody></table></body></html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Overflow: This property is used to provide scrollbars and show and hide overflow in selected
elements

Value Description

visible It is default and provide no scrollbars.

hidden It does not visible outside content of box. No scrollbars, but content can be scrolled.

clip It does not allowed no scrollbars, and no scrolling

scroll To provide scrollbar

auto It provide scrollbars appear mode

inherit Inherits value from the parent element.

initial Sets to default value (visible).

revert Resets to user-agent or user stylesheet default.

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Overflow Example</title>
<style>
.box {
width: 300px;
height: 100px;
padding: 10px;
border: 2px solid #333;
background-color: #fff; }
.visible {
overflow: visible;}
.hidden {
overflow: hidden; }
.scroll {
overflow: scroll; }
.auto {
overflow: auto; }
.overflow-x {
overflow-x: scroll;
white-space: nowrap;}
.content {
width: 433px;
height: 126px;
background-color: #ecf0f1; }
</style></head><body>
<h2>CSS Overflow Property Examples</h2>
<h3>overflow: visible</h3>
<div class="box visible">
<div class="content">visible is default and provide no scrollbars & display data outside.</div> </div>
<h3>overflow: hidden</h3>
<div class="box hidden">
<div class="content"> It does not visible outside content of box. No scrollbars, content can be scrolled and hide.
</div>
</div> <h3>overflow: scroll</h3>
<div class="box scroll">
<div class="content">Scrollbars always appear and content doesn't overflow.</div> </div>
<h3>overflow: auto</h3>
<div class="box auto">
<div class="content">Scrollbars only appear when needed.</div> </div>
<h3>overflow-x: scroll (horizontal scroll only)</h3>
<div class="box overflow-x">
<div class="content">This is a long line that scrolls horizontally only.</div>
</div>
</body></html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Display property in CSS: Display property is used to display elements or block in webpage there
are some properties as following.

Value Description
block To give full width of element, starts on a new line (<div>)
inline It provide horizontal elements inline(<span>)
inline-block Display data with inline with width/height
none Hide elements
flex Turns container into a flexbox
grid Turns container into a CSS Grid
inline-flex Same as flex, but behaves like an inline element
inline-grid Same as grid, but inline
table Behaves like a <table>
list-item Behaves like a list item (<li>)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Display Property</title>
<style>
.box {
background-color: #3498db;
color: white;
padding: 10px;
margin: 10px;
border-radius: 6px; }
.block {
display: block; }
.inline {
display: inline; }
.inline-block {
display: inline-block;
width: 120px; }
.none {
display: none; }
.flex-container {
display: flex;
gap: 10px; }
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; }
</style></head><body>
<h2>display: block</h2>
<div class="box block">Block 1</div>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<div class="box block">Block 2</div>

<h2>display: inline</h2>
<span class="box inline">Inline 1</span>
<span class="box inline">Inline 2</span>
<h2>display: inline-block</h2>
<div class="box inline-block">Inline-Block 1</div>
<div class="box inline-block">Inline-Block 2</div>
<h2>display: none</h2>
<div class="box none">This is hidden (display: none)</div>
<h2>display: flex</h2>
<div class="flex-container">
<div class="box">Flex 1</div>
<div class="box">Flex 2</div>
<div class="box">Flex 3</div></div>
<h2>display: grid</h2>
<div class="grid-container">
<div class="box">Grid 1</div>
<div class="box">Grid 2</div>
<div class="box">Grid 3</div></div>
</body></html>

Position property in CSS: Position properties are used to give position selected elements , div ,
image , header ,footer etc. There are some properties as following.

Value Description

static It is a default property of position to provide flow top, left, etc and no effect.

relative This property to take position relative according to other element left , right ,top, bottom

absolute It used to give position and provide scrolling or moving . object according to relative element and
stop overflow

fixed This property is used to scrolling fixed.

sticky It used to stick top , right ,bottom,left and not scroll element with the page

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
41
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

<!DOCTYPE html>
<html>
<head> <style>
.container {
position: relative;
height: 400px;
background: #f0f0f0;
border: 2px solid #ccc;
margin: 50px; }
.static-box {
position: static;
background: lightblue;
padding: 10px; }
.relative-box {
position: relative;
top: 20px;
left: 20px;
background: lightgreen;
padding: 10px; }
.absolute-box {
position: absolute;
top: 10px;
right: 10px;
background: salmon;
padding: 10px; }
.fixed-box {
position: fixed;
bottom: 1 0px;
right: 20px;
background: gold;
padding: 10px;
z-index: 10; }
.sticky-box {
position: sticky;
top: 0;
background: orchid;
padding: 10px;
z-index: 5; }
</style></head><body>
<div class="sticky-box">Sticky (sticks at top when scrolling)</div>
<div class="container">
<div class="static-box">Static (default)</div>
<div class="relative-box">Relative (20px down & right)</div>
<div class="absolute-box">Absolute (top-right corner of container)</div></div>
<div class="fixed-box">Fixed (bottom-right of viewport)</div></body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
42
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Display horizontal navbar:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
li {
float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: #4CAF50;}
</style>
</head>
<body>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Gellary">Gellary</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About">About</a></li>
</ul>
</body>
</html>

Programming language: Computer diploma: University Courses:

Trainer • JAVA,PYTHO,C,C++,PHP, .NET • CCC,O’level,DCA • BCA,BBA,B.tech
Er. MD JAKIR SIR • Webdesigning,HTML,CSS,JAVASCRIT • PGDCA,TALLY • MCA,MBA,M.tech
 • Database oracle,mysql, sql • GRAPHICS • B.Sc,M.Sc
md.jakirmadh@gmail.com
43
JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY
CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Display vertical navbar:

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 28px;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
width:200px ;}
li a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: red;}
</style></head><body>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Gellary">Gellary</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About">About</a></li>
</ul></body></html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Display dropdown navbar:

<!DOCTYPE html>
<html><head><style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;}
li { float: left;}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;}
li.dropdown { display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
.dropdown-content a:hover {background-color: #d01111;
color:white;}
.dropdown:hover .dropdown-content { display: block;}
</style></head><body><ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div> </li> </ul> </body> </html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Navbar horizontal with Icon:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color:blue;
overflow: auto;}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;}
.navbar a:hover {
background-color: #000;}
.active {
background-color: #04AA6D;}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block; } }
</style> <body>
<div class="navbar">
<a class="active" href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#Search"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#Contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#Login"><i class="fa fa-fw fa-user"></i> Login</a>
</div>
</body>
</html>

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

Icon hover navbar

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style> .nav-bar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: rgb(28, 160, 28); }
.nav-bar li {
position: relative; }
.nav-bar a {
text-decoration: none;
padding: 10px;
display: block;
color: white;
font-size: larger; }
.dropdown-content {
display: none;
position: absolute;
top: 100%;
width: 175%;
left: 0;
list-style: none;
padding: 0;
margin: 0;
background-color: white;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li a {
color: black;
padding: 10px;
display: block;
text-decoration: none;
}

Programming language: Computer diploma: University Courses:

JAUHAR INSTITUTE OF INFORMATION TECHNOLOGY

CONTACT: 8630879950, Email : jauharinstituteinfotech@gmail.com

.dropdown-content li a:hover {
background-color: rgb(202, 241, 202);
}
</style>
</head>
<body>
<nav> <ul class="nav-bar">
<li class="dropdown">
<a href="#"><i class="fa fa-bars"></i><i class="fa fa-bars"></i></a>
<ul class="dropdown-content">
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
</ul> </li>
</ul> </nav>
</body>
</html>

Programming language: Computer diploma: University Courses:

Cma & Unit1
No ratings yet
Cma & Unit1
52 pages
Ankita 4
No ratings yet
Ankita 4
70 pages
O Level Project HTML Programe 2
No ratings yet
O Level Project HTML Programe 2
40 pages
HTML Notes11
No ratings yet
HTML Notes11
14 pages
HTML
No ratings yet
HTML
14 pages
HTMLComplete Notes
No ratings yet
HTMLComplete Notes
18 pages
Hyper Text Markup Language
No ratings yet
Hyper Text Markup Language
20 pages
Basic HTML Tags List
No ratings yet
Basic HTML Tags List
46 pages
HTML
No ratings yet
HTML
15 pages
HTML
No ratings yet
HTML
33 pages
Module 5
No ratings yet
Module 5
66 pages
WTP Unit 1
No ratings yet
WTP Unit 1
46 pages
HTML
No ratings yet
HTML
52 pages
HTML Unique Topics Slides
No ratings yet
HTML Unique Topics Slides
71 pages
2 O-Level-Project-Html-Programe
No ratings yet
2 O-Level-Project-Html-Programe
35 pages
ITIM Muskan
No ratings yet
ITIM Muskan
44 pages
PHP - Notes
No ratings yet
PHP - Notes
271 pages
WDD Practical File
No ratings yet
WDD Practical File
110 pages
BIT3105 INTERNET PROGRAMMING Notes Final
No ratings yet
BIT3105 INTERNET PROGRAMMING Notes Final
161 pages
HTML Notes
No ratings yet
HTML Notes
20 pages
HTML5 0
No ratings yet
HTML5 0
91 pages
HTML Hyper Text Markup Language
No ratings yet
HTML Hyper Text Markup Language
30 pages
Training Report Shreya-3
No ratings yet
Training Report Shreya-3
95 pages
Prajwal HTML CSS Notes2
No ratings yet
Prajwal HTML CSS Notes2
55 pages
Class Viii - 2023-24-25-60 PDF
No ratings yet
Class Viii - 2023-24-25-60 PDF
36 pages
HTML Basics for Web Developers
No ratings yet
HTML Basics for Web Developers
3 pages
HTML
No ratings yet
HTML
50 pages
E - Commerce Unit - 4
No ratings yet
E - Commerce Unit - 4
15 pages
SHUBHAM Complete Computer Applications File
No ratings yet
SHUBHAM Complete Computer Applications File
23 pages
It Spring Edutech: Chapter 1: Getting Started With HTML
No ratings yet
It Spring Edutech: Chapter 1: Getting Started With HTML
12 pages
Web Tech 1st Year
No ratings yet
Web Tech 1st Year
21 pages
HTML Notes
No ratings yet
HTML Notes
25 pages
Project For Nielit
No ratings yet
Project For Nielit
12 pages
Web Programmimg Mod1
No ratings yet
Web Programmimg Mod1
19 pages
Web Application Class XI Unit 2 Notes
67% (3)
Web Application Class XI Unit 2 Notes
12 pages
HTML Basics
No ratings yet
HTML Basics
27 pages
Unit Three HTML & XML
No ratings yet
Unit Three HTML & XML
25 pages
Lec 1 - Introduction - To - HTML
No ratings yet
Lec 1 - Introduction - To - HTML
16 pages
Introduction To HTML
No ratings yet
Introduction To HTML
20 pages
Creating SML2.5
No ratings yet
Creating SML2.5
30 pages
MM 1st Unit Notes Sum
No ratings yet
MM 1st Unit Notes Sum
30 pages
Unit 2
No ratings yet
Unit 2
22 pages
HTML Tags List With Examples
No ratings yet
HTML Tags List With Examples
61 pages
Unit - I (Widt)
No ratings yet
Unit - I (Widt)
23 pages
Vikas 60 PDF
No ratings yet
Vikas 60 PDF
23 pages
Unit 1
No ratings yet
Unit 1
72 pages
HTML, CSS, Bootstrap - and - JQuery
No ratings yet
HTML, CSS, Bootstrap - and - JQuery
55 pages
HTML Web Technology
No ratings yet
HTML Web Technology
45 pages
Practical File OF Web Development: Submitted To:-Submitted By
No ratings yet
Practical File OF Web Development: Submitted To:-Submitted By
19 pages
Unit 2 - HTML, CSS & XML
No ratings yet
Unit 2 - HTML, CSS & XML
106 pages
5.hypertext Markup Language - 063631
No ratings yet
5.hypertext Markup Language - 063631
5 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
HTML 5
No ratings yet
HTML 5
48 pages
Unit 1
No ratings yet
Unit 1
17 pages
Web Designing
No ratings yet
Web Designing
80 pages
HTML Tutorials
No ratings yet
HTML Tutorials
29 pages
HTML
No ratings yet
HTML
14 pages
C Notes
100% (1)
C Notes
96 pages
PHP 8.1 Updates for Developers
No ratings yet
PHP 8.1 Updates for Developers
6 pages
DELPHDOS
No ratings yet
DELPHDOS
9 pages
Dairy Management Software Guide
No ratings yet
Dairy Management Software Guide
21 pages
Get Started With Win32 and C++
No ratings yet
Get Started With Win32 and C++
148 pages
C++ Basics Summer Training Report
No ratings yet
C++ Basics Summer Training Report
20 pages
CV Bektur Soltobaev
No ratings yet
CV Bektur Soltobaev
1 page
Lab Manual: Web Technology Laboratory
No ratings yet
Lab Manual: Web Technology Laboratory
57 pages
BCS101
No ratings yet
BCS101
2 pages
Full Stack Web Development With Hands-On Lab
100% (3)
Full Stack Web Development With Hands-On Lab
17 pages
Qt Training for Developers
No ratings yet
Qt Training for Developers
128 pages
Syllabus of Core Java
No ratings yet
Syllabus of Core Java
4 pages
Lex and Yacc
No ratings yet
Lex and Yacc
13 pages
Improved Approach For Domain Modeling and Software Development A Volume in Computer Science Reviews and Trends Ebook PDF
100% (2)
Improved Approach For Domain Modeling and Software Development A Volume in Computer Science Reviews and Trends Ebook PDF
57 pages
INternship
No ratings yet
INternship
3 pages
Vulnerability Management Detection and Response (VMDR) Exam 2.0
0% (6)
Vulnerability Management Detection and Response (VMDR) Exam 2.0
4 pages
Backtrack 4 Guide Tutorial
No ratings yet
Backtrack 4 Guide Tutorial
9 pages
OS Scheduling & Memory Basics
No ratings yet
OS Scheduling & Memory Basics
18 pages
Cisco Application Centric Infrastructure (ACI)
No ratings yet
Cisco Application Centric Infrastructure (ACI)
7 pages
Solid Project
No ratings yet
Solid Project
9 pages
Basics of Computers - Office Tools
No ratings yet
Basics of Computers - Office Tools
3 pages
Org-Mode Basics: Ben Maughan October 9, 2015
No ratings yet
Org-Mode Basics: Ben Maughan October 9, 2015
8 pages
21CS1202 Web Appln Development QuestionBank Solution STUD
No ratings yet
21CS1202 Web Appln Development QuestionBank Solution STUD
6 pages
Jitendrakumar USICT
No ratings yet
Jitendrakumar USICT
1 page
C Program: Weekly Calendar Planner
No ratings yet
C Program: Weekly Calendar Planner
5 pages
Linux Syllabus
No ratings yet
Linux Syllabus
2 pages
Thesis Jakhongir Fayzullaev
No ratings yet
Thesis Jakhongir Fayzullaev
62 pages
Microservices White Paper
No ratings yet
Microservices White Paper
10 pages
13
No ratings yet
13
50 pages