CSS3 and Responsive Web Design Web Techn

Web Technologies
CSS3 and Responsive Web Design
Prof. Beat Signer
Department of Computer Science

Vrije Universiteit Brussel
beatsigner.com
2 December 2005
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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

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
▪ ...
CSS Versions
W3C Recommendation
Name
Color Selectors
spaces
L3 L3
W3C Candidate Recommendation MathML Media
Queries
Working Draft Generated

Style
Content Visual Attributes
Box Effects Generated
Model Content
Paged
Media Back-
Media grounds
Types Tables
Borders
Font Color
Transforms Paged
Properties + Back- Multi-
Selectors Media
ground Column
Transitions
CSS Text
Cascade Syntax Speech
Properties
Ruby
Pseudo Box Syntax
Classes Properties L3
Grid
Layout Flexible
Layout
Web
Animations Basic
Selectors UI
Masking
L4
based on https://en.wikipedia.org/wiki/Cascading_Style_Sheets

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
selector {
property1: value1;
property2: value2;
}
▪ Example
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
p { ... }
h1, h2, h3 { ... } /* also called grouping selector */
▪ ID selector
▪ element with a specific value for the id attribute
#intro { ... } /* always more weight than class selector */

Selectors …
▪ Class selector
▪ elements with the given class attribute value (elements can have
more than one class)
.main { ... } /* any element with a 'main' class value */
h1.main { ... } /* only h1 elements with a 'main' class value */
▪ Child selector
▪ elements that are direct children of other elements
p>a { ... }
▪ Descendant selector
▪ elements that are descendants of other elements
p a { ... }

Selectors …
▪ Attribute selector
▪ elements with a given attribute value
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' */
▪ Pseudo element selectors

▪ treated like extra elements
h1.main::first-letter { ... }
▪ Pseudo class selector

▪ acts like additional values for a class attribute
a:link { ... }
a:hover { ... }
a:active { ... }
a:visited { ... }

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

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 style sheet can import other style sheets 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
border div {
padding width: 300px; /* only content area */
padding: 10px;
content 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 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 */
}

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

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
p.test {
position: relative;
width: 400px;
left: 100px; /* move 100 pixels to the right */
top: 20px; /* move 20 pixels down */
}
▪ Absolute position takes box out of the normal flow

▪ relative to parent (containing) element
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
p.test {
position: fixed;
width: 400px;
right: 0px;
top: 0px; /* positions the paragraph at the top right corner */
}
▪ 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)

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; }
▪ Flexbox (Flexible Box Layout Module) is a more recent

alternative for flexible layouts in CSS3

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
<meta name="viewport" content="width=device-width, initial-scale=1.0">
▪ 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

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% 21% 2% 21% 2% 21% 2% 21% 5%
<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
img {
max-width: 100%; /* do not scale up images */
height: auto;
}
▪ Offer different sizes of an image

▪ e.g. via the HTML5 picture element
<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)
▪ W3.CSS
▪ modern CSS framework
▪ responsive mobile first approach
▪ smaller and faster that other CSS frameworks
▪ …

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 2020,
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/

References ...
▪ MDN CSS Reference
▪ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
▪ Bootstrap
▪ https://getbootstrap.com
▪ W3.CSS
▪ 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
Next Lecture
JavaScript and jQuery
2 December 2005

CSS3 and Responsive Web Design Web Techn

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS3 and Responsive Web Design Web Techn

Uploaded by

Copyright:

Available Formats

Web Technologies

CSS3 and Responsive Web Design

Prof. Beat Signer

Department of Computer Science

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

Working Draft Generated

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

▪ Pseudo element selectors

▪ Pseudo class selector

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

p b { color: pink; } /* more specific than p selector */

p { color: green; } /* last rule for p selector */

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

▪ Block-level boxes (elements) can be grouped

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

▪ Absolute position takes box out of the normal flow

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

▪ Boxes with a relative, absolute or fixed position

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

.floatLeft { float: left; }

▪ Flexbox (Flexible Box Layout Module) is a more recent

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

▪ Avoid large fixed width for elements

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

@media only screen and (min-width: 40em) {

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

5% 21% 2% 21% 2% 21% 2% 21% 5%

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

▪ Offer different sizes of an image

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

▪ Molly E. Holzschlag, Core CSS (Part I, II & III)

October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

▪ R. Roels and B. Signer, MindXpres: An Extensible

You might also like