Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

My CSS in the head element is not working

Tags:

html

css

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>
like image 460
Ashish Dungran Avatar asked Jan 16 '26 23:01

Ashish Dungran


1 Answers

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>
like image 180
AVI Avatar answered Jan 19 '26 14:01

AVI



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!