JSP is used to design the user interface of an application, CSS is used to provide set of properties.
We can write CSS using three different ways
1) inline CSS:- we will write CSS tag under HTML elements
<div style="width:200px; height:100px; background-color:green;"></div>
2) Internal CSS:- we will write CSS under <style> block.
<style type="text/css">
#abc
{
width:200px;
height:100px;
background-color:green;
}
</style>
<div id="abc"></div>
3) External CSS:- we will write CSS to create a separate file and link it into HTML Web pages.
create a separate file and named it style.css
#abc
{
width:200px;
height:100px;
background-color:green;
}
go into Jsp page and link style.css
<link href="style.css" type="text/css" rel="stylesheet" />
<div id="abc">
</div>
Example of Inline CSS under JSP Web page:-
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div style="background-color:cyan;height:200px;">
Hello
<p>hj ghshjsdg hf gsdhfg hsdjhsadg hdfgs ahg h</p>
</div>
<div style="background-color:gray;height:500px;">
<div style="background-color:blue; height:300px;width:50%;float:left;margin-top:50px;">
</div>
<div style="background-color:orange;height:300px;width:49%;float:left;margin-top:50px;">
</div>
</div>
<div style="background-color:cyan;height:200px;">
<div style="float:left;height:180px;width:33%;">
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
</div>
<div style="float:left;height:180px;width:33%;">
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
</div>
<div style="float:left;height:180px;width:33%;">
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
<p>djf sgfhdg hfghdsfdsf</p>
</div>
</div>
</body>
</html>
Example of Internal CSS:-
Step1st:-
Add .jsp file and create empty block css under head section and write <div></div> under body.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#header
{
}
#middle
{
}
#footer
{
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="middle">
middle
</div>
<div id="footer">
footer
</div>
</body>
</html>
Step2nd:-
Fill set of properties under CSS #block
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#header
{
background-color: orange;
height:200px;
}
#middle
{
background-color: black;
height:500px;
color:white;
}
#footer
{
background-color: orange;
height:100px;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="middle">
middle
</div>
<div id="footer">
footer
</div>
</body>
</html>
Step3rd:-
create three partitions on the middle section then we create .block under CSS that will be called by the class selector.
now our JSP file will be modified and complete code will be this.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
*
{
margin:0px;
}
#header
{
background-color: orange;
height:200px;
}
#middle
{
background-color: black;
height:500px;
color:white;
}
.mid
{
width:28%;
float:left;
background-color: gray;
height:400px;
margin-top:50px;
margin-left:50px;
}
#footer
{
background-color: orange;
height:100px;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="middle">
<div class="mid">
</div>
<div class="mid">
</div>
<div class="mid">
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
External CSS:-
......................................................................................................................................................
Step1st:-
Create Style.css file and write the following code:-
*
{
margin:0px;
}
#header
{
background-color: orange;
height:200px;
}
#middle
{
background-color: black;
height:500px;
color:white;
}
.mid
{
width:28%;
float:left;
background-color: gray;
height:400px;
margin-top:50px;
margin-left:50px;
}
#footer
{
background-color: orange;
height:100px;
}
Create demo3.jsp:-
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
header
</div>
<div id="middle">
<div class="mid">
</div>
<div class="mid">
</div>
<div class="mid">
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
POST Answer of Questions and ASK to Doubt