1. Martin Kruliš 5. 11. 2015 by Martin Kruliš (v1.0)1

2. Scripting JavaScript, Flash, … Scripting JavaScript, Flash, … 5. 11. 2015 by Martin Kruliš (v1.0)2 HTML time Structure & Semantics Presentation & Design HTML 4.01 CSS XHTML CSS 3.0 CSS 3.0 HTML5 SVG MathML Multimedia data-* attributes data-* attributes

3. 5. 11. 2015 by Martin Kruliš (v1.0)3 CSS Introduction … CSS Introduction font: 20pt Calibri; color: brown; HTML provides semantics: “This is a heading” HTML provides semantics: “This is a heading” CSS provides visual properties (font, color,..)

4.  Document Object Model... Text Some bold and some plain text.... 5. 11. 2015 by Martin Kruliš (v1.0)4 Document body h1 p p Text Some and some plain text. b b bold …

5.  Styles are assigned to visible elements ◦ And affect page rendering 5. 11. 2015 by Martin Kruliš (v1.0)5 Document body h1 p p Text Some and some plain text. b b bold … font: 12pt Arial; background-color: #fff; font: 12pt Arial; background-color: #fff; font-size: 24pt; margin: 10px 0; font-size: 24pt; margin: 10px 0; text-align: justify; padding: 5px; text-align: justify; padding: 5px;

6.  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 5. 11. 2015 by Martin Kruliš (v1.0)6

7.  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 5. 11. 2015 by Martin Kruliš (v1.0)7

8.  Element ◦ 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 5. 11. 2015 by Martin Kruliš (v1.0)8 CSS Example body { font: 12pt Calibri; } p { margin: 10px; }...... CSS Example body { font: 12pt Calibri; } p { margin: 10px; }......

9.  Linking External Style Sheet File ◦ Separate files for separate languages ◦ Better code (style sheet) reusability 5. 11. 2015 by Martin Kruliš (v1.0)9 CSS Example <link rel="stylesheet" type="text/css" href="styles.css">... CSS Example <link rel="stylesheet" type="text/css" href="styles.css">... body { font: 12pt Calibri; } p { margin: 10px; }... body { font: 12pt Calibri; } p { margin: 10px; }... styles.css

10.  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) 5. 11. 2015 by Martin Kruliš (v1.0)10 Red Heading... Red Heading...

11.  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 5. 11. 2015 by Martin Kruliš (v1.0)11 Declaration block

12.  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 Great Deal!…  * universal selector (selects all elements) 5. 11. 2015 by Martin Kruliš (v1.0)12 Example 1

13.  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 5. 11. 2015 by Martin Kruliš (v1.0)13 Example 2

14.  Pseudo-classes Selectors ◦ Usually used in with another selector (e.g., a:visited ) 5. 11. 2015 by Martin Kruliš (v1.0)14 :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

15.  Pseudo-classes Selectors 5. 11. 2015 by Martin Kruliš (v1.0)15 :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

16.  Pseudo-classes Selectors 5. 11. 2015 by Martin Kruliš (v1.0)16 :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."; }

17.  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 ) 5. 11. 2015 by Martin Kruliš (v1.0)17

18.  Aggregating Rules ◦ 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 structure ◦ p.info vs. p.info  careful with whitespace ◦ main ul, ol  main belongs only to the first selector ( ol stands alone) 5. 11. 2015 by Martin Kruliš (v1.0)18

19.  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; 5. 11. 2015 by Martin Kruliš (v1.0)19

20.  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) 5. 11. 2015 by Martin Kruliš (v1.0)20

21.  Units for Numeric Values ◦ All numbers must have a unit (except for 0) 5. 11. 2015 by Martin Kruliš (v1.0)21 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

22.  Text Styling ◦ Many properties that affect font and text formatting 5. 11. 2015 by Martin Kruliš (v1.0)22 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

23.  Color Properties ◦ 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 5. 11. 2015 by Martin Kruliš (v1.0)23 Example 5

24.  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 5. 11. 2015 by Martin Kruliš (v1.0)24 Content padding border margin Another Content

25.  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 5. 11. 2015 by Martin Kruliš (v1.0)25

26.  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 5. 11. 2015 by Martin Kruliš (v1.0)26

27.  Origin Precedence (descending order) 1.Transition declarations (will be explained later) 2.Important user agent declarations 3.Important user declarations 4.Important override (by client-script) declarations 5.Important author declarations 6.Animation declarations (will be explained later) 7.Normal override declaration 8.Normal author declarations 9.Normal user declarations 10. Normal user agent declarations 5. 11. 2015 by Martin Kruliš (v1.0)27 Styles in HTML document or in linked CSS file Styles provided by browser user (e.g., via configuration) Browser (default) style sheets

28. 5. 11. 2015 by Martin Kruliš (v1.0)28 Example 6

29.  @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 5. 11. 2015 by Martin Kruliš (v1.0)29

30.  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; } 5. 11. 2015 by Martin Kruliš (v1.0)30 Example 7

31. 5. 11. 2015 by Martin Kruliš (v1.0)31