AIM:
To create a webpage to implement inline cascading style sheet.
Step 1:Create a html file.
Step 2: Inside the body tag define the click reference, its type and set href and also define the required heading h1,h2,…hn for the paragraph.
Step 3: If cancel is clicked pass.html gets loaded and it asks the user to set the username and password. Step 4: If login is clicked Logon.html gets loaded and asks for an password to enter into the form.
Step 5: Close the body tag and all opened tags.
INLINE.HTML
<html>
<head>
<title>inline sheet</title>
</head>
<body>
<p style="font-family:Showcard Gothic">Welcome user..</p>
<p style="font-size:40pt;font-family:Microsoft sans serif">Gmail</p>
<p style="font-size:30pt;color:red;font-family:arial">The worlds largest spam free Email provider</p>
<p style="font-size:30pt;color:blue;font-family:Kristen ITC">Old user login here...</p>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value=">@gmail.com.
<br><br> Password:<input type="password"value=""<br><br></h4>
<input type="submit" value="login">
<input type="reset"value="cancel"><br><br>
<p style="font-size:15pt;font-family=Lucida Handwriting">if u have your username or password
<a href="pass.html">click</a>here<br>
<p style="font-size:15pt;font-family=fixedsys">if you are a new user
<a href="logon.html">logon</a>here</p>
</body>
</html>
<html>
<head>
<title>hai</title>
</head>
<body>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value=" ">@gmail.com.<br><br>
password:<input type="password" value=""><br><br> new password:<input type="new password" value=""><br>
<br>
confirm password:<input type="confirm password"value=""><br><br>
<input type="submit" value="ok">
<input type="submit" value="cancel">
</body>
</html>
<html>
<head> <title>hai</title>
</head> <body>
<h1>welcome to gmail</h1>
</body>
</html>
Thus the web page is created using inline cascading style sheet was successfully executed and output is verified.
AIM:
To create a webpage with the following using html and to embed the style sheet
Step 1: Create html file with the style tag, inside head tag.
Step 2: Set the style such as font-family, font-size, color, left etc, for the heading h1,h2,…h6 and respectively in the style type.
Step 3: Close the head tag.
Step 4: Specify the heading and information required inside the body tag. Step 5: Close the opened tag.
Embed.html
<html>
<head>
<title> Embedded style sheet </title>
<style type="text/css"> h1
{
font-family:arial; color:green;
}
h2
{
font-family:arial; color:red; left:20px;
}
h3
{
font-family:arial; color:blue;
}
p
{
font-size:14pt;
font-family:verdana;
}
</style>
</head>
<body>
<h1> <center>EMBEDDED STYLE SHEET </h1>
<h2> Computer science and Engineering</h2>
<h3>
<p>
It is the best department. It has several lab facilities.
</p>
</h3>
</body>
</html>
SAMPLE OUTPUT:
RESULT:
Thus the embedded style sheet was successfully created using cascading style sheet and output is verified.
AIM:
To create a webpage with the following using html and to implement external style sheet.
Step 1: Create a html file.
Step 2: Inside the head tag define the link reference, its type and set href as “ex.css”. Step 3:Close the head tag.
Step 4: Inside the body tag define the required heading h1,h2,…h6 and paragraph. Step 5: Close the body tag and all opened tags.
Step 6:Create the cascade style sheet file “ex.css”.
Step 7: Define the style formats such as font color, font size, etc to the corresponding headings and paragraph and save it as “ex.css”.
External.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body> <center>
<h1> External style sheet</h1></center>
<h2><center>ACET</center></h2>
<p>
<h3>Our Institution consists of various departments:<br> 1.CSE<br>
</p>
</body>
</html>
h1
{
font-family:arial; color:red;
}
h2
{
font-family:verdana; color:green;
}
Thus the external style sheet was created using html and output is verified.