CSS Statements, media queries, selectors, cascading

1. CSSStatements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University in Prague, Czech Republic

2. CSS Statements

3. Syntax • CSS style sheet consists of statements of two kinds • rule set selector { property-name-1: property-value-1; … property-name-N: property-value-N; } • at-rule @at-rule-name …; @at-rule-name {…}

4. Sample Rule Set div { padding: 10px; background-color: lightblue; border: 2px solid blue; }

5. Sample At-Rules @import "basic.css"; @import "print-basic.css" print; @media print { div { padding: 10px; background-color: lightblue; border: 2px solid blue; } }

6. Namespace At-Rule • namespaces may be declared • externally in document which uses style sheet • e.g. XML document using well-know XML namespace mechanisms • internally in the style sheet • @namespace at-rule @namespace "http://www.w3.org/1999/xhtml"; @namespacesvg "http://www.w3.org/2000/svg";

7. CSS MEDIA queries

8. Media Queries • W3C CandidateRecommendation 27 July 2010 • allows styling single web page for different devices, e.g. • printer • tablet/phone (landscape, portrait) • low resolution laptop • …

9. Media Queries • where you can use media query? • media at-rule • CSS statements inside at-rule are applied only to specified media • mediaattribute of linkelement in HTML • CSS statements in linked CSS file are applied only to specified media • import at-rule • imported CSS statements are applied only to specified media

10. Media Queries <media> and (<feature1>) and … and (<featureN>)

11. Media Queries <media> and (<feature1>) and … and (<featureN>) • media– stands for media type • screen • print • braile • projection • tv • … • all

12. Media Queries <media> and (<feature1>) and … and (<featureN>) • feature-name: value • allowed features: • width • value – length • width of display area of output device • height • value – length • height of display area of output device • orientation • value – landscape or portrait • orientation of display area of output devide • … • most of them (e.g. width, height) may be supplemented with min-and max-prefix (to avoid < and >)

13. Media Queries /* iPad landscape */ @media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) { /* statements */ } css_12.html

14. CSS Selectors

15. Selectors • selector is chain of one or more sequences of simple selectors separated by combinators S0 C1 S1 … CnSn • where • S0, …, Sn are sequences of simple selectors • C1, …, Cn are combinators(whitespace, >, +, ~) • “algorithm”: if (n==0) then return each element selected by Sn else return each element selected by Sn which is in the relationship specified byCn to an element selected by S0 C1 S1 … C(n-1) S(n-1)

16. Selectors • sequence of simple selectors is chain of simple selectors that are not separated by combinator S0S1…Sn • where S0, …, Sn are simple selectors • “algorithm”: • if (n==0) return • each element selected by Sn • else return • each element selected by S0…S(n-1) which is also selected bySn • simple selector is one of the following: • typeselector, universalselector, attributeselector, classselector, IDselector, pseudo-classand pseudo-element

17. Selectors – Few Examples • two simple selectors separated by +combinator div + div • three simple selectors separated by >combinator ol#topMenu> li.menuItem[label$="navigation"] > a • two simple selectors separated by whitespace combinator tr:last-childtd:not(:first-child):not(:last-child)

18. Combinators • whitespace combinator: A B • specifies descendant relationship • selects all elements selected by B which are descendants of any element selected by A • > combinator: A > B • specifies child relationship • selects all elements selected by B which are child of any element selected by A • + combinator:A + B • specifies adjacent sibling relationship • selects all elements selected by B which have same parent as and immediately follow any element selected by A • ~ combinator:A ~ B • specifies sibling relationship • selects all elements selected by B which have same parent as and follow (not necessarily immediately) any element selected by A

19. Type Simple Selector E { … } • elements with name E in document tree Do you know the concept of XML namespaces?

20. Type Simple Selector and Namespaces ns|E{ … } • elements with name Efrom namespace with declared prefix ns *|E { … } • elements with name E from any namespace or without namespace |E { … } • only elements without namespace E { … } • *|E if no default namespace • dns|Eif default namespace has prefix dns

21. Type Simple Selector and Namespaces • see css_03.xml

22. Universal Simple Selector * { … } • all elements in document tree

23. Universal Simple Selector and Namespaces ns|* { … } • all elements from namespace with declared prefix ns *|* { … } • all elements |* { … } • all elements without namespace * { … } • *|* if no default namespace • dns|* if default namespace has prefix dns

24. Universal Simple Selector • see css_04.xml • see css_04,5.xml

25. Attribute Simple Selector [att] { … } • all elements with attattribute (whatever value) [att=val] { … } • all elements with attattribute with value val [att~=val] { … } • all elements with attattribute with value being a sequence of (white space separated) words containing word val

26. Attribute Simple Selector [att^=val] { … } • all elements with attattribute with value starting with val • nothing if valis empty [att$=val] { … } • all elements with attattribute with value ending with val • nothing if is empty val [att*=val] { … } • all elements with attattribute with value containing one or more occurrences of val • nothing if valis empty [att|=val] { … } • all elements with attattribute with value val or with value starting with valfollowed by ‘-’ (intended primarily, but not only, to matching language codes)

