1. Design horizontal and vertical navigation bars using embedded css.
CODE:
<html>
<head>
<title>program for vertical and horrizontal navigation bar</title>
<style type="text/css">
.ul1
{
list-style-type:none;
background-color:red;
}
.li1
{
display:inline;
background-color:red;
margin:15;
}
.ul2
{
list-style-type:none;
display:block;
background-color:yellow;
width:80;
}
.li2
{
display:block;
background-color:pink;
margin:15;
}
</style>
</head>
<body bgcolor="grey">
<ul class="ul1">
<li class="li1"><a href="http://www.dte.org.in\mca">MCA</a></li>
<li class="li1"><a href="http://www.dte.org.in\mba">MBA</a></li>
<li class="li1"><a href="http://www.dte.org.in\mcm">MCM</a></li>
</ul>
<ul class="ul2">
<li class="li2"><a href="http://www.dte.org.in\mca">MCA</a></li>
<li class="li2"><a href="http://www.dte.org.in\mba">MBA</a></li>
<li class="li2"><a href="http://www.dte.org.in\mcm">MCM</a></li>
</ul>
</body>
</html>
OUTPUT:
2. Design a web page using external css which uses nested styles.
CODE:
<html>
<head>
<title>program using nested css</title>
<style type="text/css">
.div
{
text-align:center;
color:red;
background-color:black;
font-size:30;
}
p
{
text-align:center;
color:blue;
background-color:green;
font-size:20;
}
.div p
{
text-align:center;
color:pink;
background-color:gray;
font-size:20;
}
</style>
</head>
<body>
<div class="div">
<p>
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
</p>
</div>
<p>
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
Nested css. Nested css. Nested css. Nested css.
</p>
</body>
</html>
OUTPUT:
3. Design a html page for creating image gallery using css and html.
CODE:
<html>
<head>
<title>Image gallery</title>
<link rel="stylesheet" href="imgal.css"/>
<style type="text/css">
fieldset
{
width:40%;
}
</style>
</head>
<body>
<fieldset>
<legend>
<font color="red" size="15" style="impact" >Image Gallery</font>
</legend>
<div class="img">
<a href="">
<img src="s1.jpg" alt="C3" width="130" height="100"/>
</a>
<div class="about">Nokia C3</div>
</div>
<div class="img">
<a href="">
<img src="s2.jpg" alt="C5" width="130" height="100" />
</a>
<div class="about">Nokia C5</div>
</div>
<div class="img">
<a href="">
<img src="s3.jpg" alt="C6" width="130" height="100" />
</a>
<div class="about">Nokia C6</div>
</div>
</fieldset>
</body>
</html>
imgal.css
.img
{
border:1px dashed;
text-align:center;
}
.img a
{
border:1px solid;
}
.about
{
text-align:center;
}
OUTPUT:
4. Design a web page using external css which uses the following properties.
· Text with comic font
· Text indent 10 px
· H4 with small letters
· H4 background image and underlined text
· Hyperlink with yellow color text.
CODE:
<html>
<head>
<title>design a web page using external css.</title>
<link rel="stylesheet" href="textsheet.css"/>
</head>
<body>
<font>
Text with comic font
Text indent 10 px
</font>
<h4>
H4 with small letters
H4 background image and underlined text
</h4>
<a href="http://www.google.com">
This a link with yellow color.
</a>
</body>
</html>
textsheet.css
font
{
font-family:comic;
text-indent:10px;
}
h4
{
background:url('image.jpg');
text-decoration:underline;
}
a
{
color:yellow;
}
OUTPUT:
5. Design a web page using external css which uses the following properties.
· Paragraph with Background page
· Aligh h1 text in center of web page
· h2 with right indent 10px
· Table with blue border at Top and Bottom
CODE:
<html>
<head>
<title>design a web page using external css.</title>
<link rel="stylesheet" href="5.css"/>
</head>
<body bgcolor="pink">
<p>
Paragraph with Background.Paragraph with Background.Paragraph with Background.Paragraph with
BackgroundParagraph with Background pageParagraph with BackgroundParagraph with BackgroundParagraph with
Background pageParagraph with BackgroundParagraph with Background pageParagraph with BackgroundParagraph with
BackgroundParagraph with Background pageParagraph with BackgroundParagraph with Background pageParagraph with
BackgroundParagraph with BackgroundParagraph with Background page
</p>
<h1>
Aligh the text in center of browser
<h1>
<h2>
Heading 2 with right indent 10pixels
<h2>
<table border=1s>
<th colspan=2>Table with blue border at Top and Bottom</th>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
5.css
p
{
background:url('image.jpg');
}
h1
{
text-align:center;
}
h2
{
text-indent:10px;
text-align:right;
}
table
{
border-top-color:blue;
border-bottom-color:blue;
}
OUTPUT:
6. Design a web page using external css which uses the following properties.
· Color of text should be ‘navy’
· Text having 13 font-size, Times New Roman font, and Italic
· Three types of hyperlinks with mentioned color visited-red active blue,
current-marron
· Set Border for paragraph in ‘magenta’ color.
CODE:
<html>
<head>
<title>main </title>
<link rel="stylesheet" type="text/css" href="properties.css" ></link>
</head>
<body bgcolor="pink">
<center><h1>
IT IS DBMS PAGE</h1></center>
<h3>What is DBMS?</h3><br>
<p>
• DBMS stands for database management system<br>
• Database is the storage for the data<br>
• There are two major databases---<br>
• Relaitional database<br>
• Distributed databases<br>
</p>
<a href ="http:www.http://www.w3schools.com/css/css_intro.asp">What is DBMS</a><br>
<a href ="http:www.http://www.w3schools.com/css/css_intro.asp">What is Relaitional DBMS</a><br>
<a href ="http:www.http://www.w3schools.com/css/css_intro.asp">What is Distributed databases</a>
</body>
</html>
Properties.CSS
p
{
color:navy;
font-size:13px;
font-family:"Times New Roman";
font-style:italic;
border-width:2px;
border-style:solid;
border-color:magenta;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
OUTPUT:
No comments:
Post a Comment