WEB PAGE CREATION USING CSS
AIM:
To create a web page with all
types of Cascading Style Sheets.
ALGORITHM:
Step1: Start the
Program.
Step 2: Include
all the information using various HTML tags.
Step 3: Create a
CSS file to predefine the appearance of the HTML.
Step4: Add the
CSS file in all the HTML pages.
Step5: Stop the
program.
CODING:
inline.html
<html>
<head>
<title>Inline....</title>
</head>
<body>
<h2 style="margin-left:3cm;font-family:Courier New">Demonstration Of Inline Style Rules</h2>
<hr>
<p>
Contents Without Any Style Rules<br>
Contents Without Any Style Rules<br>
Contents Without Any Style Rules<br>
</p>
<p style="font-size:20pt;color:red;font-family:impact">
Contents With Inline Style Rules1<br>
Contents With Inline Style Rules1<br>
Contents With Inline Style Rules1<br>
</p>
<p style="font-size:20pt;color:#2222FF;font-family:courier">
Contents With Inline Style Rules2<br>
Contents With Inline Style Rules2<br>
Contents With Inline Style Rules2<br>
</p>
</body>
</html>
embedded.html
<html>
<head>
<title>Embedded....</title>
<style type="text/css">
em{background-color:#8000ff;color:white}
h1{font-family:arial;color:#A00000}
p{font-size:14pt;font-family:courier}
.special{color:blue}
</style>
</head>
<body>
<h1>Demonstration of embedded style sheets</h1>
<p>
Contents With Embedded Style Rules1<br>
Contents With Embedded Style Rules1<br>
Contents With Embedded Style Rules1<br>
</p>
<h1>Contents With Embedded Style Rules2</h1>
<p class="special">
Hai <em>Mr.Bean</em> How r u?
</p>
</body>
</html>
<head>
<title>Embedded....</title>
<style type="text/css">
em{background-color:#8000ff;color:white}
h1{font-family:arial;color:#A00000}
p{font-size:14pt;font-family:courier}
.special{color:blue}
</style>
</head>
<body>
<h1>Demonstration of embedded style sheets</h1>
<p>
Contents With Embedded Style Rules1<br>
Contents With Embedded Style Rules1<br>
Contents With Embedded Style Rules1<br>
</p>
<h1>Contents With Embedded Style Rules2</h1>
<p class="special">
Hai <em>Mr.Bean</em> How r u?
</p>
</body>
</html>
conflict.html
<html>
<head>
<title>Conflicting....</title>
<style type="text/css">
p{font-family:courier;color:blue}
h3{color:blue}
h3 em{color:red}
</style>
</head>
<body>
<hr>
Confliction Bertween Parent And Child Element<br>
p - ParentElement<br>
em - ChildElement<br>
<p>ParentElement <em>ChildElement</em></p>
<hr>
Confliction Resolved by using the style rule:h3 em{color:red}<br>
h3 - ParentElement<br>
em - ChildElement<br>
<h3>ParentElement <em>ChildElement</em></h3>
<hr>
</body>
</html>
<head>
<title>Conflicting....</title>
<style type="text/css">
p{font-family:courier;color:blue}
h3{color:blue}
h3 em{color:red}
</style>
</head>
<body>
<hr>
Confliction Bertween Parent And Child Element<br>
p - ParentElement<br>
em - ChildElement<br>
<p>ParentElement <em>ChildElement</em></p>
<hr>
Confliction Resolved by using the style rule:h3 em{color:red}<br>
h3 - ParentElement<br>
em - ChildElement<br>
<h3>ParentElement <em>ChildElement</em></h3>
<hr>
</body>
</html>
style.css
body{background-image:url(logo.jpg);background-position:bottom
right;background-repeat:no-repeat;background-color:black}
h1{color:white}
p{font-size:15pt;color:white;font-family:courier New}
a{text-decoration:none;color:blue}
a.MyClass{text-decoration:blink}
a:hover{text-decoration:underline;color:red;background-color:#ccffcc;font-size:1cm}
h1{color:white}
p{font-size:15pt;color:white;font-family:courier New}
a{text-decoration:none;color:blue}
a.MyClass{text-decoration:blink}
a:hover{text-decoration:underline;color:red;background-color:#ccffcc;font-size:1cm}
external.html
<html>
<head>
<title>External....</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>SreeInfoTech</h1>
<hr>
<p>
<u>ContactDetails</u><br>
Address Line1,<br>
Address Line2,<br>
Address Line3,<br>
Address Line4.E-mail: sreekandan@gmail.com </p>
<a class="MyClass" href="http://sreebrothers.blogspot.com">Click Here For More Info</a> </body></html>
<head>
<title>External....</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>SreeInfoTech</h1>
<hr>
<p>
<u>ContactDetails</u><br>
Address Line1,<br>
Address Line2,<br>
Address Line3,<br>
Address Line4.E-mail: sreekandan@gmail.com </p>
<a class="MyClass" href="http://sreebrothers.blogspot.com">Click Here For More Info</a> </body></html>
RESULT:
Thus the web page is created
using Cascading Style Sheets and output is verified.
No comments:
Post a Comment
Leave the comments