Cascading Style Sheets Martin Kruliš by Martin Kruliš (v1.1) 18.10.2017
Evolution of Web Presentation JavaScript, Flash, … Scripting SVG Multimedia CSS CSS 3.0 Presentation & Design HTML 4.01 HTML HTML5 time Structure & Semantics XHTML data-* attributes MathML by Martin Kruliš (v1.1) 18.10.2017
CSS and HTML Content CSS Introduction … font: 20pt Calibri; color: brown; <h1>CSS Introduction</h1> CSS Introduction … HTML provides semantics: “This is a heading” CSS provides visual properties (font, color, ..) by Martin Kruliš (v1.1) 18.10.2017
Cascading Style Sheets Document Object Model <html> <head>...</head> <body> <h1>Text</h1> <p> Some <b>bold</b> and some plain text. </p> ... </body> </html> Document body h1 p Text Some and some plain text. b bold … by Martin Kruliš (v1.1) 18.10.2017
Cascading Style Sheets Styles are assigned to visible elements And affect page rendering Document body h1 p Text Some and some plain text. b bold … font: 12pt Arial; background-color: #fff; font-size: 24pt; margin: 10px 0; text-align: justify; padding: 5px; by Martin Kruliš (v1.1) 18.10.2017
Cascading Style Sheets Versions CSS 1 (1996) Basic text properties (fonts, alignment, spacing, …) Color of text and backgrounds Margins, paddings, and borders CSS 2 (1998) New types of positioning Concept of media introduced CSS 2.1 (2004-2011) Fixes serious problems of CSS 2 Replaces problematic features with already implemented properties from existing browsers by Martin Kruliš (v1.1) 18.10.2017
Cascading Style Sheets Versions CSS 3 (1999-present) Divide CSS specification into modules Selectors, color, cascade, box, layout, background, … Improve existing properties More elaborate backgrounds, custom borders, … Introduce additional visual effects Round corners, shadows, … Allows using custom fonts (TrueType, OpenType, …) Provide more complex selector relations Add transitions and animations by Martin Kruliš (v1.1) 18.10.2017
Embedding CSS Element <style> Embedded CSS within HTML document <!DOCTYPE HTML> <html> <head> <title>CSS Example</title> <style type="text/css"> body { font: 12pt Calibri; } p { margin: 10px; ... </style> </head> <body> Element <style> Embedded CSS within HTML document Placed in header Element contents must be in CSS syntax Useful for single-file pages and for faster loading via HTTP by Martin Kruliš (v1.1) 18.10.2017
Linking CSS Linking External Style Sheet File Separate files for separate languages Better code (style sheet) reusability <!DOCTYPE HTML> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ... body { font: 12pt Calibri; } p { margin: 10px; ... styles.css by Martin Kruliš (v1.1) 18.10.2017
Inline CSS Global Attribute style HTML attribute applicable for all visual elements Contains CSS properties only (without selector) Associated with the element of the style attribute Used in rare cases (usually by scripts) <!DOCTYPE HTML> <html> <body> <h1 style="color: red;">Red Heading</h1> ... by Martin Kruliš (v1.1) 18.10.2017
CSS Syntax Cascading Style Sheets Simple plain-text syntax based on English keywords File is a sequence of rules selector { some-property: value1; another-property: value2; } Selector is used to select a subset of HTML elements for which the declaration are used Declaration block contains list of declarations, that specify values for CSS properties Declaration block by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Selectors Simple declarative query-like language Basic selector types Element name selector p selects all elements p (paragraphs) Selecting single element of given ID #myId selects an element with attribute id="myId" Selecting elements with assigned class .myClass selects all elements with class="myClass" One element may have multiple classes assigned <li class="specialOffer discount">Great Deal!… * universal selector (selects all elements) Example 1 by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Combining Selectors Simple combinations div.info select all div elements with info class h1#main selects h1 element with id="main" Using relative positions in the document E F selects elements F which have ancestor E E > F selects elements F which have parent E E + F selects elements F which are immediately preceded by E E ~ F selects elements F which are preceded by E We can use any other selectors instead of E and F A nice training for CSS selectors may be found at http://flukeout.github.io/ Example 2 by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Pseudo-classes Selectors Usually used in with another selector (e.g., a:visited) :link Unvisited hyperlink :active Active (currently clicked on) hyperlink :visited Visited hyperlink ::first-line First line of the text inside ::first-letter First letter of the text inside :disabled Disabled (e.g., input with disabled attribute) :checked Checked input checkbox :focus Element which has focus :hover Element over which a mouse cursor hovers :target Element that matches fragment part of current URL :root Root element of the document Example 3 by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Pseudo-classes Selectors Example 4 :first-child Element which is the first child of its parent :last-child Element which is the last child of its parent :only-child Element which is the only child of its parent :first-of-type Element which is the first/last/only sibling of its type (e.g., p:first-of-type selects the first p within its parent no matter other element types) :last-of-type :only-of-type :nth-child(e) The expression e in the parenthesis can be B, An, or An+B, where A and B are numeric literals. It selects elements that have exactly An+B-1 preceding children/type-siblings for any n ≥ 0. E.g., 2n selects even items, 2n+1 odd items, … :nth-of-type(e) :nth-last-child(e) :nth-last-of-type(e) Example 4 by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Pseudo-classes Selectors :not(X) Negation pseudo-class selects elements that does not match simple selector X ::selection Part of the text selected by user ::before ::after Inserts additional content before/after selected element. An example that inserts Q.E.D. at the end of each proof: p.proof::after { content: "Q.E.D."; } by Martin Kruliš (v1.1) 18.10.2017
CSS Selectors Attribute Selectors Select elements with given attribute(s) [attr] selects elements with attribute attr (the value of the attribute does not matter) [attr=val] attribute attr with exact value val [attr^=val] attribute that starts with given value (e.g., a[href^="https"] selects links to secured pages) [attr$=val] attribute that ends with given value [attr*=val] attribute that contains a value as a substring [attr~=val] attribute with list of whitespace-separated values where val matches one of the items on the list [attr|=val] attribute with value val or beginning with val immediately followed by ‘-’ (intended for lang) by Martin Kruliš (v1.1) 18.10.2017
CSS Syntax Aggregating Rules Selector Syntax Pitfalls One declaration block can be used with multiple selectors separated by comma s1, s2 { properties used for s1 and s2 } Selector Syntax Pitfalls ul li consider <ul><li><ol><li> structure p.info vs. p .info careful with whitespace main ul, ol main belongs only to the first selector (ol stands alone) by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Property Values Numerical values (size, angle, duration, …) font-size: 12pt; Color background-color: black; Link to external source (e.g., an image) background-image: url("paper-texture.png"); Strings and identifiers font-family: "Courier New"; Specific value enumerated in property definition border-style: solid; by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Property Values Many properties have aggregated alternations E.g., border property has three values that correspond to border-width, border-style, and border-color Color Values List of predefined names (red, black, blue, …) transparent stands for fully transparent black By RGB value #00f, #0000ff, rgb(0,0,255), rgb(0%,0%,100%) By RGBA rgba(0,0,255,1), rgba(0%,60%,10%,0.2) By HSL and HSLA (analogically to RGB/RGBA) by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Units for Numeric Values All numbers must have a unit (except for 0) cm, mm, in Centimeters, Millimeters, Inches (1in = 2.54cm) px Pixels (1px = 1/96 in) pt Typographical points (1pt =1/72 in) pc Picas (1pc = 12pt) em Relative to the font-size of current element ex Relative to the height of ‘x’ in current font size % Special – relative to some existing/inherited value vh, vw Relative to 1% of width/height of the viewport deg Degrees (rotation) s Seconds by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Text Styling Many properties that affect font and text formatting font-family Font used for the text (e.g., Arial) font-size Size of the font (usually specified in pt) font-weight Font bold-ness font-style Makes font italic font Sets all font properties at once text-align Alignment of a text block (left, right, center, …) text-decoration Adds additional decorations (underline, …) text-indent Indentation of the first line of the text block line-height Height of all lines in the block letter-spacing Modifies spacing of letters within words word-spacing Modifies spacing between adjacent words by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Color Properties Background Images color – foreground color (text) background-color – fills background continuously Background Images background-image – URL to external image background-position - location within element background-repeat – used for tile textures background-attachment – whether background is relative to the document or window Example 5 by Martin Kruliš (v1.1) 18.10.2017
CSS Properties Box Model Border – visible bounding box around contents Have width, color, and style (solid, dotted, …) Padding – space between content and border Margin – minimal space to nearest border of another element Properties can be set for each side separately by Martin Kruliš (v1.1) 18.10.2017
Margins (typically) collapse – i.e., adjacent margins overlap CSS Properties Box Model Content padding border margin Another Content https://developer.mozilla.org/cs/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Margins (typically) collapse – i.e., adjacent margins overlap by Martin Kruliš (v1.1) 18.10.2017
Inheritance Property Inheritance Some properties inherit their values from parent HTML elements These properties have inherit value as default E.g., font properties Setting font at body selector changes entire document Relative numerical values implicitly use inheritance body { font-size: 10pt; } h1 { font-size: 150%; } Makes h1 15pt large What is the difference between body { font: 12pt Arial; } and * { font: 12pt Arial; } ? by Martin Kruliš (v1.1) 18.10.2017
Cascading Combining Style Properties More than one rule can apply to an element Complex schema of priorities (weights) is defined The priorities are based on Style sheet origin Selector specificity Order of appearance (latter overrides former) Importance CSS property may be marked as important color: blue !important; Important properties take precedence The complete Cascade rules specification are here http://www.w3.org/TR/css-cascade-3/ by Martin Kruliš (v1.1) 18.10.2017
Cascading Origin Precedence (descending order) Transition declarations (will be explained later) Important user agent declarations Important user declarations Important override (by client-script) declarations Important author declarations Animation declarations (will be explained in adv. lectures) Normal override declaration Normal author declarations Normal user declarations Normal user agent declarations Styles in HTML document or in linked CSS file The complete Cascade rules specification are here http://www.w3.org/TR/css-cascade-3/ Styles provided by browser user (e.g., via configuration) Browser (default) style sheets by Martin Kruliš (v1.1) 18.10.2017
Cascading Selector Specificity Defines priority for selectors from the same origin For given selector 𝑆, let 𝐴 = number of ID sub-selectors of 𝑆 𝐵 = number of class, pseudo-class, and attribute sub- selectors of 𝑆 𝐶 = number of type sub-selectors in 𝑆 Concatenation 𝐴𝐵𝐶 (in sufficiently high base) gives selector specificity For example #d1 ul li.new span:hover Has 1 ID, 2 classes, and 3 types ⇨ specificity 123 Example 6 by Martin Kruliš (v1.1) 18.10.2017
Importing Style Sheets @import Rule Include another stylesheet into current one @import "another.css"; @import url("another.css"); @import rule must precede all other rules Except @charset Import may be media dependent @import url("printer.css") print; Media will be explained later by Martin Kruliš (v1.1) 18.10.2017
Counters Automated Numbering CSS counters are operated by two properties counter-reset: counterID [ number ]; Initialize given counter (with default or specified number) counter-increment: counterID; Increments selected counter by 1 The counter values may be used in ::before and ::after rules in the content property body { counter-reset: chapter; } h1::before { content: counter(chapter) ". "; counter-increment: chapter; } Example 7 by Martin Kruliš (v1.1) 18.10.2017
Discussion by Martin Kruliš (v1.1) 18.10.2017