HTML
SE SSION-4
[Link]
DIV
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.
Note: Browsers add line breaks before and after <div> elements by default.
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, the div tag contains the entire width. Hence, every div tag
will start from a new line and not the same line.
[Link]
◦ attributes(align,class,style)
Eg:
<div align="left|right|center|justify" style="css-property:value;" class="classname">
We can use class on that particular div and apply CSS either inside a <style> tag or linking an external
CSS file.
In case of internal CSS: We need to define Class in the <head> section of HTML within <style> element.
In case of External CSS: We need to create a separate .css file and include it in HTML code
inside <head> section using <link> element.
</div>
◦ Class is a style defined in same page or another css file.
◦ Style in same page defined using <style> tag.
[Link]
CSS(Cascading Style Sheet)
CSS has 3 ways to style your HTML:
Inline: Add styles directly to HTML elements (limited use).
Internal: Put styles inside the HTML file in a <style> tag.
External: Create a separate CSS file (.css) and link it to your HTML.
[Link]
Inline
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to
the relevant element. The style attribute can contain any CSS property.
<h1>HTML</h1>
<h1 style="font-size: 52px;font-family: 'Courier New', Courier, monospace;color: blueviolet;">HTML</h1>
<p style="color: blue;">This a paragraph</p>
<div style="width: 800px;height: 300px;background-color: rgb(44, 132, 219);color: #fff;padding: 10px;border-
radius: 50px;border:1px solid red;">
<h1 >Division</h1>
<p>Division tag used for layout creation</p>
HTML
</div>
<h1 style="color:blue ;">This another heading</h1>
<p>This is another paragraph</p>
[Link]
[Link]
Internal
An internal style sheet may be used if one single page has a unique style. Internal styles are defined
within the head section of an HTML <style> tag.
<head>
#d1,#d2
<title> stylesheet</title>
{ width: 500px; height: 300px; background-
<style type="text/css">
color: #987; color: #fff; padding: 5px; }
body
{ #d1 h1
margin: 0px; background-color: #876; { font-family: Arial; color: #0f0; }
} .content
h1{ { width: 1000px; height:
font-family: Arial; color: #00f; 300px; background-color: #678; color: #fff; }
} .content p{ font-family: 'Times New Roman', Times,
p{ serif; color:aqua; }
font-family: times new roman; color: #0f0; h2,h3{
} color: darkmagenta; }
</style>
</head>
[Link]
<body> <p>This a paragraph</p>
<h1 style="font-size: 40px;color: #f00;font- <div id="d1">
family: arial">HTML</h1>
<h1>HTML</h1> <h2>HTML</h2> <h3>HTML</h3
<h1>HTTP</h1> >
<p style="color: #00f;">This a paragraph</p> </div>
<p>This a paragraph</p> <div class="content">
<h1>HTML</h1>
<div style="width: 500px;height: 300px;background-
color: #234;color: #fff;padding: 5px;">Division tag used for Division tag is used for create page layouts
layout creation</div> <p>This a paragraph</p>
<table class="content" border="1"> </div>
<tr> <div id="d2">
<th>No</th><th>Name</th> <th>Course</th><th>Mark</th> <h1>HTML</h1>
</tr> <h2>HTML</h2>
<tr> <h3>HTML</h3>
<td>1</td> <td>Ram</td> <td>C++</td> <td>100</td> </div>
</tr> </body>
</table> </html>
[Link]
[Link]
External
An external style sheet, you can change the look of an entire website by changing just one file. Each
page must include a reference to the external style sheet file inside the <link>element. The <link>
element goes inside head the section .
body
{ margin:0px; background-color:#fddf3f; background-
image: url("images/[Link]"); background-repeat: no-repeat; background-position: center; }
h1,h3
{ color:red; }
.header
{ width:50%; height:150px; left:50px; right:500px; background-color:#456789; background-
image: url("images/[Link]"); }
.banner
{ width:100%; height:300px; background-olor:#987654; }
[Link]
.menus
{ width:100%; height:50px; background-color:#ff6589; }
.content
{ width:100%; height:800px; background-color:#aefaab; }
.footer
{ width:100%; height:100px; background-color:#ab87ac; }
Save this file [Link]
[Link]
<html>
<head>
<link href="[Link]" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Web Page</h1>
<h2>Web Page</h2>
<h3>Web Page</h3>
<!-- header section start-->
<div class="header">Header section</div>
<!--end header-->
<div class="content">
Content Area
</div>
<div class="footer"> footer section</div>
</body>
</html>
[Link]
[Link]
END
[Link]
Design a page like it
[Link]