Differences

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

--- eg-146:lecture15 [2012/03/15 20:03] – [Combining selectors] 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 744: / Line 762: @@
 }
 </code>
+===== Summary ======
+  * [[#CSS Building Blocks]]
+  * [[#Working With Stylesheets]]
+  * [[#Defining Selectors]]
+===== Next =====
+  * Formatting Text with Styles
+  * Layout with Styles