First Create a Folder on the Desktop or any where in the drive and Save it.
Next Open the Notepad and Save it with in the Folder and name the File as StyleSheet.css here .css is the extension
Next write the following Code in the StyleSheet.css and Save it.
h1 {
text-align:center;
}
body {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 1028px;
}
fieldset {
float: left;
width: 47% ;
margin: 0;
height: 180px;
}
Next Open the Notepad and Save it with in the Folder and name the File as Test.html here .html is the extension
Next write the following Code in the Test.html and Save it.
In the below Code we need to include the path of the stylesheet i.e we have created first
Now the style's will be applied for the tags in Test.html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Example</title>
<link href="C:\Documents and Settings\mti0914\Desktop\tests\StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Example</h1>
</header>
<section>
<form id="order" method="post" action="">
<fieldset id="userDetails">
<legend>User Details</legend>
<p>
<label>First name:
<input type="text" name="fname">
</label>
</p>
<p>
<label>Last name:
<input type="text" name="lname">
</label>
</p>
</fieldset>
<fieldset id="colour">
<legend>Pick your colour</legend>
<p>
<label>
<input type="checkbox" name="colour" value="red">red
</label>
</p>
<p>
<label>
<input type="checkbox" name="colour" value="green">green
</label>
</p>
<p>
<label>
<input type="checkbox" name="colour" value="blue">blue
</label>
</p>
</fieldset>
<p style="clear: left;">
<label>Choose file:
<input type="file" name="file">
</label>
</p>
<p>
<label>Choose your town:
<select name="town">
<option value="">Please Select ...</option>
<option value="Swindon">Swindon</option>
<option value="London">London</option>
<option value="Stafford">Stafford</option>
</select>
</label>
</p>
<p>
<label>Message:
<textarea name="message"></textarea>
</label>
</p>
<p>
<input type="submit">
</p>
<p>
<input type="reset">
</p>
</form>
</section>
</body>
</html>
Next Open the Notepad and Save it with in the Folder and name the File as StyleSheet.css here .css is the extension
Next write the following Code in the StyleSheet.css and Save it.
h1 {
text-align:center;
}
body {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 1028px;
}
fieldset {
float: left;
width: 47% ;
margin: 0;
height: 180px;
}
Next Open the Notepad and Save it with in the Folder and name the File as Test.html here .html is the extension
Next write the following Code in the Test.html and Save it.
In the below Code we need to include the path of the stylesheet i.e we have created first
Now the style's will be applied for the tags in Test.html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Example</title>
<link href="C:\Documents and Settings\mti0914\Desktop\tests\StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Example</h1>
</header>
<section>
<form id="order" method="post" action="">
<fieldset id="userDetails">
<legend>User Details</legend>
<p>
<label>First name:
<input type="text" name="fname">
</label>
</p>
<p>
<label>Last name:
<input type="text" name="lname">
</label>
</p>
</fieldset>
<fieldset id="colour">
<legend>Pick your colour</legend>
<p>
<label>
<input type="checkbox" name="colour" value="red">red
</label>
</p>
<p>
<label>
<input type="checkbox" name="colour" value="green">green
</label>
</p>
<p>
<label>
<input type="checkbox" name="colour" value="blue">blue
</label>
</p>
</fieldset>
<p style="clear: left;">
<label>Choose file:
<input type="file" name="file">
</label>
</p>
<p>
<label>Choose your town:
<select name="town">
<option value="">Please Select ...</option>
<option value="Swindon">Swindon</option>
<option value="London">London</option>
<option value="Stafford">Stafford</option>
</select>
</label>
</p>
<p>
<label>Message:
<textarea name="message"></textarea>
</label>
</p>
<p>
<input type="submit">
</p>
<p>
<input type="reset">
</p>
</form>
</section>
</body>
</html>
No comments:
Post a Comment