Simple selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Simple selectors</title>
<style>
/* Universal Selector */
* {
font-family: Arial, Helvetica, sans-serif;
background-color:lightsteelblue
}
/* Element Selector */
h1 {
color: indigo;
background-color: whitesmoke;
}
/* Id selectors & Grouping Selectors */
#para1, #para2 {
background-color: cornflowerblue;
}
/* Class Selectors */
.textWhite {
color: white;
}
/* Specific Class Selector */
p.borderIndigo {
border: 4px solid indigo;
}
</style>
</head>
<body>
<!--
Element selector : selects HTML elements based on the element name.
Id selector : uses id attribute of an HTML element to select a specific element.
class selector : selects HTML elements with a specific class attribute.
universal selector (*) : selects all HTML elements on the page.
Grouping selector : selects all the HTML elements with the same style definitions.
-->
<h1>Demo: Simple selectors</h1>
<div>
<h3>Demo Id selector & grouping</h3>
<p id="para1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod natus nemo quas neque quia veniam, reprehenderit voluptate, accusantium doloremque, sunt ipsam amet veritatis ipsa corporis laboriosam dolores? Quaerat maiores, officia dolores facilis doloribus rerum. Quisquam quas mollitia quidem optio quasi dolor deleniti omnis quae voluptatum, odio sit praesentium et ducimus, minima fugit at accusamus provident sequi, repudiandae voluptatem nisi error. Est molestias blanditiis iure, in repellat recusandae voluptatibus deserunt consequuntur quam repellendus sit ratione delectus distinctio maxime perspiciatis quis aperiam voluptatem quidem adipisci culpa veniam ab? Nobis accusantium ipsa, temporibus facilis fugiat iure dolore praesentium esse aliquid, nisi ipsam tempore.</p>
<p id="para2">Quisquam quas mollitia quidem optio quasi dolor deleniti omnis quae voluptatum, odio sit praesentium et ducimus, minima fugit at accusamus provident sequi, repudiandae voluptatem nisi error. Est molestias blanditiis iure, in repellat recusandae voluptatibus deserunt consequuntur quam repellendus sit ratione delectus distinctio maxime perspiciatis quis aperiam voluptatem quidem adipisci culpa veniam ab? Nobis accusantium ipsa, temporibus facilis fugiat iure dolore praesentium esse aliquid, nisi ipsam tempore.</p>
</div>
<div>
<h3>Demo class & Specific-class selector</h3>
<p class="textWhite borderIndigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum corporis rerum temporibus nobis ullam optio pariatur a aperiam placeat, iusto corrupti officiis sit fuga alias minima odio. Placeat consectetur dolorum magni iusto a veniam unde fugiat nesciunt iste ipsa! Mollitia quam quae maxime dicta maiores vitae, nemo optio similique. Officiis et dolore dolores tempora a nostrum necessitatibus fuga adipisci sit, ipsum, vero quidem quaerat eos sint aperiam? Eligendi distinctio amet debitis corrupti necessitatibus cumque ad blanditiis, cum laboriosam dolores eveniet culpa error ducimus commodi, aut consectetur quidem natus delectus! Repudiandae non qui laboriosam? Possimus accusantium illo porro perspiciatis saepe exercitationem?</p>
</div>
</body>
</html>