COMP519 Web Programming
Lecture 8: Cascading Style Sheets: Part 4
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
Layout Via Divisions
Layout Via Divisions: Overview
•
For a long time, web page layout was based on the extensive use of
div elements
•
A web page would typically consist of roughly a handful of div elements
as follows:
<div id =" h eader "> ... </ div >
<div id =" nav " > ... </ div >
<div id =" main " >
<div id =" cont ent "> ... </ div >
<div id =" ads " > ... </ div >
</div >
<div id =" f ooter "> ... </ div >
possibly with additional div elements inside each of those
•
Layout is then a matter of arranging those div elements
•
Decisions on layout are a matter of design, not of technical possibility
; there is typically not one right answer
; this is not a topic for this module (web programming vs web design)
COMP519 Web Programming Lecture 8 Slide L8 – 2
Layout Via Divisions Relevant Properties
Divisions and Properties (1)
•
By default, a div element takes up the whole width of a browser
window and there is a line break before and after it
; Changes almost always need to be made to achieve
the desired layout
•
CSS properties that we can use to make those changes include
Property Explanation / Example values
width Width of an element
1000px
90% 90% of the width of the containing element
height Height of an element
200px
10% 10% of the height of the containing element
margin All four margins of an element
auto centre horizontally within containing element
COMP519 Web Programming Lecture 8 Slide L8 – 3
Layout Via Divisions Relevant Properties
Divisions and Properties (1)
•
By default, a div element takes up the whole width of a browser
window and there is a line break before and after it
; Changes almost always need to be made to achieve
the desired layout
•
CSS properties that we can use to make those changes include
Property Explanation / Example values
float Whether and in which direction an element should float
left element floats to the left of its container
right element floats to the right of its container
clear Whether and how an element must be (cleared)
below floating elemnts
left element moves down to clear past left floats
right element moves down to clear past right floats
both element moves down to clear past all floats
COMP519 Web Programming Lecture 8 Slide L8 – 4
Layout Via Divisions Relevant Properties
Layout Via Divisions: Example (1)
A common layout of the top-level
div elements is the following
with the width of header, nav,
main, footer fixed to a value
between 900px and 1000px
<body >
<div id =" h eader ">
he ader
</div >
<div id =" nav " >
nav
</div >
<div id =" main " >
<div id =" cont ent ">
co ntent
</div >
<div id =" ads " >
ads
</div >
</div >
<div id =" f ooter ">
fo oter
</div >
</body >
COMP519 Web Programming Lecture 8 Slide L8 – 5
Layout Via Divisions Relevant Properties
Layout Via Divisions: Example (1)
A common layout of the top-level
div elements is the following
with the width of header, nav,
main, footer fixed to a value
between 900px and 1000px
# h eader { width : 1000 px ;
he ight : 100 px ;
backgr ou nd - co lo r : b lue ;
ma rgin : auto ; }
# nav { wi dt h : 1000 px ;
he ight : 50 px ;
backgr ou nd - co lo r : green ;
ma rgin : auto ; }
# main { width : 1000 px ;
ma rgin : auto ; }
# c onten t { width : 800 px ;
he ight : 400 px ;
backgr ou nd - co lor : yellow ;
float : left ; }
# ads { wi dt h : 200 px ;
he ight : 400 px ;
backgr ou nd - co lo r : orange ;
float : r ig ht ; }
# f ooter { width : 1000 px ;
he ight : 50 px ;
clear : both ; margi n : aut o ;
backgr ou nd - co lo r : b lue ;}
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/layout1.html
COMP519 Web Programming Lecture 8 Slide L8 – 6
Layout Via Divisions Relevant Properties
Layout Via HTML5 Elements
•
In the example, we assigned unique a id to each div element and
associated a style directive with each of those ids
•
Alternatively, we could have assigned a unique class to each div
element and associated a style directive with each of those classes
•
In HTML5, we would use the appropriate elements
like header, nav, etc instead of div elements
•
We would then associate a style directive with each
of those elements
he ader { width : 1000 px ;
he ight : 100 px ;
backgr ou nd - co lor : blue ;
ma rgin : auto ; }
nav { width : 1000 px;
he ight : 50 px ;
backgr ou nd - co lor : green ;
ma rgin : auto ; }
<body >
< article >
<header >
</ header >
<nav >
</nav >
< section >
</ section >
<aside >
</ aside >
<footer >
</ footer >
</ article >
</body >
COMP519 Web Programming Lecture 8 Slide L8 – 7
Layout Via Divisions Relevant Properties
Fixed Positioning (1)
•
So far, we have positioned elements relative to each other
•
This means the arrangements of elements as a whole can move and can
move out of view if the user scrolls up or down in a browser window
•
CSS properties that we can use to change that include
Property Explanation / Example values
position Specifies how an element is positioned in a document
fixed The element is removed from the
normal document flow;
no space is created for the element in the
page layout;
it is positioned relative to the screen’s
viewport using properties top, bottom left ,
right and does not move when scrolled
COMP519 Web Programming Lecture 8 Slide L8 – 8
Layout Via Divisions Relevant Properties
Fixed Positioning (2)
•
CSS properties required for position include
Property Explanation / Example values
top When position is set to absolute or fixed, specifies
the distance between the element’s top edge and the top
edge of its containing block
10px 10px off top edge
bottom Analogous to top for the element’s bottom edge and the
bottom edge of its containing block
20% 20% of the width of the containing block
left Analogous to top for the element’s left edge and the left
edge of its containing block
auto
right Analogous to right for the element’s left edge and the
left edge of its containing block
inherit inherit from parent element
COMP519 Web Programming Lecture 8 Slide L8 – 9
Layout Via Divisions Relevant Properties
Fixed Positioning: Example
We want to achieve the same lay-
out as before but with header, nav
and footer fixed in position
Wo do so with slightly different
approaches used in the style direc-
tives for each of these three ele-
ments
he ader { width : 1000 px ;
he ight : 100 px ;
backgr ou nd - co lo r : blue ;
po sit ion : fixed ;
top: 0 px ;
left : 50%;
margin - left : -500 px ; }
nav { width : 1000 px ;
he ight : 50 px;
backgr ou nd - co lo r : green ;
po sit ion : fixed ;
top: 100 px ;
left : 0 px ;
right : 0 px;
ma rgin : au to ; }
ar ticle { width : 1000 px ;
padding - top: 142 px ;
ma rgin : 0 auto ; }
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/layout2.html
COMP519 Web Programming Lecture 8 Slide L8 – 10
Layout Via Divisions Relevant Properties
Fixed Positioning: Example
We want to achieve the same lay-
out as before but with header, nav
and footer fixed in position
Wo do so with slightly different
approaches used in the style direc-
tives for each of these three ele-
ments
se ction { width : 800 px ;
he ight : 1000 px ;
backgr ou nd - co lo r : yellow ;
float : left ;
}
aside { width : 200 px;
he ight : 1000 px ;
backgr ou nd - co lo r : orange ;
float : right ;
}
fo oter { width : 1000 px ;
he ight : 50 px;
backgr ou nd - co lo r : blue ;
po sit ion : fixed ;
bo ttom : 0 px ;
left : 50%;
trans for m : trans lat e ( -50% ,0%);
}
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/layout2.html
COMP519 Web Programming Lecture 8 Slide L8 – 11
Layout Via Divisions Relevant Properties
Adaptive Design Revisited
•
One fixed, rigid layout is unlikely to be suitable for every medium that a
user might use to access an HTML document
•
We have seen that the media-attribute of the link element allows us to
select which external style sheets to use for which medium, e.g.
< link rel =" s tyl esh eet " type =" text / css " media =" s creen "
href =" bro wser . css ">
< link rel =" s tyl esh eet " type =" text / css " media =" print "
href =" print . css ">
•
However, if the style directives in the these different style sheets are
largely identical, this is not an optimal approach
; the same style directives exist in several files,
changes are error prone
•
HTML5 provides three meachanisms to better deal with such a situation
•
Import rules
•
Media rules
•
Support rules
COMP519 Web Programming Lecture 8 Slide L8 – 12
Layout Via Divisions Relevant Properties
Importing CSS style files
•
The @import CSS at-rule is used to import style directives
from other style sheets
@import url ;
@import url li s t- of - me di a -q uer ie s ;
Examples:
@i mport url (" http :// cgi . csc . liv . ac .uk / styl es / common . css ");
@i mport " s cre en-s pec ifi c . css " s creen ;
@i mport ’ p rin t-s peci fic . css ’ print ;
•
These rules must precede all other types of rules and directives
except @charset rules
•
A @charset CSS at-rule specifies the character encoding
used in a style sheet, for example:
@c har set " ut f- 8 ";
•
The default character encoding is UTF-8
•
Useful / used when attributes like content are given values involving
non-ASCII characters
COMP519 Web Programming Lecture 8 Slide L8 – 13
Layout Via Divisions Relevant Properties
Media Rules and Media Queries
•
Within a style sheet, @media at-rules can used to conditionally apply
styles to a document depending on the result of media queries
@media li s t- of - me di a -q ue r ie s { gr ou p-r ul e- bo dy }
where group-rule-body is either another @media at-rule,
@supports at-rule, or list of style directives
Examples:
@m edia p ri nt {
body { fo nt-size : 10 pt ; }
}
@m edia s creen and ( res olu tio n > 150 dpi ) {
body { fo nt-size : 13 px ; }
}
•
The language for media queries is an extension of the one we have seen
for the media attribute
COMP519 Web Programming Lecture 8 Slide L8 – 14
Layout Via Divisions Relevant Properties
Feature Queries
•
Within a style sheet, @support at-rules can be used to conditionall
apply styles to a document depending on the result of feature queries
@supports fe at ur e- query { gro up -r ul e- bod y }
•
A feature query is basically a boolean combination (using and, or, not)
of property:value pairs
•
For each property:value it will be evaluated whether the browser
used to process the style sheet supports this specific CSS feature
and then works out the truth value for the feature query overall
Examples:
@supp ort s ( di splay : flex ) {
div { d isplay : flex ; }
}
@supp ort s not ( d isplay : flex ) {
div { float : left ; }
}
COMP519 Web Programming Lecture 8 Slide L8 – 15
CSS Grid Layout Overview
CSS Grid Layout
•
CSS Grid Layout is a two-dimensional grid-based layout system
•
Such layout systems are motivated by the observation that most
web layouts can be seen as grids where elements are placed on one or
more grid cells
•
Height and width of grid columns and grid rows will in general vary
Sample page layout Underlying grid and
allocation of elements to grid cells
col 1 col 2 col 3 col 4
row 1 header
row 2 nav
row 3 content ads
row 4 footer
COMP519 Web Programming Lecture 8 Slide L8 – 16
CSS Grid Layout Defining a Grid Layout
Defining a Grid Layout
CSS properties of Grid include
•
display: grid
defines an element as grid container
•
grid-template-columns: track-size |
[col-name] track-size ...
specifies the size and names of columns
•
grid-template-rows: track-size |
[row-name] track-size ...
specifies the size and names of rows
•
track-size can be auto, a length, a percentage, or a fraction of the
free space
These properties allow to specify a grid, including the size of each column
and each row
COMP519 Web Programming Lecture 8 Slide L8 – 17
CSS Grid Layout Placing Elements on a Grid
Placing Elements on a Grid
One way to place an element on the grid is to specify
– in which column/row it starts (top, left corner) and
– in which column/row it ends (bottom, right corner)
using the following properties
•
grid-column-start: cell
•
grid-column-end: cell
•
grid-row-start: cell
•
grid-row-end: cell
•
cell can take the following values:
number column number / row number
name name of a column / row
span number number of tracks covered
span name span until name is reached
auto automatic
COMP519 Web Programming Lecture 8 Slide L8 – 18
CSS Grid Layout Placing Elements on a Grid
Placing Elements on a Grid
An alternative way to place elements on the grid is to assign grid names to
the elements and to use a grid template that references those names:
•
grid-area: area-name
assign a grid area name to an element
•
grid-template-areas: "area-name | . | none | ..."
"..."
associates grid area names with grid cells
This is only a glimpse of the possibilities of the CSS Grid Layout System
COMP519 Web Programming Lecture 8 Slide L8 – 19
CSS Grid Layout Example
CSS Grid Layout: Example
We want to replicate the same
layout as before:
<body >
< article >
<header > </ header >
<nav > </ nav >
< section > </ section >
<aside > </ aside >
<footer > </ footer >
</ article >
</body >
ar ticle { d ispla y : grid ;
grid - template - rows : 100 px 50 px auto 50 px ;
grid - template - colu mns : auto 800 px 200 px auto ;
grid - template - a re as : ". heade r heade r ."
". nav nav ."
". c onten t ads ."
". f oo ter foo ter .";
}
he ader { grid - area : header ; b ac kg ro un d - co lo r : blue ; }
nav { grid - a rea : nav ; background -color : green ; }
se ction { grid - area : conten t ; background - c ol or : yello w ; }
aside { grid - area : ads; background - color : ora nge ; }
fo oter { grid - area : footer ; b ac kg ro un d - co lo r : blue ; }
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/layout3.html
COMP519 Web Programming Lecture 8 Slide L8 – 20
CSS Flexbox Layout Overview
CSS Flexbox Layout
•
CSS Flexbox Layout is a simpler layout system, typically used for parts
of a web page, not the whole page
•
Flexbox distinguishes between flex containers and flex items within
those containers
•
Unlike Grid, Flexbox distinguishes between a primary main axis
and a secondary cross axis
•
The main axis is not necessarily horizontal, its direction is determined
by flex-direction
COMP519 Web Programming Lecture 8 Slide L8 – 21
CSS Flexbox Layout Defining a Flexbox Layout
Defining a Flexbox Layout
CSS properties of Flexbox include
•
display: flex
defines an element as a flexbox container
•
flex-direction: row | row-reverse |
column | column-reverse
defines the direction of the main axis,
for example, with row the direction is left to right (horizontally)
•
flex-wrap: nowrap | wrap | wrap-reverse
whether and how flex items wrap when the main axis is ‘full’,
for example, with wrap-reverse, flex items will wrap onto multiple
‘lines’ from bottom to top along the cross axis
•
flex-flow: direction-option || wrap-option
combines flex-direction and flex-wrap
COMP519 Web Programming Lecture 8 Slide L8 – 22
CSS Flexbox Layout Defining a Flexbox Layout
Flexbox Layout Properties
CSS properties of Flexbox include
•
justify-content: justify-option
defines the alignment along the main axis
justify-option can take the following values:
Images courtesy of Chris Coyier: A Complete Guide to Flexbox. CSS-Tricks. 4 September 2019.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (accessed 14 September 2019).
COMP519 Web Programming Lecture 8 Slide L8 – 23
CSS Flexbox Layout Defining a Flexbox Layout
Flexbox Layout Properties
CSS properties of Flexbox include
•
align-content: align-option
defines the use of extra space along the cross axis
align-option can take the following values:
Images courtesy of Chris Coyier: A Complete Guide to Flexbox. CSS-Tricks. 4 September 2019.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (accessed 14 October 2019).
COMP519 Web Programming Lecture 8 Slide L8 – 24
CSS Flexbox Layout Example
CSS Flexbox Layout: Example
HTML
<nav >
<a href ="#" > C omput er Science </ a >
<a href ="#" > E lec tri cal E ngi nee rin g and Electronics </a >
<a href ="#" > Physics </a>
</nav >
CSS
a { text - align : cen te r }
nav {
backgr ou nd - co lor : Li ght Gre en ;
di splay : flex ;
flex - di rec tio n : row ;
justify - conte nt : space - ar ound ;
}
/* Narrow screen width */
@m edia all and ( max - wi dt h : 900 px ) {
nav {
flex - di rec tio n : c olumn ;
}
}
Width = 1000px
Width = 900px
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/layout4.html
COMP519 Web Programming Lecture 8 Slide L8 – 25
Adaptive versus Responsive Design
Adaptive versus Responsive Design
Adaptive Design
Uses a limited number of different web pages and/or different styles
depending on media devices and media attributes
Responsive design
Uses a single web page and style that through the use of
•
media queries,
•
flexible grids,
•
relative units and
•
responsive images
tries to adjust to any media device with any media attributes at any time
COMP519 Web Programming Lecture 8 Slide L8 – 26
Adaptive versus Responsive Design
Adaptive versus Responsive Design
Adaptive Design
Uses a limited number of different web pages and/or different styles
depending on media devices and media attributes
Responsive design
Uses a single web page and style that through the use of media queries,
flexible grids, relative units and responsive images tries to adjust to any
media device with any media attributes at any time
•
There are no generally agreed definitions of adaptive design and
responsive design
•
It is often debatable whether a website uses adaptive design or
responsive design (or neither)
•
There is even more debate which one is better
•
Most/all of the examples we have seen use adaptive design,
but this was done for effect
COMP519 Web Programming Lecture 8 Slide L8 – 27
Adaptive versus Responsive Design
Style Guide
•
HTML and CSS provide a lot of features,
but these must be used sensibly
; just because a feature exists does not mean it be used
•
Do not use features that distract from the content of your web page
•
Use (non-default) colours and fonts carefully
; no purple text on pink background
; no “weird” fonts (that includes Comic Sans)
; mainly use a dark font on a light background
•
Remember that an estimated 8-10% of people have some type of
colour-blindness
; avoid red/green colour combinations
•
Remember that some people use screen readers to read the content of
web pages
; always include alt properties for images
COMP519 Web Programming Lecture 8 Slide L8 – 28
Adaptive versus Responsive Design
Style Guide
•
Use relative units to specify font sizes, not fixed pixel sizes
•
Use images appropriately
; avoid bright background images that make foreground text
hard to read
; avoid clickable images instead of standard buttons for links
as they can slow down the download of your page
•
Do not rely on specific window size or specific font size for layout as the
user might change those
; use an adaptive or responsive design
•
Break a large web page into several smaller ones or provide a menu for
navigation
•
Utilise style sheets to make changes to style and layout easy and ensure
consistency across a set of web pages
•
Stick to standard features and test several browsers
COMP519 Web Programming Lecture 8 Slide L8 – 29
Further Reading
Revision and Further Reading
Read
•
Chapter 15: Floating and Positioning
•
Chapter 16: CSS Layout with Flexbox and Grid
of
J. Niederst Robbins: Learning Web Design: A Beginner’s Guide to
HTML, CSS, JavaScript, and Web Graphics (5th ed).
O’Reilly, 2018.
E-book https://library.liv.ac.uk/record=b5647021
COMP519 Web Programming Lecture 8 Slide L8 – 30
Further Reading
Revision and Further Reading
Read
1 Chris Coyier: A Complete Guide to Flexbox.
CSS-Tricks. 28 September 2017.
https:
//css-tricks.com/snippets/css/a-guide-to-flexbox/
(accessed 18 October 2017).
2 Chris House: A Complete Guide to Grid.
CSS-Tricks. 13 September 2017.
https:
//css-tricks.com/snippets/css/complete-guide-grid/
(accessed 18 October 2017).
3 Mozilla and individual contributors: CSS Grid Layout.
MDN Web Docs, 5 October 2017.
https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout (accessed 19 October 2017).
COMP519 Web Programming Lecture 8 Slide L8 – 31
