Differences

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

--- eg-146:lecture15 [2012/03/15 19:39] – [Pseudo-elements: first letter of an element] eechris
+++ eg-146:lecture15 [2012/03/19 07:52] – [Introduction to CSS] 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 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 658: / Line 676: @@
 <code css>
 a:link { color: red; }
-a:visited { color: yellow; }
+a:visited { color: orange; }
-a:focus { color: olive; }
+a:focus { color: purple; }
 a:hover { color: green; }
 a:active { color: blue; }
@@ Line 667: / Line 685: @@
 Explanation: the link is shown in red. As the mouse moves over the link (//hover//) it changes to green.
-If link has focus (use tab key to achieve this) it turns olive. While you press the link (before you release)
+If link has focus (use tab key to achieve this) it turns purple. While you press the link (before you release)
-it is blue. When the link has been visited it turns yellow.
+it is blue. When the link has been visited it turns orange.
 ===== Selecting elements based on attributes =====
-This selector will choose the div elements which have a class attribute equal to works ([[/eg-146/selectors/context.html|result]]):
+  * This selector will choose the ''section'' elements which have a class attribute ([[/eg-146/selectors/attributes.html|result]]):
 <code css>
-div[class='works'] { color: red; }
+section[class] {
+  color: red;
+}
 </code>
-    Note this selector is equivalent to div.works.
+----
+You can also select based on value:active
+  * ''//attribute//="value"'' -- selects attributes whose value is equal to ''//value//''
+  * ''//attribute//~="value"'' -- selects attributes whose value //contains// ''//value//''
+  * ''//attribute//|="value"'' -- selects attributes whose value //equals// or //starts with// ''//value//''
+  * ''//attribute//^="value"'' -- selects attributes whose value //begins with// ''//value//'' (new in CSS3)
+  * ''//attribute//$="value"'' -- selects attributes whose value //ends with// ''//value//'' (new in CSS3)
+  * ''//attribute//*="value"'' -- selects attributes whose value //contains at least one// match of ''//value//'' (new in CSS3)
+See Tips on Pages 234--235 of Castro and Hyslop for examples of how to ue these
 ===== Groups of elements =====
@@ Line 685: / 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