ICCT Wiki

User Tools

Site Tools

Trace: • lecture3 • lecture14 • ch14 • lecture12 • step4 • step5
eg-146:lecture15

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
eg-146:lecture15 [2012/03/15 19:31] – [Selecting the first child element] eechriseg-146:lecture15 [2012/03/19 07:52] – [Introduction to CSS] eechris
Line 1: Line 1:
 ~~SLIDESHOW~~ ~~SLIDESHOW~~
-====== Introduction to CSS  ======+====== Introduction to Cacscading Stylesheets (CSS)  ======
  
 **Contact Hour 15**: To be discussed on Monday 20th March, 2012. **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,  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]]  Follow the links to [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-9|Chapter 9: Defining Selectors]] 
 to see these examples live. to see these examples live.
Line 483: Line 483:
     <meta charset="utf-8" />     <meta charset="utf-8" />
     <title>Antoni Gaud&iacute; &ndash; Introduction</title>     <title>Antoni Gaud&iacute; &ndash; Introduction</title>
-    <link rel="stylesheet" media="screen" href="name.css" />+    <link rel="stylesheet" media="screen" href="nostyle.css" />
   </head>   </head>
   <body>   <body>
-    <article id="gaudi">+    <article id="gaudi" class="about">
       <h1 lang="es">Antoni Gaud&iacute;</h1>       <h1 lang="es">Antoni Gaud&iacute;</h1>
-       
       <p>       <p>
-        Many tourists are drawn to Barcelona to see Antoni Gaud&iacute;'s incredible +        Many tourists are drawn to Barcelona to see Antoni Gaud&iacute;'s incredible
         architecture.         architecture.
       </p>       </p>
       <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>       </p>
-       
       <section class="project">       <section class="project">
         <h2 lang="es">La Casa Mil&agrave;</h2>         <h2 lang="es">La Casa Mil&agrave;</h2>
         <p>         <p>
-          Gaud&iacute;'s work was essentially useful. La Casa Mil&agrave; is an apartment +          Gaud&iacute;'s work was essentially useful. La Casa Mil&agrave; is an apartment
           building and <em>real people</em> live there.           building and <em>real people</em> live there.
         </p>         </p>
       </section>       </section>
-       
       <section class="project">       <section class="project">
         <h2 lang="es">La Sagrada Fam&iacute;lia</h2>         <h2 lang="es">La Sagrada Fam&iacute;lia</h2>
         <p>         <p>
-          The complicatedly named and curiously unfinished Expiatory Temple of the +          The complicatedly named and curiously unfinished Expiatory Temple of the
           Sacred Family is the <em>most visited</em> building in Barcelona.           Sacred Family is the <em>most visited</em> building in Barcelona.
         </p>         </p>
Line 515: Line 512:
   </body>   </body>
 </html> </html>
 +
 </code> </code>
  
Line 522: Line 520:
 ===== A Catalogue of style selectors ===== ===== 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 ===== ===== Selecting elements by name =====
  
Line 548: Line 566:
 ===== Selecting Elements by Context ===== ===== Selecting Elements by Context =====
  
-  * This selector selects all paragraphs that are children of the ''article'' with class ''"about"'' ([[/eg-146/selectors/context.css|result]])+  * This selector selects all paragraphs that are children of the ''article'' with class ''"about"'' ([[/eg-146/selectors/context.html|result]])
 <code css> <code css>
 article.about p { article.about p {
Line 616: Line 634:
 ===== Selecting the first child element (2) ===== ===== Selecting the first child element (2) =====
  
-  * This works ([[/eg-146/selectors/firstchild.html|result]])"+  * This works ([[/eg-146/selectors/firstchild2.html|result]]):
 <code css> <code css>
 article.about h1:first-child {  article.about h1:first-child { 
Line 627: Line 645:
 ''h1'' is the first child so this works  ''h1'' is the first child so this works 
 ===== Selecting sibling elements ===== ===== 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.css|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> <code css>
Line 635: Line 653:
 </code> </code>
 ===== Pseudo-elements: first line of an element ===== ===== Pseudo-elements: first line of an element =====
-  * This selector will choose the first line of each ''p'' element ([[/eg-146/selectors/firstline.css|result]]):+  * This selector will choose the first line of each ''p'' element ([[/eg-146/selectors/firstline.html|result]]):
  
 <code css> <code css>
Line 644: Line 662:
  
 ===== Pseudo-elements: first letter of an element ===== ===== Pseudo-elements: first letter of an element =====
-  * This selector will choose the first letter of each ''p'' element ([[/eg-146/selectors/firstletter.css|result]]):+  * This selector will choose the first letter of each ''p'' element ([[/eg-146/selectors/firstletter.html|result]]):
  
 <code css> <code css>
 p:first-letter { p:first-letter {
   color:red;   color:red;
-}</code>+} 
 +</code> 
 ===== Pseudo-elements: based on state ===== ===== Pseudo-elements: based on state =====
-You can't specify in code what state a link (a element) will have, it is controlled by you visitors. You can however give visual feedback based on the state by use of the following pseudo-elements ([[/eg-146/selectors/context.css|result]]):+ 
 +  * You can't specify in code what state a link (''a'' element) will have, it is controlled by your visitors. You can however give visual feedback based on the state by use of the following pseudo-elements ([[/eg-146/selectors/state.html|result]]):
  
 <code css> <code css>
 a:link { color: red; } 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:hover { color: green; } 
 a:active { color: blue; }  a:active { color: blue; } 
 </code> </code>
  
-Explanation+---- 
 + 
 +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 purple. While you press the link (before you release) 
 +it is blue. When the link has been visited it turns orange.
  
 ===== Selecting elements based on attributes ===== ===== Selecting elements based on attributes =====
-This selector will choose the div elements which have a class attribute equal to works ([[/eg-146/selectors/context.css|result]]):+  * This selector will choose the ''section'' elements which have a class attribute ([[/eg-146/selectors/attributes.html|result]]):
  
 <code css> <code css>
-div[class='works'] { color: red; }+section[class] {  
 +  color: red;  
 +}
 </code> </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 ===== ===== Groups of elements =====
-You can select any number of individual selectors, as long as you separate each with a comma ([[/eg-146/selectors/context.css|result]]):+You can select any number of individual selectors, as long as you separate each with a comma ([[/eg-146/selectors/context.html|result]]):
  
 <code css> <code css>
-h1, h2 { color: red; }+h1,  
 +h2 { 
 +  color:red; 
 +}
 </code> </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 ===== ===== Combining selectors =====
-You can also combine selectors each you need to be particularly precise ([[/eg-146/selectors/context.css|result]]):+  * You can also combine selectors each you need to be particularly precise ([[/eg-146/selectors/combine.html|result]]):
  
 <code css> <code css>
-div.works p em:first-letter { color: red }+.project h2[lang|="es"] + p em { 
 +  color: red; 
 +}
 </code> </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
  
eg-146/lecture15.txt · Last modified: 2012/03/19 08:15 by eechris