Cascading Style Sheets Martin Kruli by Martin Kruli
Cascading Style Sheets Martin Kruliš by Martin Kruliš (v 1. 1) 18. 10. 2018 1
Evolution of Web Presentation CSS Multimedia 3. 0 HTML 4. 01 HTML Structure & Semantics CSS HTML 5 XHTML Scripting Java. Script, Flash, … Presentation & Design SVG time data-* attributes Math. ML by Martin Kruliš (v 1. 1) 18. 10. 2018 2
CSS and HTML Content <h 1>CSS Introduction</h 1> font: 20 pt Calibri; color: brown; CSS Introduction … HTML provides semantics: “This is a heading” CSS provides visual properties (font, color, . . ) by Martin Kruliš (v 1. 1) 18. 10. 2018 3
Cascading Style Sheets � Document Object Model <html> <head>. . . </head> <body> <h 1>Text</h 1> <p> Some <b>bold</b> and some plain text. </p>. . . </body> </html> Document body h 1 Text … p Some b and some plain text. bold by Martin Kruliš (v 1. 1) 18. 10. 2018 4
Cascading Style Sheets � Styles are assigned to visible elements ◦ And affect page rendering Document font: 12 pt Arial; background-color: #fff; font-size: 24 pt; margin: 10 px 0; body h 1 Text … p Some text-align: justify; padding: 5 px; b and some plain text. bold by Martin Kruliš (v 1. 1) 18. 10. 2018 5
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š (v 1. 1) 18. 10. 2018 6
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 (True. Type, Open. Type, …) �Provide more complex selector relations �Add transitions and animations by Martin Kruliš (v 1. 1) 18. 10. 2018 7
Embedding CSS � 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 <!DOCTYPE HTML> <html> <head> <title>CSS Example</title> <style type="text/css"> body { font: 12 pt Calibri; } p { margin: 10 px; }. . . </style> </head> <body>. . . by Martin Kruliš (v 1. 1) 18. 10. 2018 8
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> styles. css body { font: 12 pt Calibri; } p { margin: 10 px; }. . . <body>. . . by Martin Kruliš (v 1. 1) 18. 10. 2018 9
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> <h 1 style="color: red; ">Red Heading</h 1>. . . by Martin Kruliš (v 1. 1) 18. 10. 2018 10
CSS Syntax � Cascading Style Sheets ◦ Simple plain-text syntax based on English keywords ◦ File is a sequence of rules selector { some-property: value 1; another-property: value 2; } Declaration block ◦ 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 by Martin Kruliš (v 1. 1) 18. 10. 2018 11
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 #my. Id selects an element with attribute id="my. Id" �Selecting elements with assigned class. my. Class selects all elements with class="my. Class" �One element may have multiple classes assigned <li class="special. Offer discount">Great Deal!… �* universal selector (selects all elements) Example 1 by Martin Kruliš (v 1. 1) 18. 10. 2018 12
CSS Selectors � Combining Selectors ◦ Simple combinations �div. info select all div elements with info class �h 1#main selects h 1 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 Example 2 by Martin Kruliš (v 1. 1) 18. 10. 2018 13
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 by Martin Kruliš (v 1. 1) Example 3 18. 10. 2018 14
CSS Selectors � Pseudo-classes Selectors : 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) : nth-of-type(e) : nth-last-child(e) : nth-last-of-type(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. , 2 n selects even items, 2 n+1 odd items, … Example 4 by Martin Kruliš (v 1. 1) 18. 10. 2018 15
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š (v 1. 1) 18. 10. 2018 16
![CSS Selectors � Attribute Selectors ◦ Select elements with given attribute(s) �[attr] selects elements](http://slidetodoc.com/presentation_image_h/22c812a81a9acab98e9e070bbe2ee04d/image-17.jpg "CSS Selectors � Attribute Selectors ◦ Select elements with given attribute(s) �[attr] selects elements")
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š (v 1. 1) 18. 10. 2018 17
CSS Syntax � Aggregating Rules ◦ One declaration block can be used with multiple selectors separated by comma s 1, s 2 { properties used for s 1 and s 2 } � Selector ◦ ul li Syntax Pitfalls �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š (v 1. 1) 18. 10. 2018 18
CSS Properties � Property Values ◦ Numerical values (size, angle, duration, …) �font-size: 12 pt; ◦ 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š (v 1. 1) 18. 10. 2018 19
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 �#00 f, #0000 ff, rgb(0, 0, 255), rgb(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š (v 1. 1) 18. 10. 2018 20
CSS Properties � Units for Numeric Values ◦ All numbers must have a unit (except for 0) cm, mm, in Centimeters, Millimeters, Inches (1 in = 2. 54 cm) px Pixels (1 px = 1/96 in) pt Typographical points (1 pt =1/72 in) pc Picas (1 pc = 12 pt) 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š (v 1. 1) 18. 10. 2018 21
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š (v 1. 1) 18. 10. 2018 22
CSS Properties � 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 Example 5 by Martin Kruliš (v 1. 1) 18. 10. 2018 23
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 ◦ Box model applies to block elements (not inline elements) by Martin Kruliš (v 1. 1) 18. 10. 2018 24
CSS Properties � Box Model padding Content border margin Another Content Margins (typically) collapse – i. e. , adjacent margins overlap by Martin Kruliš (v 1. 1) 18. 10. 2018 25
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: 10 pt; } h 1 { font-size: 150%; } �Makes h 1 15 pt large by Martin Kruliš (v 1. 1) 18. 10. 2018 26
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 by Martin Kruliš (v 1. 1) 18. 10. 2018 27
Cascading � 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 !important suffix 5. Important author declarations 6. Animation declarations (will be explained in adv. lectures) 7. Normal override declaration Styles in HTML document or in linked CSS file 8. Normal author declarations 9. Normal user declarations Styles provided by browser 10. Normal user agent declarations user (e. g. , via configuration) Browser (default) style sheets by Martin Kruliš (v 1. 1) 18. 10. 2018 28
Cascading � Example 6 by Martin Kruliš (v 1. 1) 18. 10. 2018 29
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š (v 1. 1) 18. 10. 2018 30
Counters � Automated Numbering ◦ CSS counters are operated by two properties �counter-reset: counter. ID [ number ]; �Initialize given counter (with default or specified number) �counter-increment: counter. ID; �Increments selected counter by 1 ◦ The counter values may be used in : : before and : : after rules in the content property body { counter-reset: chapter; } h 1: : before { content: counter(chapter) ". "; counter-increment: chapter; Example 7 } by Martin Kruliš (v 1. 1) 18. 10. 2018 31
Discussion by Martin Kruliš (v 1. 1) 18. 10. 2018 32
- Slides: 32
