3

I am newcomer in html code so that i have no huge knowledge about html coding. When I use inline style, it seems to be working fine but the css code inside the head element doesn't show in the web page. The code seems fine to me. I've tried running this code in both Chrome and Firefox, but the problem persists in both of them. Please check my code & give me any advice or solution. Thanks.

fieldset: {
    			background: lightyellow;
    			border: 10px solid yellow;
    			margin-bottom: 10px;
    			width: 720px;
    		}
    		label: {
    			width: 180px;
    		}
<h1>Please Enter Your Details For Our Dating Website!</h1>
    	<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
    		<fieldset>
    			<legend>Your Face</legend>
    			<label for="image">Your image:</label>
    			<input type="file" name="image" required>
    			<br>
    			Image preview:
    			<img src="" id="preview">
    		</fieldset>
    		<fieldset>
    			<legend>Your General Details</legend>
    			<label for="name">Name:</label>
    			<input type="text" name="name" required>
    			<br>
    			<label for="gender">Gender:</label>
    			<input type="radio" name="gender" required>
    			Male
    			<input type="radio" name="gender" required>
    			Female
    			<br>
    			<label for="age">Age:</label>
    			<input type="number" name="age" required>
    			<br>
    			<label for="dob">Date of birth:</label>
    			<input type="date" name="dob">
    			<br>
    			<label for="color">Favorite color:</label>
    			<input type="color" name="color">
    			<br>
    			<label for="country">Which country:</label>
    			<select name="country">
    				<option value="no"></option>
    				<option value="en">England</option>
    				<option value="in">India</option>
    				<option value="jp">Japan</option>
    				<option value="sp">Spain</option>
    				<option value="us">USA</option>
    			</select>
    		</fieldset>
    		<fieldset>
    			<legend>Your Indicators</legend>
    			<label for="height">Height:</label>
    			Short
    			<input type="range" name="height" min="0" max="100">
    			Tall
    			<br>
    			<label for="salary">Salary:</label>
    			Poor
    			<input type="range" name="salary" min="0" max="100">
    			Rich
    			<br>
    		</fieldset>
    		<fieldset>
    			<legend>Your Contact Information</legend>
    			<label for="email">Email:</label>
    			<input type="email" name="email" required>
    			<br>
    			<label for="mobile">Mobile:</label>
    			<input type="tel" name="mobile">
    			<br>
    			<label for="address">Address:</label>
    			<textarea name="address"></textarea>
    			<br>
    			<label for="contact">Method to contact you:</label>
    			<input type="checkbox" name="contact">
    			Email
    			<input type="checkbox" name="contact">
    			Whatsapp
    			<input type="checkbox" name="contact">
    			In-app chat
    		</fieldset>
    		<input type="submit" name="Submit">
    	</form>

1 Answer 1

7

Remove this "colon :" from styles properties.

fieldset : {

Then others will work fine.

<!DOCTYPE html>
<html>
<head>
	<title>Dating Web Site</title>
	<style>
		fieldset {
			background: lightyellow;
			border: 10px solid yellow;
			margin-bottom: 10px;
			width: 720px;
		}
		label {
			width: 180px;
		}
	</style>
</head>
<body>
	<h1>Please Enter Your Details For Our Dating Website!</h1>
	<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
		<fieldset>
			<legend>Your Face</legend>
			<label for="image">Your image:</label>
			<input type="file" name="image" required>
			<br>
			Image preview:
			<img src="" id="preview">
		</fieldset>
		<fieldset>
			<legend>Your General Details</legend>
			<label for="name">Name:</label>
			<input type="text" name="name" required>
			<br>
			<label for="gender">Gender:</label>
			<input type="radio" name="gender" required>
			Male
			<input type="radio" name="gender" required>
			Female
			<br>
			<label for="age">Age:</label>
			<input type="number" name="age" required>
			<br>
			<label for="dob">Date of birth:</label>
			<input type="date" name="dob">
			<br>
			<label for="color">Favorite color:</label>
			<input type="color" name="color">
			<br>
			<label for="country">Which country:</label>
			<select name="country">
				<option value="no"></option>
				<option value="en">England</option>
				<option value="in">India</option>
				<option value="jp">Japan</option>
				<option value="sp">Spain</option>
				<option value="us">USA</option>
			</select>
		</fieldset>
		<fieldset>
			<legend>Your Indicators</legend>
			<label for="height">Height:</label>
			Short
			<input type="range" name="height" min="0" max="100">
			Tall
			<br>
			<label for="salary">Salary:</label>
			Poor
			<input type="range" name="salary" min="0" max="100">
			Rich
			<br>
		</fieldset>
		<fieldset>
			<legend>Your Contact Information</legend>
			<label for="email">Email:</label>
			<input type="email" name="email" required>
			<br>
			<label for="mobile">Mobile:</label>
			<input type="tel" name="mobile">
			<br>
			<label for="address">Address:</label>
			<textarea name="address"></textarea>
			<br>
			<label for="contact">Method to contact you:</label>
			<input type="checkbox" name="contact">
			Email
			<input type="checkbox" name="contact">
			Whatsapp
			<input type="checkbox" name="contact">
			In-app chat
		</fieldset>
		<input type="submit" name="Submit">
	</form>
</body>
</html>

1
  • 1
    Oh! man, such a stupid mistake. Why did I even bother the people here. Thank you for the quick reply. Nov 17, 2016 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.