Scribd
Upload
45 views

SV WT Record Week 4

The document describes an experiment on cascading style sheets (CSS). It includes 6 parts that demonstrate different CSS properties: 1) defining font styles, 2) setting a background image, 3) controlling image repetition, 4) styling link states, 5) defining layer styles, and 6) displaying customized cursors. The experiment uses HTML files with internal and external CSS to display the styled content and observe the results of applying each CSS property. The conclusion confirms that the CSS programs successfully styled the web pages as intended.

Uploaded by

Lohith Nani Royal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
45 views

SV WT Record Week 4

The document describes an experiment on cascading style sheets (CSS). It includes 6 parts that demonstrate different CSS properties: 1) defining font styles, 2) setting a background image, 3) controlling image repetition, 4) styling link states, 5) defining layer styles, and 6) displaying customized cursors. The experiment uses HTML files with internal and external CSS to display the styled content and observe the results of applying each CSS property. The conclusion confirms that the CSS programs successfully styled the web pages as intended.

Uploaded by

Lohith Nani Royal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

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:

font-family:Monotype Corsiva;
text-decoration:underline;
}
B
{

}
p
{

color:red;
font-size:20pt;
font-family:Monotype Corsiva;
text-decoration:underline;

color:red;
font-size:20pt;
font-family:Monotype Corsiva;
text-decoration:underline;
}
</style>
</head>
<body bgcolor="#ABCDEF" >
<q>Casecade style sheets are classified into 3 types</q><br>
<a>In-Line style sheet</a><br>
<b>Internal Style sheet</b>
<p>External Style Sheet</p>
</body>
</html>
Output:

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

Exp No: 4

Date:

|------------------------------------------- |
| File name::css2.html |
|-------------------------------------------|
<html>
<head><title>my different style</title>
<style type="text/css">
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<br>
image will be constant at all re-size window.
</body>
</html>
Output:

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

Exp No: 4

Date:

|------------------------------------------- |
| File name ::css3.html |
|-------------------------------------------|
<html>
<head>
<style type="text/css">
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>
<p>Mouse over and click the link and come back to main page(press backspace):<br>
<a href="css1.html">css1.html</a></p>
</body>
</html>
OUTPUT:

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

Exp No: 4

Date:

|------------------------------------------- |
| File name ::css4.html |
|-------------------------------------------|
<html>
<head><title>my different style</title>
</head>
<body>Layer 1 ON TOP<br>
<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>
<br>
Layer 2 ON TOP
<br>
<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>
<br>
</body>
</html>
OUTPUT:

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

Exp No: 4

Date:

|------------------------------------------- |
| File name::css4.html |
|-------------------------------------------|
<html>
<body>
<h1>Customized Cursors</h1>
<span style="cursor:auto"><a href="mypage.html">auto</a></span></a><br>
<a href="mypage.html"><span style="cursor:crosshair">crosshair</span></a><br>
<a href="mypage.html"><span style="cursor:auto">auto</span></a><br>
<a href="mypage.html"><span style="cursor:crosshair">crosshair</span></a><br>
<a href="mypage.html"><span style="cursor:default">default</span></a><br>
<a href="mypage.html"><span style="cursor:e-resize">e-resize</span></a><br>
<a href="mypage.html"><span style="cursor:help">help</span></a><br>
<a href="mypage.html"><span style="cursor:move">move</span></a><br>
<a href="mypage.html"><span style="cursor:n-resize">n-resize</span></a><br>
<a href="mypage.html"><span style="cursor:ne-resize">ne-resize</span></a><br>
<a href="mypage.html"><span style="cursor:nw-resize">nw-resize</span></a><br>
<a href="mypage.html"><span style="cursor:pointer">pointer</span></a><br>
<a href="mypage.html"><span style="cursor:progress">progress</span></a><br>
<a href="mypage.html"><a href="mypage.html"><span style="cursor:s-resize">sresize</span></a><br>
<a href="mypage.html"><span style="cursor:se-resize">se-resize</span></a><br>
<a href="mypage.html"><span style="cursor:sw-resize">sw-resize</span></a><br>
<a href="mypage.html"><span style="cursor:text">text</span></a><br>
<a href="mypage.html"><span style="cursor:w-resize">w-resize</span></a><br>
<a href="mypage.html"><span style="cursor:wait">wait</span></a><br>
</body>
</html>
OUTPUT:

Conclusion: The above CSS programs are successfully apply on web pages

SRI VENKATESWARA COLLEGE OF ENGINEERING, TIRUPATI-517507

You might also like