INT222 – Internet Fundamentals

1. INT222 – Internet Fundamentals Week 6: More on CSS

2. Outline • Advanced CSS • CSS selector • Quiz #1 solutions • innerHTML examples

3. What is a CSS Selector • A selector is a pattern; • It’s the part of a CSS rule that matches a set of elements in an HTML or XML document. •  It can also be referred to as a link between the HTML document and the style sheet.  • A CSS rule example: strong { color: red; } Strong : selector color: red; : declaration Color : property Red : value

4. Type of Selector • Element type selector (tag selector) • Class selector • ID selector • Selector grouping • Universal selector • Attribute selector • Combinators • Descendant selector (contextual selectors) • Child selector • Adjacent sibling selector • General sibling selector • Pseudo-classes • … … • Pseudo-elements • … …

5. Universal selector • The universal selector matches any element type. • e.g. * { margin: 0; padding: 0; } • The two selector examples are equivalent: *.warning { color: red; } .warning { color: red; }

6. Attribute selector • An attribute selector will match elements on the basis of either • the presence of an attribute, or • the exact or partial match of an attribute value. • e.g. [href] { color: yellow;} a[href] {color: yellow;} input[type="submit"] { border: 2px solid #ccc;} [class~="warning"] { background-color: yellow; } • equal to: .warning { background-color: yellow; }

7. Combinators • Combinators - Selectors based on relationships • Descendant selector (contextual selectors) • e.g. div span { line-height: 90%; } // includes child • Child selector • e.g. ul>li { text-decoration: underline; } • Adjacent sibling selector • e.g. H2+p { color: blue; } // matches all p elements that appear immediately after H2 e.ements. • General sibling selector • e.g. H2~p { color: blue; }

8. Pseudo-classes • A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. • Some pseudo-classes are dynamic. • A pseudo-class starts with a colon (:).

9. List of pseudo-classes/elements • :link -- matches link elements that are unvisited • :visited -- matches link elements that have been visited • :active -- matches any element that's being activated by the user • :hover -- matches elements that are being designated by a pointing device • e.g. a:hover { color: #f00; background: #eee; } • :focus -- matches any element that's currently in focus • :last-child -- matches the last child element of its parent element • e.g. li.last-child { color: #f00; background: #eee; } • :first-letter -- This pseudo-element matches the first letter • e.g. .p1.first-letter, li.first-letter {color: #f63} • :after -- This pseudo-element represents generated content that’s rendered after another element. • e.g. p:before { content: "["; } p:after { content: "]"; }

10. CSS3 Pseudo-classes/elements • :nth-child(n) -- matches elements on the basis of their positions within a parent element’s list of child elements • e.g. tr:nth-child(2n+1) {…} matchs only odd-numbered table rows. • :empty -- matches elements that have no children • :enabled -- matches user interface elements that are enabled • ::selection -- This pseudo-element matches any user-selected text within a textareaelement • e.g. textarea::selection{ background-color: yellow; } • … …

11. Example • Example of CSS advanced features file:///C:/Users/Wei/Dropbox/INT222-2014Win/Lectures/for-lecture6/examples/morecss.html • About the title of element – a global attribute • HTML: <p><label for="example02"> <a title="Whatever">Example No. 2</a></label></p> • CSS: form p:hover label { color: #369; background: #eee; } • Presentation: • And more …

12. Quiz #1 solutions • Link: https://github.com/wsong18/int222-demos-2014win/tree/master/Quiz1-solutions

13. innerHTML examples • e.g. • HTML: <p id="a1"><a onclick='myfunction("a1")' href="#">Created by:</a></p> • JS: function myfunction(id) { var para = document.getElementById(id); if (id==="a1") { para.innerHTML ="created by Me!"; } } • Link: https://github.com/wsong18/int222-demos-2014win/blob/master/Week5/innerHTML.html

14. Reference • Understanding CSS Selectors (Sitepoint)

15. Thank You!