Kategorie: HTML/CSS

The Most Important CSS Selectors

robert / / Daily Code, HTML/CSS 

/* https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 */

/* every element on page */
* {
border: 1px solid lightgrey;
}

/* element */
li {
text-decoration: underline;
}

/* class */
.hello {

}
/* id */
#name {

}

/* Descendant Selectors - example only affects links in an unordered list */
li a {
color: red;
}

/* Adjacent Selectors - examples only affects unordered lists that follow a h3 */
h3 + ul {
border: 4px solid red;
}

/* Attribute Selectors - examples selects only links that include the given url - can be used for any attribute like images */
a[href="http://www.google.com"] {
background: blue;
}

input[type="text"] {
background: orange;
}

/* nth of type */
ul:nth-of-type(3) {
background: purple;
}

li:nth-of-type(even) {
background: green;
}

A proper HTML5 form

robert / / Daily Code, HTML/CSS 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test form</title>
</head>
<body>
	<h1>Register</h1>

	<form action="">
		<label for="first">First Name</label>
		<input type="text" id="first" placeholder="first name" required>

		<label for="last">Last Name</label>
		<input type="text" id="last" placeholder="last name" required>

		<br /> 

		<label for="male">Male:</label>
		<input type="radio" name="gender" id="male" value="male">

		<label for="female">Female:</label>
		<input type="radio" name="gender" id="female" value="female">

		<label for="male">Other:</label>
		<input type="radio" name="gender" id="other" value="other">

		<br /> 

		<label for="email">E-Mail</label>
		<input type="email" id="email" placeholder="E-Mail" required>

		<label for="password">Password</label>
		<input type="password" id="password" placeholder="password" minlength="5" maxlength="10" required>

		<br />

		<span>Birthday:</span>

		<select name="month">
			<option>Month:</option>
			<option>January</option>
			<option>February</option>
		</select>

		<select name="year">
			<option>Year:</option>
			<option>2019</option>
			<option>2018</option>
			<option>2017</option>
		</select>

		<select name="day">
			<option>Day:</option>
			<option>1</option>
			<option>2</option>

		</select>

		<br /> 

		<input type="submit" name="submit" value="submit">

	</form>

</body>
</html>