Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Beat Signer

October 23, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

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 - [email protected] 2

    October 24, 2023 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 - [email protected] 3

    October 24, 2023 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 ▪ flexible box layout (Flexbox) ▪ media queries ▪ ...
  4. Beat Signer - Department of Computer Science - [email protected] 4

    October 24, 2023 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 CSS1 CSS2.1 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 - [email protected] 5

    October 24, 2023 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 - [email protected] 6

    October 24, 2023 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 - [email protected] 7

    October 24, 2023 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 - [email protected] 8

    October 24, 2023 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 - [email protected] 9

    October 24, 2023 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 - [email protected] 10

    October 24, 2023 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 - [email protected] 11

    October 24, 2023 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 - [email protected] 12

    October 24, 2023 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 - [email protected] 13

    October 24, 2023 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 - [email protected] 14

    October 24, 2023 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 - [email protected] 15

    October 24, 2023 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 - [email protected] 16

    October 24, 2023 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 - [email protected] 17

    October 24, 2023 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 - [email protected] 18

    October 24, 2023 Measurements ▪ Absolute or relative units of measurements can be used ▪ Absolute units ▪ px: pixels are not necessarily 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 - [email protected] 19

    October 24, 2023 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 - [email protected] 20

    October 24, 2023 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 - [email protected] 21

    October 24, 2023 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 - [email protected] 22

    October 24, 2023 Flexbox Layout ▪ Flexbox layout module introduced in CSS3 ▪ makes it easier to define flexible responsive layout structures ▪ Enables the layouting of flex items (child elements) in a flex container (parent element) ▪ includes different properties to be set on flex items as well as flex containers https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  23. Beat Signer - Department of Computer Science - [email protected] 23

    October 24, 2023 Flex Container ▪ A flex container becomes flexible by setting the display property to flex ▪ Other flex container properties ▪ flex-direction - row | row-reverse | column | column-reverse ▪ flex-wrap - nowrap | wrap | wrap-reverse ▪ flex-flow - shorthand for flex-direction and flex-wrap, e.g. column wrap ▪ justify-content ▪ align-items ▪ align-content ▪ gap, row-gap, column-gap
  24. Beat Signer - Department of Computer Science - [email protected] 24

    October 24, 2023 Flex Container … flex-direction flex-wrap justify-content https://css-tricks.com/snippets/css/a-guide-to-flexbox/ align-items
  25. Beat Signer - Department of Computer Science - [email protected] 25

    October 24, 2023 Flex Container … https://css-tricks.com/snippets/css/a-guide-to-flexbox/ align-content gap, row-gap, column-gap
  26. Beat Signer - Department of Computer Science - [email protected] 26

    October 24, 2023 Flex Items ▪ Flex item properties ▪ order ▪ flex-grow ▪ flex-shrink ▪ flex-basis ▪ flex - shorthand for flex-grow, flex-shrink and flex-basis, e.g. flex: 5; ▪ align-self - individual override of flex container’s align-items property
  27. Beat Signer - Department of Computer Science - [email protected] 27

    October 24, 2023 Flex Items … order flex-grow align-self
  28. Beat Signer - Department of Computer Science - [email protected] 28

    October 24, 2023 CSS Grid Layout ▪ More recently, there is also the two-dimensional grid- based layout system ▪ based on the concept of a grid container (display: grid) and grid items
  29. Beat Signer - Department of Computer Science - [email protected] 29

    October 24, 2023 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
  30. Beat Signer - Department of Computer Science - [email protected] 30

    October 24, 2023 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
  31. Beat Signer - Department of Computer Science - [email protected] 31

    October 24, 2023 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
  32. Beat Signer - Department of Computer Science - [email protected] 32

    October 24, 2023 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">
  33. Beat Signer - Department of Computer Science - [email protected] 33

    October 24, 2023 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; } }
  34. Beat Signer - Department of Computer Science - [email protected] 34

    October 24, 2023 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) ▪ …
  35. Beat Signer - Department of Computer Science - [email protected] 35

    October 24, 2023 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
  36. Beat Signer - Department of Computer Science - [email protected] 36

    October 24, 2023 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
  37. Beat Signer - Department of Computer Science - [email protected] 37

    October 24, 2023 Multi-Column Layout ▪ Example of a breakpoint between a single-column and multi-column layout .flex-container { display: flex; flex-direction: column; } /* responsive layout switches to two-column layout */ @media (min-width: 800px) { .flex-container { flex-direction: row; } }
  38. Beat Signer - Department of Computer Science - [email protected] 38

    October 24, 2023 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>
  39. Beat Signer - Department of Computer Science - [email protected] 39

    October 24, 2023 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) ▪ W3.CSS ▪ modern CSS framework ▪ responsive mobile first approach ▪ smaller and faster that other CSS frameworks ▪ …
  40. Beat Signer - Department of Computer Science - [email protected] 40

    October 24, 2023 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
  41. Beat Signer - Department of Computer Science - [email protected] 41

    October 24, 2023 Exercise 5 ▪ CSS3 ▪ get some hands-on experience with CSS3
  42. Beat Signer - Department of Computer Science - [email protected] 42

    October 24, 2023 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
  43. Beat Signer - Department of Computer Science - [email protected] 43

    October 24, 2023 References … ▪ Cascading Style Sheets (CSS) Snapshot 2023, W3C Group Draft 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/
  44. Beat Signer - Department of Computer Science - [email protected] 44

    October 24, 2023 References ... ▪ A Complete Guide to Flexbox, Chris Coyier ▪ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ▪ Flexbox Froggy ▪ https://flexboxfroggy.com ▪ A Complete Guide to CSS Grid ▪ https://css-tricks.com/snippets/css/complete-guide-grid/ ▪ MDN CSS Reference ▪ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference ▪ Bootstrap ▪ https://getbootstrap.com
  45. Beat Signer - Department of Computer Science - [email protected] 45

    October 24, 2023 References ... ▪ W3.CSS Tutorial ▪ https://www.w3schools.com/w3css/ ▪ 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