32 lines
1.2 KiB
HTML
32 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CSS Selectors</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>CSS Selectors</h1>
|
|
<h2>Applying CSS to Different Parts of HTML</h2>
|
|
<!-- TODO 1: Set the CSS for all paragraph tags to "color: red" -->
|
|
<p class="note" color="red">1. The element selector targets elements based on their HTML tag name.</p>
|
|
|
|
<ol>
|
|
<!-- TODO 2: Set the CSS for all elements with a class of "note" to "font-size: 20px" -->
|
|
<li class="note" value="2">Class selectors target elements based on the value of the class attribute.</li>
|
|
|
|
<!-- TODO 3: Set the CSS for the element with an id of "id-selector-demo" to "color: green" -->
|
|
<li class="note" id="id-selector-demo" value="3">ID selectors target elements based on the value of the id
|
|
attribute.</li>
|
|
|
|
<!-- TODO 4: Set the CSS for the li elements that have the "value" attribute set to "4" to have "color: blue" -->
|
|
<li class="note" value="4">Attribute selectors target elements based on their attributes and values.</li>
|
|
|
|
<!-- TODO 5: Set all elements to have "text-align: center" -->
|
|
<li class="note" value="5">The universal selector targets all elements.</li>
|
|
</ol>
|
|
</body>
|
|
|
|
</html> |