Fundamentals of Web Development

Third Edition by Randy Connolly and Ricardo Hoar

Chapter 3
(In the book this is chapters 4 and 5)

CSS part 1: Selectors and

Basic Styling

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
What Is CSS?
• CSS is a W3C standard for describing the appearance and the layout of
an HTML document.
• With CSS, we can assign font properties, colors, sizes, borders,
background images, positioning and even animate elements on the page.
• CSS allows Responsive Design

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Benefits of CSS
• Main engineering concepts: Separation of concerns + Reuse

• Improved control over formatting.

• Improved site maintainability. All formatting can be centralized into

one CSS file
• Improved accessibility. By keeping presentation out of the HTML, screen readers
and other accessibility tools work better.

• Improved page-download speed. Each individual HTML file will contain less style
information and markup, and thus be smaller.

• Improved output flexibility. CSS can be used to adapt a page for different output
media. This approach to CSS page design is often referred to as responsive
design.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
CSS Syntax
• A CSS document consists of
one or more style rules.

• A rule consists of a selector

that identifies the HTML
element or elements that will
be affected, followed by a
series of property:value pairs
called the declaration

• The series of declarations is

also called the declaration
block.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
CSS Syntax: Values
• Each individual CSS
declaration must also contain a
value

• The unit of any given value

depends on the property.

• Some property values are from

a predefined list of keywords.
Others include length
measurements, percentages,
numbers without units, color
values, and URLs.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Color Values
Method Description Example

Name Use one of 17 standard color names. CSS3 has color: red;
140 standard names. color: green; /* CSS3 only */
RGB Uses three different numbers between 0 and color: rgb(255,0,0);
255 to describe the red, green, and blue values color: rgb(255,105,180);
of the color.
Hexadecimal Uses a six-digit hexadecimal number to color: #FF0000;
describe the red, green, and blue value of the color: #FF69B4;
color
RGBa This defines a partially transparent background color: rgba(255,0,0,0.5);
color. The “a” stands for “alpha,” which is a (check: rgbacolorpicker.com )
term used to identify a transparency
HSL Allows you to specify a color using Hue color: hsl(0,100%,100%);
Saturation and Light values. This is available color: hsla(330,59%,100%,0.5);
only in CSS3. HSLA is also available as well.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Common Units of Measure Values
Units of measure in CSS are either

• relative units, in that they are based on the value of something else, or

• absolute units, in that they have a real-world size.

Some example measures:

• px Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch -> 4px ~ 1.06mm)

• em Equal to the computed value of the font-size property of the element on which it is used (2em means 2 times
the size of the current font)

• vw Relative to 1% of the width of the viewport (the browser window size). If the viewport is 30cm wide, 1vw =
0.3cm.

• in Inches (absolute)

• cm Centimeters (absolute)

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Location of Styles
CSS style rules can be located in three different locations.
• Inline Styles
• Embedded Style Sheet
• External Style Sheet

These three are not mutually exclusive, in that you could place your style rules
in all three.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Inline Styles
Inline styles are style rules
placed within an HTML element
via the style attribute
• An inline style only affects <h1>Share Your Travels</h1>
<h2 style="font-size: 24pt">Description</h2>
the element it is defined ...
within and overrides any <h2 style="font-size: 24pt; font-weight: bold;">Reviews</h2>
other style definitions for LISTING 4.1 Inline styles example
properties used

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Embedded Style Sheet
Embedded style sheets (also called <head>
internal styles) are style rules placed <meta charset="utf-8">
within the <style> element (inside the <title>Chapter 4</title>
<style>
<head> element of an HTML h1 { font-size: 24pt; }
document) h2 {
font-size: 18pt;
• While better than inline styles, font-weight: bold;
using embedded styles is also }
</style>
discouraged. </head>
<body>
LISTING 4.2 Embedded styles example

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
External Style Sheet store.html

External style sheets are style rules checkout.html dashboard.html

placed within an external text file with
the .css extension. style.css

• When you change an external style

