eg-146:lecture15
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
eg-146:lecture15 [2012/03/15 19:12] – [Selecting elements by parent] eechris | eg-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 '' | + | 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 548: | Line 566: | ||
===== Selecting Elements by Context ===== | ===== Selecting Elements by Context ===== | ||
- | * This selector selects all paragraphs that are children of the '' | + | * This selector selects all paragraphs that are children of the '' |
<code css> | <code css> | ||
article.about p { | article.about p { | ||
Line 601: | Line 619: | ||
===== Selecting the first child element ===== | ===== Selecting the first child element ===== | ||
- | * This selector chooses only the '' | + | * This selector chooses only the '' |
<code css> | <code css> | ||
- | # | + | article.about |
+ | | ||
+ | } | ||
</ | </ | ||
+ | |||
+ | < | ||
+ | '': | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Selecting the first child element (2) ===== | ||
+ | |||
+ | * This works ([[/ | ||
+ | <code css> | ||
+ | article.about h1: | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | '' | ||
===== Selecting sibling elements ===== | ===== Selecting sibling elements ===== | ||
- | This selector chooses only those p elements which directly follow a sibling '' | + | * This selector chooses only those '' |
<code css> | <code css> | ||
- | div# | + | article.about |
+ | | ||
+ | } | ||
</ | </ | ||
===== Pseudo-elements: | ===== Pseudo-elements: | ||
- | * This selector will choose the first line of each '' | + | * This selector will choose the first line of each '' |
<code css> | <code css> | ||
- | p: | + | p: |
+ | | ||
+ | } | ||
</ | </ | ||
- | ===== Pseudo-elements: | + | ===== Pseudo-elements: |
- | This selector will choose the first letter of each p element ([[/ | + | |
<code css> | <code css> | ||
- | p: | + | p: |
+ | | ||
+ | } | ||
</ | </ | ||
+ | |||
===== Pseudo-elements: | ===== Pseudo-elements: | ||
- | 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 ([[/ | + | |
+ | * You can't specify in code what state a link ('' | ||
<code css> | <code css> | ||
a:link { color: red; } | a:link { color: red; } | ||
- | a:visited { color: | + | a:visited { color: |
- | a:focus { color: | + | a:focus { color: |
a:hover { color: green; } | a:hover { color: green; } | ||
a:active { color: blue; } | a:active { color: blue; } | ||
</ | </ | ||
- | 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 | + | * This selector will choose the '' |
<code css> | <code css> | ||
- | div[class=' | + | section[class] { |
+ | | ||
+ | } | ||
</ | </ | ||
- | Note this selector is equivalent to div.works. | + | ---- |
+ | You can also select based on value: | ||
+ | * ''// | ||
+ | * ''// | ||
+ | * ''// | ||
+ | * ''// | ||
+ | * ''// | ||
+ | * ''// | ||
+ | |||
+ | 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 ([[/ | + | You can select any number of individual selectors, as long as you separate each with a comma ([[/ |
<code css> | <code css> | ||
- | h1, h2 { color: red; } | + | h1, |
+ | h2 { | ||
+ | | ||
+ | } | ||
</ | </ | ||
+ | ---- | ||
+ | |||
+ | 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 ([[/ | + | * You can also combine selectors each you need to be particularly precise ([[/ |
<code css> | <code css> | ||
- | div.works p em: | + | .project h2[lang|=" |
+ | | ||
+ | } | ||
</ | </ | ||
- | Explanation | + | ---- |
- | This selector chooses | + | |
- | It doesn't seem to work! | + | **Explanation** "Chose only the '' |
+ | have a '' | ||
+ | |||
+ | 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 | ||
+ | specific: | ||
+ | <code css> | ||
+ | em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | .project em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | .about .project em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | #gaudi em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 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