Differences

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

--- eg-146:lecture15 [2012/03/15 20:06] – [Another Example] 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>
@@ Line 520: / 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 625: / 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>