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

    View full-size slide

  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


    ...




    ...


    View full-size slide

  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
    ▪ ...

    View full-size slide

  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

    View full-size slide

  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;
    }

    View full-size slide

  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 */

    View full-size slide

  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 { ... }

    View full-size slide

  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 { ... }

    View full-size slide

  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 */

    View full-size slide

  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 */
    }

    View full-size slide

  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
    Urgent Tasks

    View full-size slide

  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 section
    ▪ e.g. used in HTML-encoded emails


    ...
    <br/>h1 {color: red; font-size: 10px;}<br/>p {color: blue;}<br/>...<br/>


    ...


    View full-size slide

  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


    ...



    ...


    View full-size slide

  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
    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

    View full-size slide

  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;
    }

    View full-size slide

  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 */
    }

    View full-size slide

  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. , , or
    ▪ inline boxes flow between surrounding text
    - e.g. , or
    ▪ Block-level boxes (elements) can be grouped
    ▪ e.g. number of elements grouped via 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 */
    }

    View full-size slide

  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 ()

    View full-size slide

  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;
    }

    View full-size slide

  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) */
    }

    View full-size slide

  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 */
    }

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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; }
    }

    View full-size slide

  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)
    ▪ …

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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;
    }
    }

    View full-size slide

  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;
    }



    /* fallback */

    View full-size slide

  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
    ▪ …

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  46. 2 December 2005
    Next Lecture
    JavaScript

    View full-size slide