Pro Yearly is on sale from $80 to $50! »

CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)

1135dc242dcff3b90ae46fc586ff4da8?s=47 Beat Signer
October 23, 2020

CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)

This lecture forms part of the course Web Technologies given at the Vrije Universiteit Brussel.

1135dc242dcff3b90ae46fc586ff4da8?s=128

Beat Signer

October 23, 2020
Tweet

Transcript

  1. 2 December 2005 Web Technologies CSS3 and Responsive Web Design

    Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com
  2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

    October 23, 2020 Cascading Style Sheets (CSS) ▪ Separation of presentation and content ▪ visualisation of HTML elements defined by styles ▪ enables multiple presentations of the same content ▪ media-specific style sheets via the media attribute <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" media="screen, tv" /> <link rel="stylesheet" type="text/css" href="alternative.css" media="print, handheld" /> </head> <body> ... </body> </html>
  3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

    October 23, 2020 CSS Versions ▪ CSS1 specification published in 1996 ▪ remember that HTML 3.2 introduced some elements and attributes (e.g. color) for the visual appearance in 1997 ▪ CSS2 specification published in 1998 ▪ superset of CSS1 ▪ functionality for relative, absolute and fixed positioning of elements ▪ media types ▪ CSS3 divided into separate modules (documents) ▪ 2D & 3D transforms ▪ transitions ▪ Flexbox ▪ media queries ▪ ...
  4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

    October 23, 2020 CSS Versions W3C Recommendation W3C Candidate Recommendation Working Draft CSS Syntax Pseudo Classes Visual Effects Grid Layout Masking Basic UI Flexible Layout Syntax L3 Speech Multi- Column Back- grounds Borders Style Attributes Media Queries Selectors L3 Name spaces Color L3 Ruby Paged Media Transforms based on https://en.wikipedia.org/wiki/Cascading_Style_Sheets Selectors L4 Web Animations Transitions MathML Generated Content Text Properties Color + Back- ground Box Properties Box Model Media Types Tables Paged Media Generated Content Selectors Cascade Font Properties
  5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

    October 23, 2020 CSS Syntax ▪ CSS rule consists of two parts ▪ a selector - HTML element ▪ a declaration block (at least one property and value) - surrounded by curly braces - multiple properties are separated with a semicolon ▪ Example selector { property1 : value1 ; property2 : value2 ; } h1 { color: red; font-size: 10px; }
  6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6

    October 23, 2020 Selectors ▪ Selectors are used to target rules to specific elements in an HTML document (case sensitive) ▪ Universal selector ▪ all elements in the document ▪ Element/Type selector ▪ specific element names ▪ ID selector ▪ element with a specific value for the id attribute * { ... } p { ... } h1, h2, h3 { ... } /* also called grouping selector */ #intro { ... } /* always more weight than class selector */
  7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

    October 23, 2020 Selectors … ▪ Class selector ▪ elements with the given class attribute value (elements can have more than one class) ▪ Child selector ▪ elements that are direct children of other elements ▪ Descendant selector ▪ elements that are descendants of other elements .main { ... } /* any element with a 'main' class value */ h1.main { ... } /* only h1 elements with a 'main' class value */ p>a { ... } p a { ... }
  8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

    October 23, 2020 Selectors … ▪ Attribute selector ▪ elements with a given attribute value ▪ Pseudo element selectors ▪ treated like extra elements ▪ Pseudo class selector ▪ acts like additional values for a class attribute p[type] { ... } /* p element with an attribute called type (existence) */ p[type="new"] { ... } /* p element with attribute value 'new' (equality) */ p[type^="n"] { ... } /* type attribute value starts with letter 'n' */ p[type*="do"] { ... } /* type attribute contains substring 'do' */ h1.main::first-letter { ... } a:link { ... } a:hover { ... } a:active { ... } a:visited { ... }
  9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

    October 23, 2020 Rule Order ▪ For identical selectors, the last rule will be applied ▪ Furthermore, we have the following internal priorities (1) rules containing IDs (2) rules containing classes (or pseudo classes) and attributes (3) rules containing elements (or pseudo elements) ▪ Rules for selectors that are more specific than the others have preference * { color: red; } p b { color: pink; } /* more specific than p selector */ p { color: blue; } p { color: green; } /* last rule for p selector */
  10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

    October 23, 2020 Inheritance ▪ Some properties such as color or font-family are inherited by most child elements ▪ leads to simpler style sheets ▪ The inheritance of properties can be enforced via the inherit keyword body { color: red; /* inherited by child elements */ padding: 10px; /* normally not inherited */ } p { padding: inherit; /* explicitly inherited from parent element */ }
  11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

    October 23, 2020 CSS Inclusion ▪ There are three ways how CSS can be included in HTML ▪ inline style ▪ internal style sheet ▪ external style sheet ▪ Inline style ▪ defined via the style attribute of the corresponding HTML element ▪ still mixes content and presentation and should therefore be avoided whenever possible <h1 style="color:red; font-size:10px">Urgent Tasks</h1>
  12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

    October 23, 2020 CSS Inclusion ... ▪ Internal style sheet ▪ used when a single document has a unique style ▪ defined in the <head> section ▪ e.g. used in HTML-encoded emails <html> <head> ... <style> h1 {color: red; font-size: 10px;} p {color: blue;} ... </style> </head> <body> ... </body> </html>
  13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

    October 23, 2020 CSS Inclusion ... ▪ External style sheet (in *.css file) ▪ changes to the overall appearance of an entire website can be managed in a single file - removes a lot of potential redundancy - saves a lot of time - leads to more consistent websites <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> ... </body> </html>
  14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

    October 23, 2020 Multiple Style Sheets (Cascading) ▪ Multiple styles will cascade into a single one ▪ properties/values are inherited from more specific style sheets ▪ Overriding priorities (1) inline style (highest priority) (2) internal style sheet (3) external style sheet (4) default browser style ▪ Note that if the link to the external style sheet in the <head> section is placed after the internal style sheet, then the external style sheet will override the internal one ▪ A style sheet can import other style sheets via @import
  15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

    October 23, 2020 Box Model ▪ Box that wraps every single HTML element (content) ▪ by default the box is just big enough to keep its content ▪ padding - transparent area around the content ▪ border - around the padding ▪ margin - transparent area around the border margin padding border content div { width: 300px; /* only content area */ padding: 10px; border: 10px red; margin: 5px; }
  16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

    October 23, 2020 Box Model … ▪ By default the width of a box only defines the width of the content ▪ padding and border are added to that width ▪ Behaviour can be changed via the box-sizing property ▪ content-box (default) or border-box ▪ width in border-box "mode" includes padding and border width * { box-sizing: border-box; /* use border-box for the whole page */ }
  17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

    October 23, 2020 Box Model … ▪ Boxes can be either block-level boxes or inline boxes ▪ block-level boxes start on a new line - main building blocks of any layout - e.g. <p>, <h1>, <ul> or <li> ▪ inline boxes flow between surrounding text - e.g. <b>, <i> or <img> ▪ Block-level boxes (elements) can be grouped ▪ e.g. number of elements grouped via <div> in a containing or parent element ▪ Behaviour can be changed via display property li { display: inline; /* no longer treated as block-level element */ margin-right: 5px; /* list items shown next to each other with space */ }
  18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

    October 23, 2020 Measurements ▪ Absolute or relative units of measurements can be used ▪ Absolute units ▪ px: pixels are not necessary consistent across devices - 1px implies multiple device pixels for high-resolution screens ▪ cm, mm and in: one centimetre is 37.8 pixels, a millimetre is 3.78 pixels and an inch is 96 pixels ▪ pt: a point is equal to 1/72 of an inch (common in print design) ▪ Relative units ▪ %: percentage measured against the content ▪ em: ems are relative to the font size of the element ▪ rem: rems are relative to the font size of the root element (<html>)
  19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

    October 23, 2020 Layout ▪ Elements (boxes) can be positioned via the position property ▪ static (default), relative, absolute or fixed position ▪ In normal flow (static) each block-level element starts on a new line p { position: static; /* optional since it is the default anyway */ width: 400px; }
  20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

    October 23, 2020 Layout … ▪ Relative positioning moves the element in relation to where it would have been shown ▪ Absolute position takes box out of the normal flow ▪ relative to parent (containing) element p.test { position: relative; width: 400px; left: 100px; /* move 100 pixels to the right */ top: 20px; /* move 20 pixels down */ } p.test { position: absolute; width: 200px; left: 300px; /* position the element 300 pixels from the left */ top: 0px; /* position element at the top (of the containing element) */ }
  21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

    October 23, 2020 Layout … ▪ Fixed positioning renders an element relative to the browser window ▪ scrolling no longer changes the position ▪ Boxes with a relative, absolute or fixed position might overlap ▪ z-index property can be used to control the ordering (higher values are closer to the front) p.test { position: fixed; width: 400px; right: 0px; top: 0px; /* positions the paragraph at the top right corner */ }
  22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

    October 23, 2020 Floats ▪ Elements can also be positioned via the float property ▪ succeeding elements will flow around the element ▪ floating can be stopped via the clear property ▪ Flexbox (Flexible Box Layout Module) is a more recent alternative for flexible layouts in CSS3 <p>...</p> <img class="floatLeft" src="logo.jpg" alt="logo"> <p>...</p> <h2 class="clearLeft">History</h2> .floatLeft { float: left; } .clearLeft { clear: left; }
  23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

    October 23, 2020 Responsive Web Design (RWD) ▪ Websites originally designed with a fixed size to fit common desktop and laptop screen sizes ▪ e.g. 960-pixel-wide layout ▪ Around 2007 mobile phones able to render standard HTML pages ▪ dedicated mobile version of website (e.g. 320-pixel-wide) - redirection to m-dot websites
  24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

    October 23, 2020 Responsive Web Design (RWD) … ▪ Problem of maintainability as more versions added ▪ different phone display sizes and new devices (e.g. iPad) ▪ Design websites that can easily be viewed on devices with various screen sizes ▪ Only one version of the website (one HTML structure) ▪ design rearranges itself to perfectly fit the screen size - e.g. single column on mobile device and multiple columns on wider desktop screens ▪ use different CSS styles based on media queries ▪ only since CSS3 it is possible to query features such as the screen width and height or the colour capabilities ▪ flexibility via relative horizontal measurements (e.g. percentage) ▪ should automatically look decent on future devices
  25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

    October 23, 2020 Content Strategy ▪ Think about the content before thinking about the design of a website ▪ address user needs ▪ Most important information should be at the top of a page ▪ Divide content into chunks that can be rearranged on a page ▪ All users (regardless of the device) should have access to all the content of a website
  26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

    October 23, 2020 The Viewport ▪ Viewport defines the visible area of a web page ▪ without scrollbars, browser borders etc. ▪ HTML5 introduced a new method to control the viewport via a meta tag ▪ Avoid large fixed width for elements ▪ elements (e.g. images) that are wider than the viewport might lead to horizontal scrollbars (poor user experience) ▪ Do not rely on a particular viewport width for a page to render well <meta name="viewport" content="width=device-width, initial-scale=1.0">
  27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

    October 23, 2020 Media Queries ▪ CSS2 allowed media queries for media types ▪ e.g. screen or print ▪ CSS3 allows media queries to apply different declaration blocks based on device properties (e.g. viewport width) ▪ e.g. typically change the number of columns, navigation, font size or image size body { font-size: 12px; background-color: red; } @media only screen and (min-width: 40em) { body { background-color: green; } }
  28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

    October 23, 2020 Media Queries ▪ Device properties that can be queried via CSS3 ▪ viewport width (width) and height (height) ▪ screen width (device-width) and height (device-height) ▪ orientation (orientation) which can be landscape or portrait ▪ aspect ratio (aspect-ratio or device-aspect-ratio) - e.g. 16:9 or 4:3 ▪ resolution (resolution) of the device screen - e.g. 300 dpi ▪ does the device support colour (color) ▪ …
  29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

    October 23, 2020 Breakpoints ▪ Breakpoint is the point where we use a media query to change the design ▪ e.g. change the number of columns or font size ▪ Design range is the range between two breakpoints ▪ design should look good anywhere within a design range
  30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

    October 23, 2020 Designing Responsive Solutions ▪ Mobile-first approach ▪ start with the basic design (default design) for the narrowest design range and devices that might not support media queries ▪ Progressive enhancement via different layers ensures that page is also accessible without CSS and JavaScript 1. HTML 2. CSS (with potential media queries) 3. JavaScript ▪ Responsive design is often based on grids ▪ 12-column grid is very common ▪ columns can be grouped
  31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

    October 23, 2020 Multi-Column Layout ▪ Compute the percentage for each column and the space between the columns ▪ e.g. 4-column layout with 21% for each column, 2% between the columns and 5% for the left and right border 5% 5% 21% 21% 21% 21% 2% 2% 2% <article> <aside> <footer>
  32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

    October 23, 2020 Multi-Column Layout … ▪ Example of a breakpoint between a single column layout and 2-column layout @media only screen and (min-width: 40em) { article { width: 67%; float: left; margin-right: 0; } aside { width: 21%; float: right; margin-left: 0; } footer { clear: both; } }
  33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

    October 23, 2020 Images ▪ Scaling of images can be controlled ▪ e.g. via max-width property ▪ Offer different sizes of an image ▪ e.g. via the HTML5 picture element img { max-width: 100%; /* do not scale up images */ height: auto; } <picture> <source srcset="smallfBird.jpg" media="(max-width: 300px)"> <source srcset="bird.jpg"> <img src="bird.jpg" alt="Bird"> /* fallback */ </picture>
  34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

    October 23, 2020 RWD Frameworks ▪ Bootstrap ▪ mobile-first design philosophy ▪ provides a set of CSS style sheets for the formatting of key HTML components ▪ additional reusable components (e.g. advanced buttons) ▪ JavaScript components (e.g. UI elements) ▪ Skeleton ▪ …
  35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

    October 23, 2020 Use Case: MindXpres ▪ MindXpres presentations are currently represented in an XML document format ▪ Compiler (node.js application) translates XML to HTML ▪ Presentation engine based on HTML5 and related APIs ▪ e.g. WebSockets for connectivity
  36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

    October 23, 2020 Exercise 5 ▪ CSS3 ▪ get some hands-on experience with CSS3
  37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

    October 23, 2020 References ▪ Learning Responsive Web Design: A Beginner's Guide, Clarissa Peterson, O'Reilly Media (1st edition), June 2014 ISBN-13: 978-1449362942 ▪ HTML and CSS: Design and Build Websites, Jon Duckett, Wiley (1st edition), November 2011 ISBN-13: 978-1118008188
  38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

    October 23, 2020 References … ▪ Cascading Style Sheets (CSS) Snapshot 2018, W3C Working Group Note ▪ https://www.w3.org/TR/CSS/ ▪ Molly E. Holzschlag, Core CSS (Part I, II & III) (refcardz #19, #25 and #34) ▪ https://dzone.com/refcardz/corecss-part1 ▪ https://dzone.com/refcardz/corecss2 ▪ https://dzone.com/refcardz/corecss3 ▪ CSS Tutorial ▪ https://www.w3schools.com/css/
  39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

    October 23, 2020 References ... ▪ MDN CSS Reference ▪ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference ▪ Bootstrap ▪ https://getbootstrap.com ▪ R. Roels and B. Signer, MindXpres: An Extensible Content-driven Cross-Media Presentation Platform, Proceedings of WISE 2014, 15th International Conference on Web Information System Engineering, Thessaloniki, Greece, October, 2014 ▪ https://beatsigner.com/publications/roels_WISE2014.pdf
  40. 2 December 2005 Next Lecture JavaScript and jQuery