-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab_030.html
133 lines (123 loc) · 6.7 KB
/
lab_030.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
<title>
Lab 30 - Selectors
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body data-lab-id="30">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 30</em>
Selectors
</h1>
<h2>Goals</h2>
<ul>
<li>Learn about HTML selectors</li>
<li>Learn about class and id selectors</li>
<li>Learn some advanced CSS selectors</li>
</ul>
<h2>CSS Selectors</h2>
<p>If HTML has tags, CSS has <strong>selectors</strong>. Every selector has a pair of curly brackets associated
with it. Inside the curly brackets, are <strong>properties</strong> with a <strong>colon</strong> assigning
them a <strong>value</strong>. Every property is separated from another by a
<strong>semi-colon</strong>.</strong>
</p>
<pre data-range="32,34" data-src="prism/css/3001.css"></pre>
<p>It is difficult to cover <em>all</em> of the tags. If you're ever uncertain
if a property applies to a tag, the best choice is to just try it. The nice thing about CSS being all about
appearance is that you can apply a property and refresh your webpage to see if it works!
</p>
<p>Worse comes to worst, you can use the references here: <a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference</a>
to browse the entire list of every single CSS property and more.</p>
<p class="note"><strong>Note:</strong> As always, during this Starter Pack, GitHub Discussions is open for you
to ask for help!</p>
<h2>HTML Selectors</h2>
<p><em>HTML selectors</em> are CSS selectors which apply to HTML tags. They are just the name of the HTML tag used as a
selector.</p>
<pre data-range="1,3" data-src="prism/css/3001.css"></pre>
<p>This will change the <code class="language-css">font-size</code> property of the HTML
<code class="language-html"><body></code> tag to be 14px.
</p>
<p>Anything that is an HTML tag can be a CSS HTML selector. The style will apply to all
HTML elements that are selected. For example, if you have the following:</p>
<pre data-range="5,9" data-src="prism/css/3001.css"></pre>
<p>This will make all <code class="language-html"><p></code> elements in your HTML have the same
styling. All paragraphs will be <code class="language-css">sans-serif</code>,
<code class="language-css">bold</code>, and have a font size of 14px.
</p>
<h2>Class and ID Selectors</h2>
<p>When we were coding our HTML, we added <code>classes=""</code> as attributes to various HTML tags.
The reason we did this was so that we could group specific elements together. Now when we are coding our
CSS, we can apply styles specifically to elements with specific classses.</p>
<p><em>Class selectors</em> are a period followed by the class name. ID selectors are a hashmark or pound symbol
followed by the ID name.</p>
<pre data-range="11,19" data-src="prism/css/3001.css"></pre>
<p class="note"><strong>Note:</strong> Remember that classes group multiple tags together while IDs can only be
applied uniquely to one tag per page.</p>
<p>You can combine HTML selectors with class and ID selectors to have even more specific selection control.
The example below selects only <code class="language-html"><p></code> paragraphs with the
<code>class="title"</code> affecting its font style, weight, and size. It also changes the text and background
color of <code class="language-html"><h1></code> headings with the <code>id="main-title"</code>.
</p>
<pre data-range="21,30" data-src="prism/css/3001.css"></pre>
<p class="note"><strong>Note:</strong> Make sure the HTML selector comes first and that there is no space between the HTML
selector and the class or ID in order to use it in this way.</p>
<h2>Attribute Selectors</h2>
<p>This is an advanced selector that that we'll use to style <code class="language-html"><input></code>
tags. <em>Attribute selectors</em> (<strong>[]</strong>) select an element based on any attributes attached to its HTML
tag.</p>
<pre data-range="36,49" data-src="prism/css/3001.css"></pre>
<h2>Child Selectors</h2>
<p><em>Child selectors</em> (<strong>></strong>) are used to select elements that are <strong>direct children</strong>
of another element,
meaning <em>one nested level down</em>. For example, with this HTML code:</p>
<pre data-range="9,28" data-src="prism/html/3001.html"></pre>
<p>You can use the following CSS to only draw a border around the position names and not the nested list. The
position names are <thead>
direct children of the unordered list with the <code>id="positions-list"</code>.</p>
<pre data-range="51,55" data-src="prism/css/3001.css"></pre>
<h2>Adjacent Selectors</h2>
<p><em>Adjacent selectors</em> (<strong>+</strong>) select elements that are directly after another element. For example:
</p>
<pre data-range="57,59" data-src="prism/css/3001.css"></pre>
<p>This CSS would select all first <code class="language-html"><p></code> paragraphs immediately following any <code
class="language-html"><h1></code> headings. Any paragraphs after that would not be selected and made bold.</p>
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad: true, theme: "base"});
</script>
</body>
</html>