Ashish Dungran Ashish Dungran - 18 days ago 7
CSS Question

My CSS in the head element is not working

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>




Answer

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>

Comments