Utility Classes and ID vs Classes in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS_tutorial/style_three.css">
<title>Utility Classes</title>
</head>
<body>
<h1 id="heading">Main Heading</h1>
<p class="blog-content text-green bg-yellow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptatibus atque ullam amet ea pariatur dolore aliquam beatae accusantium sunt porro quam assumenda enim minima aut, consectetur veritatis possimus doloribus debitis necessitatibus numquam! Dicta a quidem animi natus consequatur dolores saepe laudantium culpa facilis eligendi necessitatibus repudiandae, illo debitis quis voluptate odio sunt molestias, eos inventore velit. Cumque in ratione, eligendi adipisci quibusdam earum suscipit ab, ipsam libero alias ad doloremque delectus nostrum rem veritatis laudantium enim atque vero voluptas. Iusto illo, eaque id maiores nam vel dignissimos culpa dolorum ducimus facere quasi aperiam, vitae accusantium doloremque reprehenderit, consectetur soluta.
</p>
<h2 class="text-red">Heading Two</h2>
<p class="blog-content bg-dark text-whitecolor">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, assumenda itaque, esse deserunt debitis sint dolorum officia eos quaerat veniam repudiandae aliquam at voluptate nostrum perferendis aliquid voluptates obcaecati dolor! Fuga, sint a facilis delectus inventore voluptatibus dolorum blanditiis illum commodi neque cumque mollitia tempora eligendi praesentium? Itaque, commodi recusandae.
</p>
<h2>Heading Three</h2>
<p class="bg-red text-whitecolor">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere in ex, hic ab deserunt, quas voluptates accusantium dolorem asperiores assumenda maxime itaque rerum incidunt quia commodi error earum? Similique, odio neque. Illum sequi expedita alias excepturi nostrum ipsum, neque odit debitis voluptates nulla magni perspiciatis quam iure praesentium ducimus saepe?
</p>
</body>
</html>
body{
font-family: Arial, Helvetica, sans-serif;
}
.text-red{
color: rgb(167, 53, 0);
}
.text-green{
color: rgb(0, 133, 33);
}
.bg-dark{
background: #555;
}
.bg-yellow{
background: #ffff00;
}
.text-whitecolor{
color: #ffffff;
}
.bg-red{
background: #ff0000;
}
.bg-brown{
background: #a52a2a;
}
Comments
Post a Comment