Scribd
Upload
6 views

HTML Classes

HTML

Uploaded by

signup121
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

HTML Classes

HTML

Uploaded by

signup121
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like