e l p m a x e - university college cork
TRANSCRIPT
CS11
15/C
S500
2W
eb D
evel
opm
ent 1
Dr D
erek
Brid
geSc
hool
of C
ompu
ter S
cien
ce &
Info
rmat
ion
Tech
nolo
gyU
nive
rsity
Col
lege
Cor
k
Exam
ple
/* Core */
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);
html {
background-image: url('mint_stripes.jpg');
/* Stripes background mint green:
http://www.publicdomainpictures.net/
view-image.php?image=148956&picture=stripes-background-mint-green
Licenced under CC BY 1.0
(https://creativecommons.org/publicdomain/zero/1.0/)
*/
background-color: rgb(204,239,219);
} *{
margin:0;
padding:0;
} body {
width:70%;
margin:1emauto;
background-color: rgb(1,92,3);
color: white;
border:1em solid rgb(1,92,3);
border-radius:1em;
font-size:16px;
font-family:'Shadows Into Light', cursive;
} nav, main, aside {
background-color: white;
color: black;
padding:1em;
border:0.0625em solid rgb(204,239,219);
border-radius:1em;
} .cocktail {
color: rgb(1,92,3);
font-weight: bold;
} img {
max-width:100%;
}
Exam
ple,
cont
inue
d/* Header */
header {
padding:2em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
} header > h1 {
font-size:3em;
} header > p {
font-size:2em;
} Exam
ple,
cont
inue
d/* Nav */
nav {
padding:1em0;
background-color: rgb(204,239,219);
text-align: center;
} nav ul {
list-style: none;
padding:00.0625em;
} nav li li {
background-color: white;
border:0.0625em solid rgb(204,239,219);
}
Exam
ple,
cont
inue
d/* Main */
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
} main > h1, main > figure, main > p {
flex-basis:100%;
} main > section {
flex-basis:48%;
min-width:15em;
margin:0.5em01em0;
border:0.0625em solid rgb(204,239,219);
border-radius:1em;
} main > h1 {
font-size:2em;
} main > section > h1 {
font-size:1.5em;
padding:01rem;
} main > section > p {
padding:01rem;
} main > p {
margin:0.5em01em0;
} main ul, main ol {
margin:0.5em01em0;
padding:0002.5em;
} main > figure,#warning{
text-align: center;
} .attribution {
display: block;
font-size:0.6em;
}
Exam
ple,
cont
inue
d/* Aside */
aside > h1 {
font-size:1.5em;
} aside > p {
margin:0.5em01em0;
border-bottom:0.0625em solid rgb(204,239,219);
} /* Footer */
footer {
padding:2em;
}
Exam
ple,
cont
inue
d/* Two-column layout */
@media screen and(min-width:50em){
nav ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
nav ul li {
flex-basis:10em;
}
body {
display: grid;
grid-template-columns:75%25%;
grid-template-rows:auto;
grid-template-areas:"upper-top upper-top"
"lower-top lower-top"
"middle-left middle-right"
"bottom bottom"
}
header {
grid-area: upper-top;
}
nav {
grid-area: lower-top;
}
main {
grid-area: middle-left;
}
aside {
grid-area: middle-right;
}
footer {
grid-area: bottom;
}
}
Exam
ple,
cont
inue
d/* Three-column layout */
@media screen and(min-width:70em){
nav {
text-align: left;
background-color: white;
padding:1em0;
}
nav ul {
margin:0.5em01em0;
padding:0002.5em;
}
nav li li {
border:0;
border-bottom:0.0625em solid rgb(204,239,219);
}
body {
display: grid;
grid-template-columns:20%55%25%;
grid-template-rows:auto;
grid-template-areas:"top top top"
"middle-left middle-middle middle-right"
"bottom bottom bottom"
}
header {
grid-area: top;
}
nav {
grid-area: middle-left;
}
main {
grid-area: middle-middle;
}
aside {
grid-area: middle-right;
}
footer {
grid-area: bottom;
}
}
Exam
ple,
cont
inue
d/* Fixed-width three-column layout */
@media screen and(min-width:80em){
body {
width:60em;
}
} Com
mon
bre
akpo
ints
320p
xFo
r sm
all s
cree
n de
vice
s, li
ke p
hone
s, h
eld
in p
ortr
ait m
ode
480p
xFo
r sm
all s
cree
n de
vice
s, li
ke p
hone
s, h
eld
in la
ndsc
ape
mod
e
600p
xSm
alle
r ta
blet
s he
ld in
por
trai
t mod
e
768p
xTe
n-in
ch ta
blet
s he
ld in
por
trai
t mod
e
1024
pxTe
n-in
ch ta
blet
s he
ld in
land
scap
e m
ode,
as
wel
l as
som
e la
ptop
, net
book
and
desk
top
disp
lays
1200
pxFo
r w
ides
cree
n di
spla
ys, p
rim
arily
lapt
op a
nd d
eskt
op b
row
sers
But, th
ere
is a
muc
h w
ider
ran
ge o
f dev
ices
and
vie
wpo
rts
than
this
tabl
e as
sum
es
the
tabl
e is
not
futu
re-p
roof
Brea
kpoi
nts
Let c
onte
nt d
eter
min
e br
eakp
oint
s:
"Sta
rt w
ith th
e sm
all s
cree
n fir
st, t
hen
expa
nd u
ntil
it lo
oks
like
shit.
Tim
e fo
r a
brea
kpoi
nt!"
— S
teph
en H
ay
A br
eakp
oint
is a
ny p
oint
at w
hich
you
nee
d a
med
ia q
uery
to g
et th
e pa
ge o
ron
e of
its
com
pone
nts
to lo
ok r
ight
Som
e pe
ople
now
rec
omm
end
usin
g em
s in
stea
d of
pix
els
for
the
med
ia q
uerie
s
This
defi
nes
brea
kpoi
nts
prop
ortio
nally
and
hen
ce a
lso
wor
ks w
hen
the
user
scal
es th
e co
nten
t
It al
so e
ncou
rage
s yo
u to
defi
ne b
reak
poin
ts b
ased
on
read
abili
ty: p
eopl
e ar
em
ost c
omfo
rtab
le w
ith li
nes
of 4
5-75
cha
ract
ers
A fin
al fi
xM
any
smal
l-scr
een
devi
ces
draw
a d
istin
ctio
n be
twee
n th
e 'la
yout
vie
wpo
rt' a
ndth
e 'v
isua
l vie
wpo
rt'
E.g.
iPho
ne la
yout
vie
wpo
rt is
980
px
wid
e bu
t vis
ual v
iew
port
is 3
20 p
x w
ide
Web
pag
es a
re d
raw
n on
to th
e la
yout
vie
wpo
rt (e
.g. C
SS w
idth
s ar
e ba
sed
onth
is)
But w
hat y
ou s
ee is
just
par
t of i
t — w
hate
ver fit
s in
to th
e vi
sual
vie
wpo
rt
Zoom
out
to s
ee m
ore
of it
Que
stio
n: W
hy d
o yo
u th
ink
this
is a
pro
blem
for
us?
For
RWD
on
thes
e de
vice
s w
e ne
ed to
ove
rrid
e th
is d
efau
lt be
havi
our
by m
akin
gth
e tw
o vi
ewpo
rts
of e
qual
siz
e
Two
alte
rnat
ive
way
s of
doi
ng th
is
Add
the
follo
win
g in
side
the head
ele
men
t of y
our
HTM
L:<metaname="viewport"content="initial-scale=1.0, width=device-width"
/>
(but
this
is n
ot p
art o
f sta
ndar
d H
TML
and
it is
und
esira
ble
to d
efine
vis
ual
styl
es in
HTM
L)
Or
add
the
follo
win
g to
you
r CS
S:@viewport{width:device-width}
(but
this
is s
o ne
w th
at it
is n
ot y
et w
idel
y su
ppor
ted
by b
row
sers
)
For
now
, may
be d
o bo
th!
Revi
sion:
bac
kgro
und
imag
esW
e us
e CS
S to
giv
e an
ele
men
t a b
ackg
roun
d im
age,
e.g
.html {
background-image: url(swirly-pattern.gif);
} Any
elem
ent c
an h
ave
a ba
ckgr
ound
imag
e, n
ot ju
st body
Oth
er r
elev
ant C
SS in
clud
es:
background-repeat
with
val
ues repeat
(def
ault)
, repeat-x
, repeat-y
, no-
repeat
background-position
with
val
ues top/center/bottom
and
left/center
/right
background-attachment
with
val
ues
incl
udin
g scroll
(def
ault)
and
fixed
Also
background-size
, background-origin
, background-clip
Revi
sion:
fore
grou
nd im
ages
We
use
HTM
L to
incl
ude
a fo
regr
ound
imag
e, e
.g.
<imgsrc="wombat.jpg"
alt="Wombats are furry, have protruding front teeth and walk on all fours."
title="A wombat walking along a road"
/>
Ther
e ar
e al
so width
and
height
att
ribu
tes
—se
e be
low
You
can
also
nes
t the
img
ele
men
t ins
ide
a figure
ele
men
t, op
tiona
lly a
long
with
a figcaption
ele
men
t
Fore
grou
nd im
ages
in fi
xed-
wid
th la
yout
sIn
fixe
d-w
idth
layo
uts,
you
kno
w h
ow m
uch
spac
e (in
pix
els)
is a
vaila
ble
for
your
imag
es
As m
uch
as p
ossi
ble,
try
to c
reat
e th
e or
igin
al im
age
so th
at it
is th
e de
sire
d si
ze
If th
is is
not
pos
sibl
e, th
en s
cale
it u
sing
imag
e m
anip
ulat
ion
soft
war
e (e
.g.
Phot
osho
p, G
IMP)
It is
pos
sibl
e bu
t les
s sa
tisfa
ctor
y to
let t
he b
row
ser
scal
e th
e im
age
by s
peci
fyin
gth
e de
sire
d si
ze
eith
er in
the
HTM
L, e
.g.
<imgsrc="wombat.jpg"width="152"alt="..."/>
or in
the
CSS
img {
width:152px;
}
Que
stio
n: W
hy a
re th
ese
less
sat
isfa
ctor
y th
an u
sing
cor
rect
ly-s
ized
imag
es?
Fore
grou
nd im
ages
for l
iqui
d la
yout
sIn
liqu
id la
yout
s, y
ou d
on't
know
how
muc
h sp
ace
is a
vaila
ble
for
your
imag
es
If th
e im
age
is w
ider
than
the
avai
labl
e sp
ace,
it w
ill o
verfl
ow it
s co
ntai
ner
—un
likel
y to
look
goo
d!
One
opt
ion
is to
use
CSS
to h
andl
e th
e ov
erflo
w:
figure {
overflow: hidden;
} The overflow
pro
pert
y ha
s va
lues
that
incl
ude visible
(def
ault)
, hidden
, scroll
and auto
Fore
grou
nd im
ages
for l
iqui
d la
yout
sA
mor
e fle
xibl
e op
tion
(rec
omm
ende
d in
Res
pons
ive
Web
Des
ign)
is to
set
the
max
wid
th to
100
% in
the
CSS:
img {
max-width:100%;
}
If th
e im
age
is n
arro
wer
than
its
cont
aine
r, it
will
dis
play
at i
ts n
orm
al s
ize
If it
is w
ider
than
its
cont
aine
r, it
will
be
scal
ed d
own
to m
atch
the
wid
th o
f the
cont
aine
r
Or
(less
com
mon
) you
cou
ld s
et th
e w
idth
to 1
00%
:img {
width:100%;
} Then
the
imag
e sc
ales
up
or d
own
to m
atch
the
cont
aine
r
Que
stio
n: T
his
look
s go
od. B
ut w
hat a
re th
e di
sadv
anta
ges?
Back
grou
nd im
ages
for l
iqui
d la
yout
sBa
ckgr
ound
imag
es a
re le
ss o
f a p
robl
em
By d
efau
lt, th
ey ti
le
So th
ey w
ill c
over
the
elem
ent (
irres
pect
ive
of it
s si
ze),
with
out s
calin
g
Or
you
can
use
the background-size
pro
pert
y to
sca
le th
em, e
.g.
html {
background-image: url(swirly-pattern.gif);
background-size: cover;
} Or
you
can
use
med
ia q
ueri
es to
load
diff
eren
t im
ages
for
diff
eren
t vie
wpo
rtsi
zes
Vide
os fo
r liq
uid
layo
uts
Revi
sion
: how
to e
mbe
d yo
ur o
wn
vide
o in
to a
web
pag
e:<videowidth="640"height="360"controls>
<sourcesrc="mojito.webm"type="video/webm">
</video>
Now
, for
RW
D, w
e ca
n do
wha
t we
did
with
imag
es:
video {
max-width:100%;
} Ther
e se
ems
to b
e so
me
disa
gree
men
t abo
ut w
heth
er it
is b
ette
r to
als
o re
mov
eth
e he
ight
and
wid
th a
ttri
bute
s, o
r ju
st th
e he
ight
, or
neith
er
See
also
this
mor
e ex
tens
ive
trea
tmen
t of t
his
topi
c