Dr.
Qaiser Riaz
Tenured Associate Professor
[Link]@[Link]
BSCS-13E Lecture-5ABC
CS-343: Web
Technologies Spring-2025
School of Electrical Engineering and
Computer Science
National University of Science and
Technology (NUST)
Agenda
• CSS3
• Animations
• Media Queries
• Responsive Web
Design
2
Animation
3
[Link]
CSS3 Animation
4
[Link]
CSS3 Animation m/cssref/[Link]?fil
ename=playcss_animation
[Link]
5
CSS3 Media Queries
6
CSS3 Media Queries
• Media queries can be used to check many things, such
as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait
mode?)
• Resolution
• Using media queries are a popular technique for
delivering a tailored style sheet to desktops, laptops,
tablets, and mobile phones (such as iPhone and
Android phones).
7
Syntax
@media not|only mediatype and (media feature) {
CSS-Code;
}
• The mediatype is optional (if omitted, it will be set to all). However, if you use not
or only, you must also specify a mediatype.
• not: This keyword inverts the meaning of an entire media query.
• only: This keyword prevents older browsers that do not support media queries from
applying the specified styles. It has no effect on modern browsers.
8
Media Queries: Examples
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
• Changes the background-color to lightgreen if the width of
the browser window is less than 480 pixels
9
Media Queries: Examples
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
10
Media Queries + RWD: Orientation
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
11
Media Queries: Examples
• Different CSS stylesheets for different screen
resolutions
<link rel="stylesheet" media="screen and (min-
width: 900px)" href="[Link]">
<link rel="stylesheet" media="screen and (max-
width: 600px)" href="[Link]">
12
Responsive Web
Design
13
RWD
• Responsive Web Design (RWD)
• Makes your web page look good on most devices
• Uses only HTML and CSS
Desktop Tablet Phone
14
Steps – RWD
1. Set the viewport
2. Set box-sizing to border box for all elements
3. Define grid layout for different screen sizes
4. Introduce floating for all grids
5. Clear the float after each row
15
Steps – RWD
1. Set the viewport 4. Introduce floating for all
<meta name="viewport" content=
"width=device-width, initial- grids
scale=1.0">
[class*="col-"] {
2. Set box-sizing to border box for float: left;
all elements padding: 5px;
{ box-sizing: border-box; }
}
3. Define grid layout for different 5. Clear the float after each row
screen sizes
@media only screen and (min-width: .row::after {
600px) { content: "";
/* For smartphones: */
.col-m-1 {width: 8.33%;} clear: both;
.col-m-2 {width: 16.66%;} display: block;
….}
}
}
16
The Viewport
• User's visible area of a web page
• Varies with the device (smaller on a mobile phone than on a
computer screen)
• <meta name="viewport" content="width=device-
width, initial-scale=1.0">
• width=device-width sets the width of the page to follow the
screen-width of the device
• initial-scale=1.0 sets the initial zoom level when the page is
first loaded by the browser.
17
The Viewport
18
Building a Responsive Grid-View
* {
box-sizing: border-box;
}
• All HTML elements must have the box-
sizing property set to border-box to ensure that the
padding and border are included in the total width
and height of the elements
19
Grid-View
• The web page is divided into columns (typically 12)
• Total width of 100%
• View shrinks and expands according to window size
20
Grid-View
21
For 12 col Layout
• 100% / 12 columns = 8.33%
col-1 {width: 8.33%;}
col-2 {width: 16.66%;}
col-3 {width: 25%;}
col-4 {width: 33.33%;}
col-5 {width: 41.66%;}
col-6 {width: 50%;}
col-7 {width: 58.33%;}
col-8 {width: 66.66%;}
col-9 {width: 75%;}
col-10 {width: 83.33%;}
col-11 {width: 91.66%;}
col-12 {width: 100%;}
22
Float the columns & Pad the content
[class*="col-"] {
float: left;
padding: 15px;
}
• floating to the left
• padding of 15px
23
Float the columns & Pad the content
.row:after {
content: "";
clear: both;
display: block;
}
• Clear the row follow up
24
Content
• Each row should be wrapped in a <div>
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
25
Media Queries + RWD: Multiple
Breakpoints
<div class="row"> • For desktop:
• The first and the third section will
both span 3 columns each. The
1 <div class="col-3 col- middle section will span 6
m-3">...</div> columns.
• For tablets:
• The first section will span 3
2 <div class="col-6 col- columns, the second will span 9,
m-9">...</div> and the third section will be
displayed below the first two
sections, and it will span 12
3 <div class="col-3 col- columns:
m-12">...</div>
</div>
26
Further Reading
W3Schools is a good and widely used resource to learn
HTML and CSS
• [Link]
• [Link]
• [Link]