Cascading Style Sheets Martin Kruli by Martin Kruli
Cascading Style Sheets Martin Kruliš by Martin Kruliš (v 1. 3) 18. 12. 2019 1
Evolution of Web Presentation & Design SVG CSS Multimedia 3. 0 HTML 5 XHTML Java. Script 4. 01 HTML Structure & Semantics CSS time data-* attributes Math. ML by Martin Kruliš (v 1. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 4
Cascading Style Sheets � Styles are assigned to visible elements ◦ And affect page rendering Document font: 12 pt Arial; background-color: #fff; Sometimes, inheritance is involved 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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. 3) 18. 12. 2019 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) by Martin Kruliš (v 1. 3) 18. 12. 2019 12
CSS Selectors Example <body> <h 1 id="pageheading">CSS Examples</h 1> * {. . . } <p>Example of using selectors</p> <p>The basic selectors are: </p> body {. . . } <ul> <li>#id</li> p {. . . } <li class="hlight">. class</li> <li>tag selectors</li> #pageheading {. . . } <li>* <span class="hlight">universal</span>. hlight {. . . } </li> </ul> </body> by Martin Kruliš (v 1. 3) 18. 12. 2019 13
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 by Martin Kruliš (v 1. 3) 18. 12. 2019 14
CSS Selectors Example div. info { … } p. info { … } li+li+li { … } section. small p { … } section. small > p {…} <section> <div class="info">. . . </div> <p class="info">. . . </p> <ul> <li>first item</li> <li>second item</li> <li>third item</li> <li>fourth item</li> </ul> </section> <section class="small"> <section> <p>Paragraph of smaller text</p> </section> <p>Another one of smaller text</p> </section> by Martin Kruliš (v 1. 3) 18. 12. 2019 15
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. 3) 18. 12. 2019 16
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. 3) 18. 12. 2019 17
CSS Selectors Example a { Webik color: blue; } a: hover { color: red; } Both styles are applied (but the latter overrides the former in this case) <a href=". . . ">Webik</a> by Martin Kruliš (v 1. 3) 18. 12. 2019 18
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, … by Martin Kruliš (v 1. 3) 18. 12. 2019 19
CSS Selectors Example tr: nth-of-type(2 n) td { background-color: green; } tr td: nth-of-type(3 n+1) { background-color: blue; } by Martin Kruliš (v 1. 3) 18. 12. 2019 20
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. 3) 18. 12. 2019 21
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; Handle with �Important properties take precedence by Martin Kruliš (v 1. 3) extreme care 18. 12. 2019 22
Cascading � by Martin Kruliš (v 1. 3) 18. 12. 2019 23
Selector Specificity Examples <div class="bluetext"> ? Text in div <p>Paragraph inside div</p> ? <ul> <li>item 1</li> ? <li>item 2 <ol> <li>subitem A</li> ? <li>subitem B</li> </ol> </li> ? <li id="item 3">item 3</li> </ul> </div> #item 3 { color: yellow; }. bluetext { color: blue; } p { color: red; } div p { color: green; } ul>li { color: magenta; } li { color: black; } by Martin Kruliš (v 1. 3) 18. 12. 2019 24
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. 3) 18. 12. 2019 25
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 by Martin Kruliš (v 1. 3) 18. 12. 2019 26
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. 3) 18. 12. 2019 27
CSS Properties � Box Model padding Content border margin Another Content Margins (typically) collapse – i. e. , adjacent margins overlap by Martin Kruliš (v 1. 3) 18. 12. 2019 28
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. 3) 18. 12. 2019 29
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. 3) 18. 12. 2019 30
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. 3) 18. 12. 2019 31
Floating Elements � Floating Elements ◦ Inline elements that change standard content flow ◦ The floating element is placed at left or right side of the page and rest of the contents flows around it float: left; or float: right; �Originally intended for narrow side-figures �Can be used for page layout (e. g. , navigation menu) ◦ Other elements may prevent their content to flow around floating elements clear: left; clear: right; clear: both; �Specify that on one (or both) sides cannot be a floating element (the content is moved below floating element) by Martin Kruliš (v 1. 3) 18. 12. 2019 32
Floating Elements Example Lorem ipsum dolor sit amet consectetuer Quisque lacinia pretium In eget. Sit at est In In ipsum fames ipsum tellus pretium pellentesque. Sit ut cursus Curabitur vitae tellus felis metus Curabitur Nulla egestas. Tempus tellus Vestibulum pellentesque dolor id sem dapibus ligula at at. Et Proin libero vitae Curabitur ac ut Fusce lorem urna hendrerit. Rutrum elit Vestibulum ante Sed orci. float: left In accumsan mauris nulla consequat tempor lobortis convallis orci porttitor felis. Curabitur In justo id eros Donec Curabitur tempus Aliquam eu ligula float: right clear: both Novam sectionem by Martin Kruliš (v 1. 3) 18. 12. 2019 33
Display � Element Display Modes ◦ Elements have specific ways of rendering �Inline elements (<em>), block elements (<p>), table elements, lists, … ◦ display property can override default behavior �Most common values are block Standard block element inline Element rendered inline with the text inline-block Small block inserted in text flow none Hidden element (no effect on layout) list-item Default for <li> elements table, table-* Tables rows and cells have specialized formatting by Martin Kruliš (v 1. 3) 18. 12. 2019 34
Content Positioning � Page Rendering Algorithm ◦ The elements and their content are processed from the beginning to the end ◦ Each element is positioned according to its size, margins, and display properties (block, inline, …) �Except for the floating elements mentioned before ◦ This behavior can be modified by positioning static Default page rendering algorithm is used relative Like static, but element is moved relative to its computed position after the layout is created absolute Element is positioned inside closest positioned ancestor fixed Element is fixed within the browser viewport sticky Sticks to ancestor viewport when scrolling by Martin Kruliš (v 1. 3) 18. 12. 2019 35
Content Positioning � Positioning-related Properties ◦ Size properties (for all positioning types) �width, height – size of the element contents �min-/max- width/height – size limits ◦ Location properties (for positioned elements only) �top, bottom, left, right �Distance from the edge at the corresponding side It does not make sense to set left, width, and right simultaneously width Content padding right margin by Martin Kruliš (v 1. 3) 18. 12. 2019 36
Content Positioning � Absolute Positioning Example #abs. Div { position: absolute; left: 10 px; 10 px right: 20 px; top: 30 px; height: 50 px; } Nearest positioned element or the whole document 30 px abs. Div 50 px 20 px Determined by parent width by Martin Kruliš (v 1. 3) 18. 12. 2019 37
Page Layout � Layout ◦ Visual structure of the content blocks of the whole page or its logical part �Placement of menu-bar, additional sidebar, page header and footer, … ◦ Many different approaches content side bar menu bar �Whether the page scrolls as whole or not �How each container handle content overflows �… header footer by Martin Kruliš (v 1. 3) 18. 12. 2019 38
Page Layout � Creating Layout with Sidebars ◦ Tables ◦ Floating Sidebars �Quite easy to design, but �The sidebars must precede main content �It is a little bit tricky to ensure correct sidebar height ◦ Absolute/Fixed Sidebars �Cover the contents underneath �Sidebars can be almost anywhere in the document ◦ Flexbox, Grid �Modern features of CSS (but not mentioned on slides) by Martin Kruliš (v 1. 3) 18. 12. 2019 39
Media � Media Types ◦ Select style sheets for particular media �PC screen, printer, projector, handheld devices, … � Media Features (Properties) ◦ Add additional conditions to the types �Viewport size limits, orientation, color depth, … � Utilization ◦ Attribute media in <style> and <link> elements ◦ @media rule inside style sheet @media screen and (min-width: 480 px) { CSS rules } by Martin Kruliš (v 1. 3) 18. 12. 2019 40
Media � Media Query Syntax ◦ Media type and arbitrary number of media features concatenated with and operator print and (monochrome) �Features are either flags or name-value pairs ◦ Queries can be concatenated by comma �Which acts as or operator � Media Types all All possible media inputs (default) screen Screen of a computer (laptop, tablet, …) print Printer speech Screen reader that presents the page in vocal form by Martin Kruliš (v 1. 3) 18. 12. 2019 41
Media � Media Features ◦ Additional properties required from the media width height Length that specifies width/height of the viewport. Property accepts min- and max- prefixes, which are more useful (e. g. , min-width: 300 px) device-width device-height Width/height of the whole rendering surface (also accepts min- and max- prefixes) orientation Possible values portrait and landscape aspect-ratio The width/height ratio of the view port color Indicating a color device; optional value indicate number of bits per channel (e. g. , min-color: 8) monochrome Indicating a monochrome/greyscale device resolution Output smoothness in dpi or dpcm by Martin Kruliš (v 1. 3) 18. 12. 2019 42
Responsive Web � Responsive Web Design ◦ The web adjusts layout (and other properties) to the properties of display device �So it can effectively present its contents on small handheld devices as well as on 4 K monitors ◦ Possible approaches �Important measurements are expressed relatively in %, vh, and vw units �Multiple layouts (style sheets) are prepared for different devices (and selected by media conditions) Example 1 by Martin Kruliš (v 1. 3) 18. 12. 2019 43
Transformations � Projection Transformations ◦ Linear transformations of projection matrix transform: func 1(…) func 2(…) … ◦ 2 D transformations translate(x, y) Translate by vector (x, y) rotate(deg) Rotation around z-axis (perpendicular to screen) scale(x, y) Enlarge or shrink by given factor skew(xdeg, ydeg) skew. X(deg) skew. Y(deg) Create a skew effect (asymmetrical rotation) matrix(…) Specify linear transformation matrix by Martin Kruliš (v 1. 3) 18. 12. 2019 44
Transformations � Projection Transformations ◦ 3 D transformations �Analogical to 2 D case (except for skew) rotate -> rotate 3 d, rotate. X, rotate. Y, rotate. Z matrix(6 vals) -> matrix 3 d(16 vals) �perspective() – distance between z-plane and user ◦ Additional properties �transform-origin – center of transformation (rotate) �transform-style – flat or preserve-3 d �transform-box –bounding box for the transformation �border-box, fill-box, or view-box by Martin Kruliš (v 1. 3) 18. 12. 2019 45
Transformations Examples by Martin Kruliš (v 1. 3) 18. 12. 2019 46
Transitions � CSS Property Transitions ◦ Modifications of CSS properties are animated �When pseudo-class changes (e. g. , : hover or : target) �Client-side script changes classes, style attribute, … ◦ Properties transition-property Which CSS properties are animated transition-duration How long should each animation last transition-timingfunction Interpolation function used for the animation (linear, ease-in, ease-out, …) transition-delay Delay before the change is started transition Sets all previous properties at once Example 2 by Martin Kruliš (v 1. 3) 18. 12. 2019 47
Discussion by Martin Kruliš (v 1. 3) 18. 12. 2019 48
- Slides: 48
