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

2 December 2005 Web Technologies CSS3 and Responsive Web Design
Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2
October 22, 2024 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>

October 22, 2024 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 ▪ ...

October 22, 2024 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

October 22, 2024 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; }

October 22, 2024 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 */

October 22, 2024 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 { ... }

October 22, 2024 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 { ... }

October 22, 2024 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 */

October 22, 2024 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 */ }

October 22, 2024 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>

October 22, 2024 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>

October 22, 2024 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>

October 22, 2024 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

October 22, 2024 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; }

October 22, 2024 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 */ }

October 22, 2024 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 */ }

October 22, 2024 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>)

October 22, 2024 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; }

October 22, 2024 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) */ }

October 22, 2024 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 */ }

October 22, 2024 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/

October 22, 2024 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

October 22, 2024 Flex Container … flex-direction flex-wrap justify-content https://css-tricks.com/snippets/css/a-guide-to-flexbox/ align-items

October 22, 2024 Flex Container … https://css-tricks.com/snippets/css/a-guide-to-flexbox/ align-content gap, row-gap, column-gap

October 22, 2024 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

October 22, 2024 Flex Items … order flex-grow align-self

October 22, 2024 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

October 22, 2024 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

October 22, 2024 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

October 22, 2024 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

October 22, 2024 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">

October 22, 2024 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; } }

October 22, 2024 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) ▪ …

October 22, 2024 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

October 22, 2024 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

October 22, 2024 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 multi-column layout */ @media (min-width: 800px) { .flex-container { flex-direction: row; } }

October 22, 2024 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>

October 22, 2024 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 than other CSS frameworks ▪ …

October 22, 2024 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

October 22, 2024 Exercise 5 ▪ CSS3 ▪ get some hands-on experience with CSS3

October 22, 2024 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

October 22, 2024 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/

October 22, 2024 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

October 22, 2024 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

2 December 2005 Next Lecture JavaScript

CSS3 and Responsive Web Design - Lecture 5 - We...

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

More Decks by Beat Signer

Other Decks in Education

Featured

Transcript