Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture15 [2012/03/15 19:53] – [Selecting elements based on attributes] eechris
+++ eg-146:lecture15 [2012/03/19 08:15] (current) – [Answers] eechris
@@ Line 1: / Line 1: @@
 ~~SLIDESHOW~~
-====== Introduction to CSS  ======
+====== Introduction to Cacscading Stylesheets (CSS)  ======
 **Contact Hour 15**: To be discussed on Monday 20th March, 2012.
@@ Line 165: / Line 165: @@
 the one that appears later wins, and thus I am magenta! (4)</p>
 </code>
-Don't believe me? Try it yourself!
+Don't believe me? [[http://www.bruceontheloose.com/htmlcss/examples/chapter-07/specificity.html|Try it yourself]]!
 ===== The Cascade: Location =====
@@ Line 471: / Line 471: @@
 To illustrate the various style selectors, and how the work,
-we apply the simple style declaration ''color: red'', to various selections of an [[/eg-146/selector/template.html|example]] document.
+we apply the simple style declaration ''color: red'', to various selections of an [[/eg-146/selectors/nostyle.html|example]] document.
 Follow the links to [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-9|Chapter 9: Defining Selectors]]
 to see these examples live.
@@ Line 483: / Line 483: @@
     <meta charset="utf-8" />
     <title>Antoni Gaud&iacute; &ndash; Introduction</title>
-    <link rel="stylesheet" media="screen" href="name.css" />
+    <link rel="stylesheet" media="screen" href="nostyle.css" />
   </head>
   <body>
-    <article id="gaudi">
+    <article id="gaudi" class="about">
       <h1 lang="es">Antoni Gaud&iacute;</h1>
       <p>
         Many tourists are drawn to Barcelona to see Antoni Gaud&iacute;'s incredible
         architecture.
       </p>
       <p>
-        Barcelona <a href="http://www.gaudi2002.bcn.es/english/">celebrated</a> the 150th anniversary of Gaud&iacute;'s birth in 2002.
+        Barcelona <a href="http://www.gaudi2002.bcn.es/english/flash/home/GO.htm">celebrated</a> the 150th anniversary of Gaud&iacute;'s birth in 2002.
       </p>
       <section class="project">
         <h2 lang="es">La Casa Mil&agrave;</h2>
         <p>
           Gaud&iacute;'s work was essentially useful. La Casa Mil&agrave; is an apartment
           building and <em>real people</em> live there.
         </p>
       </section>
       <section class="project">
         <h2 lang="es">La Sagrada Fam&iacute;lia</h2>
         <p>
           The complicatedly named and curiously unfinished Expiatory Temple of the
           Sacred Family is the <em>most visited</em> building in Barcelona.
         </p>
@@ Line 515: / Line 512: @@
   </body>
 </html>
 </code>
@@ Line 522: / Line 520: @@
 ===== A Catalogue of style selectors =====
+I will demonstrate these in the lecture.
+----
+My cheat-sheet:
+  - Select by name: name.css
+  - Select by class: class.css
+  - Select by id: classid.css
+  - Select by context: context.css
+  - Selecting elements by parent: child.css
+  - Selecting the first child element: firstchild.css
+  - Selecting the first child element: firstchild2.css
+  - Selecting sibling elements: adjsibling.css
+  - Pseudo-elements: first line of an element: firstline.css
+  - Pseudo-elements: first letter of an element: firstletter.css
+  - Pseudo-elements: selecting elements based on state: state.css
+  - Selecting Elements based on Attributes: attribute.css
+  - Selecting groups of elements: group.css
+  - Combining selectors: combine.css
 ===== Selecting elements by name =====
@@ Line 627: / Line 645: @@
 ''h1'' is the first child so this works
 ===== Selecting sibling elements =====
-  * This selector chooses only those ''p'' elements which directly follow a sibling ''p'' element within an ''article'' with an ''about'' class  ([[/eg-146/selectors/context.html|result]]):
+  * This selector chooses only those ''p'' elements which directly follow a sibling ''p'' element within an ''article'' with an ''about'' class  ([[/eg-146/selectors/adjsibling.html|result]]):
 <code css>
@@ Line 696: / Line 714: @@
 <code css>
-h1, h2 { color: red; }
+h1,
+h2 {
+  color:red;
+}
 </code>
+----
+The selectors do not need to be on a line of their own, but many developers use this convention as
+it makes the style definition (and what elements it applies to) easier to read at a glance. Particularly
+when there are a lot!
 ===== Combining selectors =====
-You can also combine selectors each you need to be particularly precise ([[/eg-146/selectors/context.html|result]]):
+  * You can also combine selectors each you need to be particularly precise ([[/eg-146/selectors/combine.html|result]]):
 <code css>
-div.works p em:first-letter { color: red }
+.project h2[lang|="es"] + p em {
+  color: red;
+}
 </code>
-Explanation
+----
-This selector chooses the first letter of any em element that is within any p elements that are part of a div that is of class works.
-It doesn't seem to work!
+**Explanation** "Chose only the ''e,'' elements that are found in the ''p'' elements that are immediately adjacent to ''h2'' elements that
+have a ''lang'' attribute whose value begins with ''es'' inside any element with a ''class'' equal to ''project''.
+The example above is an extreme one to demonstrate what's possible. Following are
+a few ways you could achieve the same results, moving from least specific to most
+specific:
+<code css>
+em {
+  color: red;
+}
+</code>
+<code css>
+.project em {
+  color: red;
+}
+</code>
+<code css>
+.about .project em {
+  color: red;
+}
+</code>
+<code css>
+#gaudi em {
+  color: red;
+}
+</code>
+===== Summary ======
+  * [[#CSS Building Blocks]]
+  * [[#Working With Stylesheets]]
+  * [[#Defining Selectors]]
+===== Next =====
+  * Formatting Text with Styles
+  * Layout with Styles