week 4

site/introwebdev/week-4-id-class.html

@@ -0,0 +1,52 @@
+[!]
+[=title "Week 4: ID and Class"]
+[=content-]
+<p>
+	You might at this point have noticed that styling your elements "inline" with the <code>style</code> property is really annoying.
+	Fortunately, HTML saves the day with the <code>id</code> property! IDs are unique names for elements which can be <i>selected</i> by CSS.
+	For example:
+</p>
+<pre><code>&lt;style&gt;
+#just_one_element {
+	color: blue;
+}
+&lt;/style&gt;
+
+&lt;p id="just_one_element"&gt;
+	This text is blue!
+&lt;/p&gt;
+&lt;p id="another_element"&gt;
+	This text isn't changed at all!
+&lt;/p&gt;
+</code></pre>
+<p>
+	Note that selecting an ID is done in CSS with the "#" symbol - this is so CSS knows you aren't trying to select a type of tag. IDs should never actually contain a "#"!
+</p>
+<p>
+	This is pretty convenient! However, we can go ever further, with <i>classes</i>. The class attribute allows you to select
+	arbitrary elements with one single selector. They don't even have to be the same type! For example:
+</p>
+<pre><code>&lt;style&gt;
+.some_elements {
+	color: yellow;
+}
+&lt;/style&gt;
+&lt;p class="some_elements"&gt;
+	This text is yellow!
+&lt;/p&gt;
+&lt;p class="some_elements"&gt;
+	This text is also yellow!
+&lt;/p&gt;
+&lt;p id="some_elements"&gt;
+	This text is not yellow.
+&lt;/p&gt;
+&lt;b class="some_elements"&gt;
+	This text is yellow and bold!
+&lt;/b&gt;
+</code></pre>
+<p>
+	Note that classes are selected with <code>.</code> and ids are selected with <code>#</code>. If you mix them up (e.g. try to use <code>.some_element</code> to select
+	an element with <code>id="some_element"</code>), it will fail! Also consider that elements may have both an id and a class, and that works exactly as you would expect.
+</p>
+[/]
+[#template.html]