sheet, all HTML documents that
sales.html
reference that style sheet will about.html
automatically use the updated
version. <head>
<meta charset="utf-8">
• The browser is able to cache the <title>Chapter 4</title>
external style sheet, which can <link rel="stylesheet" href="styles.css" />
</head>
improve performance as well.
LISTING 4.3 Referencing an external style sheet

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Selectors
When defining CSS rules, you will need to use a selector.
• Selectors tell the browser which elements will be affected by the property
values
• Selectors allow you to select individual or multiple HTML elements.
• Three basic selector types have been around since the earliest CSS2
specification.
– Element Selectors
– Class Selectors
– Id Selectors

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Element Selectors /* commas allow you to group selectors */
p, div, aside {
Element selectors select all instances margin: 0;
padding: 0;
of a given HTML element. }
/* the above single grouped selector is equivalent to the
You can also select all elements by following: */
using the universal element selector p{
margin: 0;
(*) padding: 0;
}
You can select a group of elements by div {
separating the different element names margin: 0;
padding: 0;
with commas. }
aside {
margin: 0;
padding: 0;
}
LISTING 4.4 Sample grouped selector

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Class and ID Selectors
A class selector allows you to target An ID selector allows you to target a
different HTML elements labeled with specific element by its id attribute, which
the same class takes the form:

