1. CSS Statements, 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"; @namespace svg "http://www.w3.org/2000/svg";

7. CSS MEDIA queries

8. Media Queries  W3C Candidate Recommendation 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  media attribute of link element 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 and ( ) and … and ( )

11. Media Queries and ( ) and … and ( )  media – stands for media type  screen  print  braile  projection  tv  …  all

12. Media Queries and ( ) and … and ( )  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 )

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 … Cn Sn  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 by Cn 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 by Sn  simple selector is one of the following:  type selector, universal selector, attribute selector, class selector, ID selector, pseudo-class and 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-child td: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 E from 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|E if 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 att attribute (whatever value) [att=val] { … }  all elements with att attribute with value val [att~=val] { … }  all elements with att attribute with value being a sequence of (white space separated) words containing word val

26. Attribute Simple Selector [att^=val] { … }  all elements with att attribute with value starting with val  nothing if val is empty [att$=val] { … }  all elements with att attribute with value ending with val  nothing if is empty val [att*=val] { … }  all elements with att attribute with value containing one or more occurrences of val  nothing if val is empty [att|=val] { … }  all elements with att attribute with value val or with value starting with val followed 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 att attribute from namespace with declared prefix ns [*|att] { … }  all elements with attribute att from any namespace or without namespace [|att] { … }  all elements with attribute att without 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 TEXT TEXT TEXT

36. Power of Pseudo-Classes Can you make “switching panels” with CSS? css_08.html 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)  b may be 0 : :nth-child(3n+0) – positions 3, 6, 9, … :nth-child(3n) – shortcut for :nth-child(3n+0)  b may 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 list or numbering chapters  generated content is specified by content property 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)

51. Cascading  cascade assigns weight to each property in each style sheet statement (1 is lowest weight): 1.user agent properties 2.user properties 3.author properties 4.author important properties 5.user important properties  if element in document tree may have more values for the same property the one with highest weight is applied  important properties are those followed by !important keyword

52. Cascading  if element in document tree may have more values for the same property with the same cascading weight select the one with the highest specificity  specificity of property declaration in statement is counted on the base of the following three values:  A = 1 if declaration is in style att, 0 otherwise  B = number of ID selectors in statement selector  C = number of class selectors, attribute selectors and pseudo-classes in statement selector  D = number of type selectors and pseudo-elements in statement selector  (universal selector is ignored)  specificity = ABCD

53. Cascading td (B=0, C=0, D=1  specificity 0001) td:hover (B=0, C=1, D=1  specificity 0011) td:nth-child(-n+2) (B=0, C=1, D=1  specificity 0011) tr:nth-child(2n) td:nth-child(2n+1) (B=0, C=2, D=2  specificity 0022) /* almost winner */ tr:nth-child(2n) td:nth-child(2n+1) { background-color: black; } /* looser */ td:nth-child(-n+2) { background-color: orange; } /* beats all */ td:hover { background-color: pink !important; }

54. Inheritance  if element does not have property value it may inherit it from its parent in document tree  Not all properties are inherited  in general  text related properties are inherited (e.g. color, font )  box related properties are not inherited (e.g. border, float )  keyword inherit  property is inherited (even if it is not inherited by default) *{ border: inherit; }

55. Thanks for your attention