27. Attribute Simple Selector • see css_05.html

28. Attribute Simple Selector and Namespaces [ns|att] { … } • all elements with attattribute from namespace with declared prefix ns [*|att] { … } • all elements with attribute attfrom any namespace or without namespace [|att] { … } • all elements with attribute attwithout namespace • XML notes: • default namespace does not apply to attributes • attribute gains namespace of its element

29. Class and ID Simple Selector .val { … } ↔ [class~=val] • all elements having class attribute with value being a sequence of (white space separated) words containing word val #val{ … } ↔ [idattr=val] • all elements having ID-attribute with value val • ID-attribute (idattr) may be given explicitly (e.g. by DTD or XSD) or implicitly (e.g. HTML ID attribute)

30. Class and ID Selector • see css_06.html

31. Pseudo-Classes :pseudo-class • all XML elements which belong to pseudo-class with name pseudo-class • dynamic pseudo-classes • classify elements on characteristics which cannot be deduced from document tree • structural pseudo-classes • classify elements on their structural relationships which are not covered by other kinds of simple selectors

32. Dynamic Link Pseudo-Classes :link • links that have not yet been visited :visited • links that have been already visited

33. Dynamic User Action Pseudo-Classes :hover • elements being designated with pointing device by user :active • elements being activated by user :focus • elements having focus

34. Dynamic User Action Pseudo-Classes • see css_07.html

35. Dynamic Target Pseudo-Class :target • link target elements • applied when link is “activated” by user <a href="#place">TEXT</a> <div id="place">TEXT TEXT</div>

36. Power of Pseudo-Classes Can you make “switching panels” with CSS? css_08.html

37. Structural Pseudo-Classes :nth-child(an+b) • all elements whose position in the list of all elements with the same parent can be counted with an+b • where a and b are fixed integers (positive, negative, 0) given by CSS developer • n means ‘iteration variable’ (0,1,2,…) • first element within its parent has position 1, non-element nodes (text nodes) are not counted • special values odd and even • examples: :nth-child(2n+0) – positions 2, 4, 6, …, i.e. even elements :nth-child(2n+1) – positions 1, 3, 5, …, i.e. odd elements :nth-child(8n+1) – positions 1, 9, 17, … :nth-child(even) = :nth-child(2n+0) :nth-child(odd) = :nth-child(2n+1)

38. Structural Pseudo-Classes :nth-child(an+b) • bmay be 0: :nth-child(3n+0) – positions 3, 6, 9, … :nth-child(3n)– shortcut for :nth-child(3n+0) • bmay be negative: :nth-child(5n-1) – positions 4, 8, 12, … • a may be 0: :nth-child(0n+5) – each fifth element within its parent :nth-child(5) – shortcut for :nth-child(0n+5) • a may be negative: • only positive positions which can be counted by an+b target elements :nth-child(-n+3) – positions 1,2,3

39. Structural Pseudo-Classes :nth-last-child(an+b) • all elements whose position FROM THE END in the list of all elements with the same parent can be counted with an+b • examples: :nth-last-child(-n+2) – last two elements in each parent

40. Structural Pseudo-Classes Can you make the following “chess-board” with CSS :nth-child, :nth-last-child?

41. Structural Pseudo-Classes • see css_09.html

42. Structural Pseudo-Classes :nth-of-type(an+b), :nth-last-of-type(an+b) • variants of previous which consider only elements with the same type as the object element :first-child = :nth-child(1) :last-child = :nth-last-child(1) :first-of-type = :nth-of-type(1) :last-of-type = :nth-last-of-type(1) :only-child = :first-child:last-child • but lower specificity :only-of-type = :first-of-type:last-of-type • but lower specificity :empty • elements without children • only child elements, text, CDATA and entity references count

43. Negation Pseudo-Class :not(PS) • all elements which do not correspond to pseudo-class PS

44. Negation Pseudo-Class Can you make the following “chess-board” (only the boundary rows and columns are white)?

45. Negation Pseudo-Class • see css_10.html

46. Pseudo-Elements :first-letter :first-line

47. Pseudo-Elements :before :after • intended for generated content • generated content is content which does not come from document tree • e.g. numbered listor numbering chapters • generated content is specified bycontentproperty with value: • string • uri • counter • attr(X) • … and special values for generating quotes

48. Pseudo-Elements • see css_11.html

49. CSS Cascading

50. Cascading • every element in document tree must have value for every property that applies to target media type • three different sources of style sheets: • author • web developer who creates style sheets and associates them with documents • user • user agent may allow users to specify their own style information (e.g. “everything bigger”) • user agent • default style sheets of user agent which allow displaying non-styled elements (e.g. default HTML or default XML)