eg-146:lecture15
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-146:lecture15 [2012/03/15 20:04] – eechris | eg-146:lecture15 [2012/03/19 08:15] (current) – [Answers] 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 165: | Line 165: | ||
the one that appears later wins, and thus I am magenta! (4)</ | the one that appears later wins, and thus I am magenta! (4)</ | ||
</ | </ | ||
- | Don't believe me? Try it yourself! | + | Don't believe me? [[http:// |
===== The Cascade: Location ===== | ===== The Cascade: Location ===== | ||
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 '' | + | we apply the simple style declaration '' |
Follow the links to [[http:// | Follow the links to [[http:// | ||
to see these examples live. | to see these examples live. | ||
Line 483: | Line 483: | ||
<meta charset=" | <meta charset=" | ||
< | < | ||
- | <link rel=" | + | <link rel=" |
</ | </ | ||
< | < | ||
- | <article id=" | + | <article id=" |
<h1 lang=" | <h1 lang=" | ||
- | | ||
<p> | <p> | ||
- | Many tourists are drawn to Barcelona to see Antoni Gaud& | + | Many tourists are drawn to Barcelona to see Antoni Gaud& |
architecture. | architecture. | ||
</p> | </p> | ||
<p> | <p> | ||
- | Barcelona <a href=" | + | Barcelona <a href=" |
</p> | </p> | ||
- | | ||
<section class=" | <section class=" | ||
<h2 lang=" | <h2 lang=" | ||
<p> | <p> | ||
- | Gaud& | + | Gaud& |
building and < | building and < | ||
</p> | </p> | ||
</ | </ | ||
- | | ||
<section class=" | <section class=" | ||
<h2 lang=" | <h2 lang=" | ||
<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 < | Sacred Family is the < | ||
</p> | </p> | ||
Line 515: | Line 512: | ||
</ | </ | ||
</ | </ | ||
+ | |||
</ | </ | ||
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: | ||
+ | - Pseudo-elements: | ||
+ | - Pseudo-elements: | ||
+ | - 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 627: | Line 645: | ||
'' | '' | ||
===== Selecting sibling elements ===== | ===== Selecting sibling elements ===== | ||
- | * This selector chooses only those '' | + | * This selector chooses only those '' |
<code css> | <code css> |
eg-146/lecture15.1331841889.txt.gz · Last modified: 2012/03/15 20:04 by eechris