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

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

Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 27, 2017
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 ref="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>

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 positoning of elements
 media types
 CSS3 divided into separate modules (documents)
 2D & 3D transforms
 transitions
 Flexbox
 media queries
 ...

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

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

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

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

Selectors …
 Attribute selector
 elements with a given attribute value
 Pseudo element selectors
 treated like extra elements
 Pseudo class selector
 act 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:visited { ... }
a:hover { ... }

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

Inheritance
 Some properties such a 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 */
}

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>

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>

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>

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 stylesheet can import other stylesheets via @import

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

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

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

Box Model …
 CSS3 further introduces a new Flexbox layout mode
 new flex and inline-flex values for the display property

Measurements
 Absolute or relative units of measurements can be used
 Absolute units
 px: pixels are not necessary consistent across devices
 cm, mm and in: one centimeter is 37.8 pixels, a milimeter 3.78
pixels and an inch 96 pixels (also not consistent across devices)
 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 document

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

Layout …
 Relative positioning moves the element in relation to
where it would have been shown
 Absolute position takes box out of the normal flow
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) */
}

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

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
<p>...</p>
<img class="floatLeft" src="logo.jpg" alt="logo">
<p>...</p>
<h2 class="clearLeft">History</h2>
.floatLeft { float: left; }
.clearLeft { clear: left; }

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

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

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

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

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

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

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

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

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>

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

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>

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

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

Exercise 5
 CSS3
 get some hands-on experience with CSS3

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

References …
 Cascading Style Sheets (CSS) Snapshot 2010,
W3C Working Group Note
 http://www.w3.org/TR/CSS/
 Molly E. Holzschlag, Core CSS (Part I, II & III)
(refcardz #19, #25 and #34)
 http://refcardz.dzone.com/refcardz/corecss-part1
 http://refcardz.dzone.com/refcardz/corecss2
 http://refcardz.dzone.com/refcardz/corecss3
 CSS Tutorial
 http://www.w3schools.com/css/

References ...
 MDN CSS Reference
 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
 Webplatform.orgl
 http://docs.webplatform.org/wiki/css
 Bootstrap
 http://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
 http://beatsigner.com/publications/roels_WISE2014.pdf

2 December 2005
Next Lecture
JavaScript and jQuery

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

More Related Content

Similar to CSS3 and Responsive Web Design - Web Technologies (1019888BNR)

More from Beat Signer

Recently uploaded

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