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

CSS Statements

Syntax CSS style sheet consists of statements of two kinds rule setselector {property-name-1: property-value-1;…property-name-N: property-value-N;}

at-rule@at-rule-name …;@at-rule-name {…}

Sample Rule Setdiv {

padding: 10px;background-color: lightblue;border: 2px solid blue;

}

Sample At-Rules@import "basic.css";@import "print-basic.css" print;@media print {

div {padding: 10px;background-color: lightblue;border: 2px solid blue;

}}

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";

CSS MEDIA queries

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 …

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

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

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

media – stands for media type screen print braile projection tv … all

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 >)

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

css_12.html

CSS Selectors

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 returneach 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)

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

Selectors – Few Examples

two simple selectors separated by + combinatordiv + div

three simple selectors separated by > combinatorol#topMenu > li.menuItem[label$="navigation"] > a

two simple selectors separated by whitespace combinatortr:last-child td:not(:first-child):not(:last-child)

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

Type Simple SelectorE { … } elements with name E in document tree

Do you know the concept of XML namespaces?

Type Simple Selector and Namespacesns|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 namespaceE { … }↔ *|E if no default namespace↔ dns|E if default namespace has prefix dns

Type Simple Selector and Namespaces see css_03.xml

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

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

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

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

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)

Attribute Simple Selector see css_05.html

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

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)

Class and ID Selector see css_06.html

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

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

Dynamic User Action Pseudo-Classes:hover elements being designated with pointing

device by user:active elements being activated by user:focus elements having focus

Dynamic User Action Pseudo-Classes see css_07.html

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>

Power of Pseudo-Classes

Can you make “switching panels” with CSS?

css_08.html

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)

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

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

Structural Pseudo-Classes

Can you make the following “chess-board” with CSS :nth-child, :nth-last-child?

Structural Pseudo-Classes see css_09.html

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

Negation Pseudo-Class:not(PS) all elements which do not correspond to

pseudo-class PS

Negation Pseudo-Class

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

Negation Pseudo-Class see css_10.html

Pseudo-Elements:first-letter:first-line

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

Pseudo-Elements see css_11.html

CSS Cascading

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)

Cascading cascade assigns weight to each property in each style

sheet statement (1 is lowest weight):1. user agent properties2. user properties3. author properties4. author important properties5. 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

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

Cascadingtd (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;}

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;}

Thanks for your attention