Scribd
Upload
72 views

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

The document discusses CSS and responsive web design. It covers CSS versions and modules, CSS syntax including selectors, properties, and rule order. It also discusses inheritance, separation of content from presentation, and media-specific style sheets.

Uploaded by

Beat Signer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

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

The document discusses CSS and responsive web design. It covers CSS versions and modules, CSS syntax including selectors, properties, and rule order. It also discusses inheritance, separation of content from presentation, and media-specific style sheets.

Uploaded by

Beat Signer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

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
▪ ...
October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3
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

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


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

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


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

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


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

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


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19


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

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


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)

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


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24
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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29


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

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


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>

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


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

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


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>

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


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

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35
Exercise 5
▪ CSS3
▪ get some hands-on experience with CSS3

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


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 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37


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/

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


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
October 29, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39
Next Lecture
JavaScript and jQuery

2 December 2005

You might also like