Click to edit Master title style
HTML
Introduction
1
HTML Div Tag
Click to edit Master title style
The HTML <div> tag defines sections in
HTML documents, serving as containers
styled with CSS or controlled with JavaScript.
It’s easily customized using class or id
attributes and can contain various content.
2 2
Click
Div to
tagedit Master title style
Usage
•The div tag is the block-level tag.
•It is used for applying styles and layout structure <div> and
allows us to manipulate and position content through CSS.
•It also divides content into logical sections, aiding in the
readability and maintainability of the code.
•As we know, a Div tag is a block-level tag containing the entire
width. Hence, every div tag will start from a new line and not the
same line.
3 3
Click to edit
<!DOCTYPE Master title style
html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
IT <div>I am a div</div> Programmer.
<p>The yellow background is added to demonstrate the footprint of the DIV
element.</p>
</body>
</html>
4 4
<!DOCTYPE html>
Click to edit Master
<html>
<style> title style
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>
</body>
</html> 5 5
<!DOCTYPE html>
Click to edit Master title style
<html>
<style>
div {
width: 300px;
margin: auto;
background-color: #FFF4A3;
}
</style>
<body>
<h1>Center align a DIV element</h1>
<div>
<h2>Tayabas</h2>
<p>CITY.</p>
<p>QUEZON.</p>
</div>
</body>
</html>
6 6
<!DOCTYPE html>
<html>
Click to edit Master title style
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:#FFF4A3;">
<h2>Tayabas</h2>
<p>City</p>
<p>Quezon</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Lucena</h2>
<p>City</p>
<p>Quezon</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Lucban</h2>
<p>City</p>
<p>Quezon</p>
</div>
7 7
</body>
Click to edit Master title style
8 8
Click to edit Master title style
9
9
Click to edit Master title style
1010
}
</style>
Click to edit Master title style
<body>
<div style="background-color:#FFF4A3;">
<h2>Tayabas</h2>
<p>City</p>
<p>Quezon</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Lucena</h2>
<p>City</p>
<p>Quezon</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Lucban</h2>
<p>City</p>
<p>Quezon</p>
</div>
</div> 1111
ClickThe
to edit attribute
Master
class is often used to point
title style
to a class name in a style sheet. It can
also be used by a JavaScript to access and
manipulate elements with the specific
class name.
In the following example we have
three <div> elements with
a class attribute with the value of "city".
All of the three <div> elements will be
styled equally according to the .city style
definition in the head section:
1212
<style>
.city {
background-color: tomato;
Click to edit Master title style
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Tayabas</h2>
<p>City</p>
</div>
<div class="city">
<h2>Lucena</h2>
<p>City</p>
</div>
<div class="city">
<h2>Lucban</h2>
1313
<p>Quezon</p>
Click to edit Master title style
1414
Click to edit Master title style
1515
Click to edit Master title
<!DOCTYPE html>style
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>IT <span class="note">PROGRAMMER</span>
101</h1>
<p>This is some <span class="note">important</span>
text.</p>
</body>
</html>
1616
Click to edit Master title style
1717
<html>
<head>
<style>
Click to edit Master title style
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name
"city":</p>
<h2 class="city">TAYABAS</h2>
<p>CITY</p>
<h2 class="city">LUCENA</h2>
<p>CITY.</p>
<h2 class="city">LUCBAN</h2>
<p>QUEZON</p>
1818
Click to edit Master title style
1919
<html>
<head>
Click to edit Master title style
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<h2 class="city main">LUCENA</h2>
<h2 class="city">TAYABAS</h2>
<h2 class="city">LUCBAN</h2>
</body> 2020
</html>
HTML
Click id Attribute
to edit Master title style
The id attribute specifies a unique id for an HTML
element. The value of the id attribute must be unique
within the HTML document.
The id attribute is used to point to a specific style
declaration in a style sheet. It is also used by
JavaScript to access and manipulate the element with
the specific id.
The syntax for id is: write a hash character (#),
followed by an id name. Then, define the CSS
properties within curly braces {}.
2121
<!DOCTYPE html>
Click to edit Master title style
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
2222
Click to edit Master title style
2323
background-color: lightblue;
color: black;
Click to edit Master title style
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">TAYBAS</h2>
<p>CITY.</p>
<h2 class="city">LUCENA</h2> 2424
<p>CITY</p>
