SV WT Record Week 4

Exp No: 4
Date:
SRI VENKATESWARA COLLEGE OF ENGINEERING

Karakambadi Road, Tirupathi. -517507
Department of Computer Science and Engineering
M.Tech I Semester
Web Technologies Lab
Title: Cascading Style Sheets
Aim: Design a web page using Cascading Style Sheet which include the following:
1. Use different fonts,styles.
2. Set a background image for the page
3. Control the repetition of the image with the background-repeat Property.
4. Define styles for links as
a) A:link, A:visited,A:active,A:hover
5. Define styles for layers.
LAYER1 ON TOP
LAYER 2 ON TOP
6. Display the Customized cursors mode
Procedure:
1. Open Notepad.
2. Select New Option |
3. Write the html code
4. go to File Menu | Select Save option. Choose directory as d:\html\week4\
5. Go to d:\html\week4\ directory
6. The Result will be display on Interet Explorer.
Source code:
|------------------------------------------- |
| File name ::css1.html |
|-------------------------------------------|
<html>
<head><title>my different style</title>
<style type="text/css">
q
{
color:red;
font-size:20pt;
font-family:Monotype Corsiva;
text-decoration:underline;
}
a
{
color:red;
font-size:20pt;
SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507
Exp. No: 4
Exp No: 4
Date:
}
B
{
}
p
{
color:red;
font-size:20pt;
color:red;
font-size:20pt;
}
</style>
</head>
<body bgcolor="#ABCDEF" >
<q>Casecade style sheets are classified into 3 types</q> 
<a>In-Line style sheet</a> 
Internal Style sheet
External Style Sheet
</body>
</html>
Output:
Exp No: 4
Date:
|------------------------------------------- |
| File name::css2.html |
|-------------------------------------------|
<html>
body
{
background-image:url(download.gif);
background-position:bottom right;
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>See this window in bottom right side corner one 
image will be constant at all re-size window.
</body>
</html>
Output:
Exp No: 4
Date:
|------------------------------------------- |
|-------------------------------------------|
<html>
<head>
a:link {text-decoration:none;color:green;}
a:visited {text-decoration:none;color:blue;}
a:active {text-decoration:none;color:yellow;}
a:hover {text-decoration:underline;color:red;}
</style>
</head>
<body>
Mouse over and click the link and come back to main page(press backspace): 
<a href="css1.html">css1.html</a>
</body>
</html>
OUTPUT:
Exp No: 4
Date:
|------------------------------------------- |
|-------------------------------------------|
<html>
</head>
<body>Layer 1 ON TOP 
<div style="position:relative;font-size:50pt; z-index:2;">Layer1</div>
<div style="position:relative;top:-50;left:5;color:red;font-size:50pt;z-index:1;">Layer2</div>
 
Layer 2 ON TOP
 
<div style="position:relative;font-size:50pt; z-index:3">Layer1</div>
<div style="position:relative;top:-50;left:5;color:red;font-size:50pt;z-index:4;">Layer2</div>
 
</body>
</html>
OUTPUT:
Exp No: 4
Date:
|------------------------------------------- |
| File name::css4.html |
|-------------------------------------------|
<html>
<body>
<h1>Customized Cursors</h1>
<a href="mypage.html">auto</a></a> 
<a href="mypage.html">crosshair</a> 
<a href="mypage.html">auto</a> 
<a href="mypage.html">crosshair</a> 
<a href="mypage.html">default</a> 
<a href="mypage.html">e-resize</a> 
<a href="mypage.html">help</a> 
<a href="mypage.html">move</a> 
<a href="mypage.html">n-resize</a> 
<a href="mypage.html">ne-resize</a> 
<a href="mypage.html">nw-resize</a> 
<a href="mypage.html">pointer</a> 
<a href="mypage.html">progress</a> 
<a href="mypage.html"><a href="mypage.html">sresize</a> 
<a href="mypage.html">se-resize</a> 
<a href="mypage.html">sw-resize</a> 
<a href="mypage.html">text</a> 
<a href="mypage.html">w-resize</a> 
<a href="mypage.html">wait</a> 
</body>
</html>
OUTPUT:
Conclusion: The above CSS programs are successfully apply on web pages

SV WT Record Week 4

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

SV WT Record Week 4

Încărcat de

Drepturi de autor:

Formate disponibile

Exp No: 4

SRI VENKATESWARA COLLEGE OF ENGINEERING

Title: Cascading Style Sheets

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

S-ar putea să vă placă și