Selectors are patterns that identify (select) HTML elements.
These elements are the ones that will be styled.
Selectors are based on characteristics of the elements.
Common characteristics are: id, class, tag name, and others.
The three most common selector types are:
Class Selectors Selects elements based on class value.
ID Selectors Selects elements based on ID value.
Element Selectors Selects elements based on tag name.
Class Selectors
A class selector uses a class value to select elements.
Class selectors are prefixed with a period (
Typical class names are: .center-text, .btn-rounded , etc.
Class selectors are prefixed with a period (
.).Typical class names are: .center-text, .btn-rounded , etc.
Unlike ids, classnames can be specified in multiple HTML elements.
The style will be applied to all elements with that classname.
Example
Here we have 3 element types: <div>, <p>, and <section>. They are all styled with the same class selector.
Html Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.indigo {
background: #3630a3;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="indigo">
A div styled with a class selector
</div>
<p class="indigo">
A paragraph styled with a class selector
</p>
<section class="indigo">
A section styled with a class selector
</section>
</body>
</html>
Output
ID Selectors
An id selector uses an id value to select an element.
Id selectors are prefixed with a hash or pound sign (#).
Example names include: #sign-up and #product-license .
An id selector is used only on a single element, because id is unique across the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
#customer-form {
padding: 20px;
border: 1px solid #6266f1;
background-color: #f6f8ff;
}
#customer-form button {
padding: 10px;
background-color: #6266f1;
color: white;
border: 0;
border-radius: 5px;
}
#customer-form input[type="text"] {
width: 100%;
max-width: 250px;
}
</style>
</head>
<body>
<form>
<fieldset id="customer-form">
<legend>Customer Information</legend>
<label>First Name</label><br />
<input type="text" name="firstname"><br /><br />
<label>Last Name</label><br />
<input type="text" name="lastname"><br /><br />
<label>City</label><br />
<input type="text" name="city"><br /><br />
<label for="insurance">
<input type="checkbox" id="insurance"
name="hasinsurance"
value="hasinsurance">
Has Insurance
</label><br /><br />
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
Output
Element Selectors
An element selector uses tag names to select elements.
Examples include input, ul, article, button, div, and others.
Element selectors apply the same style across the same element types.
CSS libraries make extensive use of elements selectors for a consistent look and feel.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
button {
background: none;
border: 2px solid #4238ca;
color: #4238ca;
padding: 12px;
width: 100px;
}
button:hover {
background-color: #4238ca;
color: white;
}
</style>
</head>
<body>
<form action=""
class="form-buttons">
<button type="submit" name="color" value="apple">Apple</button>
<button type="submit" name="color" value="pear">Pear</button>
<button type="submit" name="color" value="peach">Peach</button>
</form>
</body>
</html>
Output
No comments:
Post a Comment