We use a period (.) followed by the class hash (#) followed by the id name.
name.

The difference between “class” and “id”:

“id” is unique in a document and used to target only one element, whereas
“class” can be used to target many elements.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Class and ID Selector Example
Consider this figure, the original
HTML can be modified to add
class and id values, which are
then styled in CSS.

• Id selector #first matches the

div with id “first”
• Class selectors .orange
and .circle, match all
ekements with those class
values.
• Notice that an element can be
tagged with multiple classes
(priority goes to the last rule in
the document).
Copyright © 2021,
Source code: 2018, 2015 Pearson Education, Inc. All Rights Reserved
chapter03/01_selectors
Note: in reality the divs would appear vertically
Attribute Selectors
An attribute selector provides a way to select HTML elements either by the
presence of an element attribute or by the value of an attribute.
• Attribute selectors can be helpful in the styling of hyperlinks and form
elements
• These selectors can be combined with the element id and class selectors.
• You use square brackets to create attribute selectors

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Attribute Selectors
Matches Example

[] A specific attribute. [title]

Matches any element with a title attribute
[=] A specific attribute with a specific a[title="posts from this country"]
value. Matches any <a> element whose title attribute is exactly “posts from
this country”
[~=] A specific attribute whose value [title~="Countries City"]
matches at least one of the words in a Matches any title attribute that contains the word “Countries“
space-delimited list of words.
[^=] A specific attribute whose value begins a[href^="mailto"]
with a specified value. Matches any <a> element whose href attribute begins with “mailto“
[*=] A specific attribute whose value img[src*="flag"]
contains a substring. Matches any <img> element whose src attribute contains somewhere
within it the text “flag“
[$=] A specific attribute whose value ends a[href$=".pdf"]
with a specified value. Matches any <a> element whose href attribute ends with the text
“.pdf“

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Attribute Selector Example
Here we show an attribute selector to show PDF files differently than other
links

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 g1
Common Pseudo-Class Selectors
A pseudo-class selector targets either a particular state or a variety of family relationships

• a:link Selects links that have not been visited.

• a:visited Selects links that have been visited.

• :hover Selects elements that the mouse pointer is currently above.

• :active Selects an element that is being activated by the user. For example a link that being clicked.

• :first-child Selects an element that is the first child of its parent.

• :first-letter Selects the first letter of an element.

• :first-line Selects the first line of an element.

• :is() takes a selector list and selects any element that can be selected by any of the selectors in that
list (example :is(input,label,button,select):hover instead of input:hover, label:hover…. )

Source code:
Copyright © chapter03/02_selectors_2
2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Styling a link using pseudo-class selectors

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Syntax of a descendant selection

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Contextual Selectors
A contextual selector (in CSS3 also called combinators) allows you to select elements based on
their ancestors, descendants, or siblings.

• A descendant selector matches all elements that are contained within another element. The
character used to indicate descendant selection is a space “ “

• A child selector matches a specified element that is a direct child of the specified element.
The character used is a “>”

• An Adjacent selector matches a specified element that is the next sibling of the specified
element. The character used is a “+”

• A General sibling selector matches All following elements that shares the same parent as the
specified element. The character used is a “~”

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Contextual selectors in action

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
NEW! Nested CSS rules
Ref: https://drafts.csswg.org/css-nesting-1/
• Still a work in progress by W3C, but implemented by all major browsers (see:
https://caniuse.com/css-nesting)

• It is a simpler way of writing CSS rules.

parent { parent {
/* parent styles */ /* parent styles */
& child1 { }
/* child1 styles */ parent child1 {
``} /* child styles */
& child2 { }
/* child2 styles */ parent child2 {
``} /* child styles */
} }
Copyright
Source © chapter03/03_nested_selectors
code: 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The Cascade: How Styles Interact
The “Cascade” in CSS refers to how conflicting rules are handled.

CSS uses the following cascade principles to help it deal with conflicts:
• inheritance,
• specificity, and
• location.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 The Cascade: Inheritance
Inheritance is the principle that many
CSS properties affect their
descendants as well as themselves.

• Font, color, list, and text

properties are inheritable;

• Layout, sizing, border,

background, and spacing
properties are not.

• it is also possible to inherit

properties that are normally not
inheritable using inherit
{color: inherit;}

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 The Cascade: Specificity
Specificity is how the browser
determines which style rule takes
precedence when more than one
style rule could be applied.

• The more specific selector takes

precedence

• Class selectors take precedence

over element selectors, and id
selectors take precedence over
class selectors

Note: <body> color and font-weight

properties are overridden by the
more specific <div> and <p>
selectors.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Simplified Specificity algorithm

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The Cascade: Location
Finally, when inheritance and
specificity cannot determine style
precedence, the principle of
location will be used.

When rules have the same

specificity, then the latest are
given more weight.

For instance, an inline style will

override one defined in an
external author style sheet or an
embedded style sheet.
Note: browser user styles are less and less
Copyright used 2018, 2015 Pearson Education, Inc. All Rights Reserved
© 2021,
today.
Block Elements
Block-level elements such as <p>,
<div>, <h2>, <ul>, and <table> are
each contained on their own line.
• without styling, two block-level
elements can’t exist on the same
line
• Block-level elements use the
normal CSS box model

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Inline Elements
Inline elements do not form their own blocks but instead are displayed within
lines.
• Normal text in an HTML document is inline, as are elements such as <em>,
<a>, <img>, and <span>.
• When there isn’t enough space left on the line, the content moves to a new
line

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Inline Element Example

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Block and inline elements together

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Margins and Padding
Margins add spacing around an
element’s content

Padding adds spacing within

elements.

Borders divide the margin area

from the padding area.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The Box Model
In CSS, all HTML elements exist within an element box. In order to become
proficient with CSS, you must become familiar with the box model.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Box Model: All or one
NOTE
With border, margin, and padding properties, it is possible to set the properties for
one or more sides in a single property, or individually

border-top-color: red; /* sets just the top side */

border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */

Alternately, we can set all four sides to a single value via:

border-color: red; /* sets all four sides to red */

Or we can set all four sides to different values via:

border-color: red green orange blue;

Another shortcut is to use just two values; in this case the first value sets top and bottom, while the
second sets the right and left.
border-color: red yellow; /* top+bottom=red, right+left=yellow */

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Box Dimensions
• Block-level elements have width and
height properties.

• They also have a min-width, min-

height, max-width, and max-height
properties as well to help when the
width or a height might be specified as
a % of its parent container

• Since the width and the height only

refer to the size of the content area,
the total size of an element is equal to
the size of its content area plus the
sum of its padding, borders, and
margins.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Overflow Property
It is possible to control
what happens with the
content if the box’s width
and height are not large
enough to display the
content using the overflow
property

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Box sizing via percent

Source code:©chapter03/04_box_sizing
Copyright 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
CSS Text Styling
CSS provides two types of properties that affect text.
• Font properties that affect the font and its appearance.
• Paragraph properties that affect the text in a similar way no
matter which font is being used
• Font properties include
– font, font-family, font-style, font-size, font-variant, font-weight

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Font Family
Just because a given font is available on the web developer’s
computer does not mean it will be available for all users.

For this reason, it is conventional to supply a so-called web font

stack— a series of alternate fonts (fallback fonts) to use in case the
original font choice is not on the user’s computer

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Different font families

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 @import a font available online
DIVE DEEPER
You can use a font even if it is not installed on the user’s computer. Open source font
sites such as Google Web Fonts (https://fonts.google.com) and Font Squirrel (
http://www.fontsquirrel.com/) have online fonts available for public use:

To use Droid Sans, you can add the following to your <head> section

<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"

type="text/css">

Or, add the following import inside one of your CSS files:

@import url('https://fonts.googleapis.com/css2?
family=Roboto+Slab:wght@400&display=swap');

Source code:
Copyright © chapter03/05_import_font
2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Font Sizes
If we wish to create web layouts that work well on different devices, we should
learn to use relative units such as em units or percentages for our font sizes
• it can quickly become difficult to calculate actual sizes when there are
nested elements
– For this reason, CSS3 now supports a new relative measure, the rem
(for root em unit). This unit is always relative to the size of the root
element (i.e., the <html> element).

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Font Weight

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Text properties

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
CSS Variables
CSS Variables (also called custom properties) are a new feature that let you
• define variables (which must begin with a double hyphen --x) at the top of
your CSS file usually within a special :root pseudo-class selector, and
• reference those variables as property values using the var() CSS function.

Duplication of colors, spacing, and borders, often happens numerous times

within a single file.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Example Part 1 (duplicate values)
header { #results {
background-color: #431c5d; background-color: #431c5d;
color: #e05915; font-size: 18px;
padding: 4px; border-radius: 5px;
box-shadow: 6px 5px 20px 1px rgba(0,0,0,0.22); padding: 4px;
margin: 0; box-shadow: 6px 5px 20px 1px rgba(0,0,0,0.22);
} }
header button {
background-color: #e05915;
border-radius: 5px;
border-color: #e6e9f0;
padding: 4px;
color: #e6e9f0;
font-size: 18px;
margin-top: 9px;
}

LISTING 4.8 Duplicate property values in CSS

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Example Part 2 (CSS variables)
:root { header button {
--bg-color-main: #431c5d; background-color: var(--bg-color-secondary);
--bg-color-secondary: #e05915; border-radius: var(--radius-boxes);
--fg-color-main: #e6e9f0; border-color: var(--fg-color-main);
--radius-boxes: 5px; padding: var(--padding-boxes);
--padding-boxes: 4px; color: var(--fg-color-main);
--fontsize-default: 18px; font-size: var(--fontsize-default);
--shadow-color: rgba(0,0,0,0.22); margin-top: calc( --fontsize-default / 2 );
--dropshadow: 6px 5px 20px 1px var(--shadow-color); }
} #results {
header { background-color: var(--bg-color-main);
background-color: var(--bg-color-main); font-size: var(--fontsize-default:);
color: var(--bg-color-secondary); border-radius: var(--radius-boxes);
padding: var(--padding-boxes); padding: var(--padding-boxes);
box-shadow: var(--dropshadow); box-shadow: var(--dropshadow);
margin: 0; }
}
LISTING 4.9 Using CSS Variables

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Styling Tables (Borders)
Borders can be assigned to the <table>, <th> and the <td> element.
Interestingly, borders cannot be assigned to the <tr>, <thead>, <tfoot>, and
<tbody> elements.

Notice as well the border-collapse property. This property selects the table’s
border model.
• The default is the separated model or value (each cell has its own unique
borders)
• The collapsed border model makes adjacent cells share a single border.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Styling table borders

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Boxes and Zebras
While there is almost no end to the
different ways one can style a table,
there are a number of common
approaches. We will look at two of them
here.

• The first of these is a box format, in

which we simply apply background
colors and borders in various ways

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Boxes and Zebras (ii)
We can then
• add special styling to the :hover
pseudo-class of the <tr> element to
highlight a row when the mouse
cursor hovers over
• use the pseudo-element nth-child to
alternate the format of every second
row.

Source code:
Copyright © chapter03/06_style_tables
2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Styling Form Elements
Let’s begin with the common text and button controls. A common
styling change is to eliminate the borders and add in rounded
corners and padding.

https://
www.w3schools.com/cssref/
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
css_selectors.asp
Working with labels

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Form Design
A well-designed form communicates to a
user that the site values their time and
data.

Source code:Copyright
chapter03/07_style_forms
© 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Fundamentals of Web Development
Third Edition by Randy Connolly and Ricardo Hoar

Chapter 2
CSS Part 2: Layout

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
In this chapter you will learn . . .
• Approaches to CSS layout using CSS flexbox and grid models
• What responsive web design is and how to construct responsive designs

To learn more about

page layout design, this
resource is
comprehensive:

https://m3.material.io/

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Flexbox Layout
(for 1D layouts)

Note: In the past tables

were sometimes used to
design a page’s layout.
This practice should
never be used:
• It pollutes the HTML,
• makes things more
difficult for SEO
• and is not
maintainable.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Flex containers and items
There are two places in which you will be assigning flexbox properties: the
flex container and the flex items within the container.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The flexbox container properties

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The flexbox container properties (ii)

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The flexbox item (child) properties
You can also assign a
fraction to each child item.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Grid Layout (for 2D layouts)
Grid layout is adjustable, powerful, and, compared to floats and even flexbox, is
relatively easy to learn and use!
• Each block-level child in a parent container whose display property is set to
grid will be automatically placed into a grid cell

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Specifying Grid Structure
grid-template-columns is used for adding columns by specifying each column’s
width using the fr unit.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Specifying column widths
Column widths can be specified

The CSS repeat() function provides a way to specify repeating patterns of

columns.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Specifying column widths (ii)

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Explicit Grid Placement Example 1

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Explicit Grid Placement Example 2

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Cell properties
• align-self and justify-self
control the cell content’s
horizontal and vertical alignment
within its grid container.

• You can similarly control cell alignment within a grid container using align-
items and justify-items

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Nested Grid

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Grid Named Areas
<style> .c1 { grid-area: c1; }
.container { .c2 { grid-area: c2; }
grid-gap: 10px; </style>
display: grid;
grid-template-rows: 100px 150px 100px;
grid-template-columns: 75px 1fr 1fr 1fr 1fr; <section class="container">
grid-template-areas: ". a1 a2 a3 a4" <div class="yellow a1">A1</div>
"b1 b2 b2 b2 b3" <div class="yellow a2">A2</div>
"b1 c1 c2 c2 c2"; <div class="yellow a3">A3</div>
} <div class="yellow a4">A4</div>
.a1 { grid-area: a1; } <div class="orange b1">B1</div>
.a2 { grid-area: a2; } <div class="orange b2">B2</div>
.a3 { grid-area: a3; } <div class="orange b3">B3</div>
.a4 { grid-area: a4; } <div class="cyan c1">C1</div>
.b1 { grid-area: b1; } <div class="cyan c2">C2</div>
.b2 { grid-area: b2; } </section>
.b3 { grid-area: b3; }

LISTING 7.2 Using grid areas

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Grid Areas (ii)

LISTING 7.2 Using grid areas

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Grid and Flexbox
Together
• grid and flexbox each have their
strengths and these strengths can
be combined
• grid layout is ideal for
constructing the layout structure
of your page
• flexbox is ideal for laying out the
contents of a grid cell.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Responsive Design
In a responsive design, the page
“responds” to changes in the browser
size that go beyond simple percentage
scaling of widths.
• smaller images will be served and
• navigation elements will be replaced
as the browser window shrinks

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Viewports
The browser’s viewport is the
part of the browser window that
displays web content.

Mobile browsers will by default

scale a web page down to fit the
width of the screen.

Generally, results in a viewing

experience that works but is very
difficult to read and use.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Setting Viewports
<html>
<head>
<meta name="viewport"
content=“width=device-width, initial-scale=1" />
Fig, Setting the Viewport

The width attribute controls the

size of the viewport, while initial-
scale sets the zoom level.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 G1 2 3

Media Queries
CSS media queries are a way to apply style rules based on the medium that is displaying the file

Contemporary responsive sites will typically provide CSS rules for phone displays first, then tablets, then
desktop monitors, an approach called progressive enhancement

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Media queries in action

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
The <picture>
element
Making images scale in size is
straightforward, but does not
change the downloaded size of
the image
img {
max-width:
100%;
}

HTML5.1 defines the new

<picture> element that lets the
designer specify multiple <img>
elements. The browser
determines which <img> to use
based on the viewport size.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved