DIV
HTML CLASSES
ID
Besjana Begaj
Aims and objectives
• For what is used DIV, CLASSES & ID?
• Understanding syntax
• Use examples in w3 school to practices
coding in Dreamweaver
Scientific findings 2
HTML DIV
The <div> element is used as a container for other HTML elements.
<!DOCTYPE html>
<html>
<style>
div {
background-color: GREEN ;
}
</style>
<body>
<h1>HTML DIV Example</h1>
WEB DEVELOPMENT <div>I am a
div</div> LEVEL 3.
<p>The green background is
added to demonstrate the footprint
of the DIV element.</p>
</body>
</html> 3
Center align a <div> element
If you have a <div> element that is not 100% wide,
an d yo u w an t t o c e nt e r- al i g n i t , s e t t h e C SS margin pro pe r t y t o auto
<!DOCTYPE html>
<html>
<style>
div {
width: 300px;
margin: auto;
background-color: #FFF4A3;
}
</style>
<body>
<h1>Center align a DIV element</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
</body>
</html> 4
Multiple <div> elements
<!DOCTYPE html>
<html>
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
<p>CSS styles are added to make it easier to separate the divs, and to
make them more pretty:)</p>
</body>
5
</html>
Aligning <div> elements side by
side
6
Aligning <div> elements side by
side
Float
The CSS float property is used for positioning and formatting content and
allow elements float next to each other instead of on top of each other.
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
7
Inline-block
If you change the <div> element's display property from block to inline-block, the <div> elements will no longer add a line break before and after,
and will be displayed side by side instead of on top of each other.
Scientific findings 8
H T M L C l a s s A t t r i b u t e
The HTML class attribute is used to specify a class for an HTML element.
The class attribute is often used to point 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.
Multiple HTML elements can share the same
class.
Class Example
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:
H T M L i d A t t r i b u t e
The HTML id attribute is used to specify a unique id for an HTML element .
You cannot have more than one element with the same id in an HTML document.
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 {}.
HTML ID Example
and ID
ID
CLASS
Thank you
15
