Arcron-ArchLinux/100-Days-Of-Code
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Used the different types of CSS elements

Browse Source
This commit is contained in:
Arcron ArchLinux 2024-10-30 16:52:19 +05:30
parent 685d88eefb
commit bb0dd8dcea
5 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/goal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

32
Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/index.html Normal file
View File

@ -0,0 +1,32 @@
<!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>

34
Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution-style.css Normal file
View File

@ -0,0 +1,34 @@
ol {
margin-left: -40px;
margin-top: -20px;
list-style-position: inside;
}
/* Write your CSS below, don't change the rules above. */
/* TODO 1: Set the CSS for all paragraph tags to "color: red;" */
p {
color: red;
}
/* TODO 2: Set the CSS for all elements with a class of "note" to "font-size: 20px;" */
.note {
font-size: 20px;
}
/* TODO 3: Set the CSS for the element with an id of "id-selector-demo" to "color: green;" */
#id-selector-demo {
color: green;
}
/* TODO 4: Set the CSS for the li elements that have the "value" attribute set to "4" to have "color: blue;" */
li[value="4"] {
color: blue;
}
/* TODO 5: Set all elements to have "font-family: sans-serif;" */
* {
text-align: center;
}

32
Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors</title>
<link rel="stylesheet" href="./solution-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">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>

27
Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/style.css Normal file
View File

@ -0,0 +1,27 @@
ol {
margin-left: -40px;
margin-top: -20px;
list-style-position: inside;
}
/* Write your CSS below, don't change the rules above. */
p {
color: red;
}
.note {
font-size: 20px;
}
#id-selector-demo {
color: green;
}
li[value="4"] {
color: blue;
}
* {
text-align: center;
}