CS计算机代考程序代写 scheme Java flex javascript CSS

CSS
2020/21 COMP3322 Modern Technologies on WWW

Contents
• About CSS
• CSS Syntax
• The concept of Cascade
• The box model
• More controls for developers • CSS Layout
• Responsive web design
2

About CSS

What is CSS?
• Cascading Style Sheet
• CSS is a W3C standard for describing the presentation (or appearance) of
HTML elements.
• CSS allows us to create rules that specify how the content of an element should appear.
• CSS is a language in that it has its own syntax rules.
• With CSS, we can assign font properties, colors, sizes, borders, background images, and even the position of elements.
4

What is CSS?
• The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.
• CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.
5

CSS Versions
• CSS was first proposed by Håkon Wium Lie on October 10, 1994.
• W3C published the CSS Level 1 Recommendation in Dec 1996.
• Two years later, the CSS Level 2 Recommendation was published.
• CSS Level 2.1 has gone through a decade of development, and only became official W3C Recommendation until June 2011.
• And to complicate matters even more, all through the last decade, during the same time the CSS2.1 standard was being worked on, a different group at the W3C was working on a CSS3 draft.
• CSS3 is divided into several separate documents called “modules”.
• Different modules are in different statuses; some get to Recommendation status and some are still in Working Draft status
Source: Cascading Style Sheets – Wikipedia
6

Three Locations of Placing Styling
• CSS style rules can be located in three different locations. • Inline
• Embedded
• External
• You can combine all 3!
7

Inline Styles
• Style rules placed within an HTML element via the “style” attribute
• An inline style only affects the element it is defined within and will override any other style definitions for the properties used in the inline style.
• Using inline styles is generally discouraged since they increase bandwidth and decrease maintainability.
• Inline styles can however be handy for quickly testing out a style change.
8

Embedded Style Sheet
• Style rules placed within the


Red and center-aligned heading

Red and center-aligned paragraph.


Id Selectors
• To select an element with a specific id, write a hash (#) character, followed by the id of the element.
https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id
22

Hello World!

This paragraph is not affected by the style.

Combinators
• A combinator is something that explains the relationship between the selectors.
Selector
Matches
Example
Descendant
A specified element that is contained somewhere within another specified element
div p
Selects a

element that is contained somewhere within a

element. That is, the

can be any descendant, not just a child.
Child
A specified element that is a direct child of the specified element
div>h2
Selects an

element that is a child of a

element.
Adjacent Sibling
A specified element that is the next sibling (i.e., comes directly after) of the specified element.
h3+p
Selects the first

after any

.
General Sibling
A specified element that follows and shares the same parent as the specified element.
h3~p
Selects all the

elements that follow and share the same parent as the

.
We can find more information on combinators at https://www.w3schools.com/css/css_combinators.asp
23

Example: General Sibling Selector



Paragraph 1.

Paragraph 2.

Paragraph 3.

Some code.

Paragraph 4.



https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_tilde
24

Attribute Selectors
• Selecting via presence of element attribute or by the value of an attribute
• Examples:
• Selects all elements with a target attribute.
• Selects all
elements with a target="_blank" attribute.
• Selects all elements with a class attribute value that begins with "top".
a[target] { ... }
a[target="_blank"] { ... }
[class^="top"] { ... }
We can find more information on attribute selectors at https://www.w3schools.com/css/css_attribute_selectors.asp
25

Pseudo Selectors
• Two types of pseudo selectors: • Pseudo-element selector
• A pseudo-element acts like an extra but fictional HTML element in the code, e.g., a specific part of the element(s)
selector::pseudo-element {
property:value;
}
• Pseudo-class selector
• A pseudo-class is a class (implicitly added by the system) which allows us to selects the
elements which are at certain states or circumstances.
selector:pseudo-class {
property:value;
}
In CSS3, pseudo-elements are indicated by a double colon (::) symbol, but for backward compatibility, systems accept a single colon (:) as they were defined in CSS2.
26

Pseudo-Element Selectors
• Commonly used pseudo-elements: • ::first-line
• Select the first line of the text in the element. • ::first-letter
• Select the first letter of the text in the element.
• ::before
• Can be used to insert some content before the
content of the element. • ::after
• Can be used to insert some content after the content of the element.
• ::selection
• Select the part of a document that has been highlighted by the user



This is a heading

The ::before pseudo-element inserts content before the content of an element.



https://www.w3schools.com/css/tryit.asp?fil ename=trycss_before
27

Pseudo-Class Selectors
• Commonly used pseudo-classes: • :link | :visited,
• Select unvisited | visited link(s) • :hover
• Select an element when your mouse is over it
• :active
• Select the active element
• :first-child
• Select the first child of the target
element
• :nth-child(i) e.g., p:nth-child(2)
• Select all

elements which are the 2nd child of its parents


Mouse over the div element below to change its
background color:

Mouse Over Me



https://www.w3schools.com/css/tryit.asp?filenam e=trycss_pseudo-class_hover_div
28

Units of Measurement
• There are multiple ways of specifying a unit of measurement in CSS. • Some of these are relative units, in that they are based on the value
of something else, such as the size of a parent element.
• Others are absolute units, in that they have a real-world size.
• Unless you are defining a style sheet for printing, it is recommended to avoid using absolute units.
29

Absolute Units
Unit
Description
Type
in
Inches
Absolute
cm
Centimeters
Absolute
mm
Millimeters
Absolute
pt
Points (equal to 1/72 of an inch)
Absolute
pc
Pica (equal to 1/6 of an inch)
Absolute
30

Relative Units
https://www.w3schools.com/cssref/tryit.asp?filename=trycss _unit_rem
Unit
Description
Type
px
Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch).
Relative (CSS2) Absolute (CSS3)
em
Represents the calculated font-size of the element. When used for font sizes, the em unit is in relation to the font size of the parent.
Relative
%
A measure that is always relative to another value. The precise meaning of % varies depending upon which property it is being used.
Relative
ex
A rarely used relative measure that expresses size in relation to the x-height of an element’s font.
Relative
ch
Another rarely used relative measure; this one expresses size in relation to the width of the zero ("0") character of an element’s font.
Relative (CSS3 only)
rem
Stands for root em, which is the font size of the root element. Unlike em, which may be different for each element, the rem is constant throughout the document.
Relative (CSS3 only)
vw, vh
Stands for viewport width and viewport height. Both are percentage values (between 0 and 100) of the viewport (browser window). This allows an item to change size when the viewport is resized.
Relative (CSS3 only)
31

The concept of Cascade

Inheritance
• Many (but not all) CSS properties affect not only themselves but their descendants as well.
• Font, color, list, and text properties are inheritable.
• Layout, sizing, border, background and spacing properties are not.
• The most notable noninherited properties are related to block-style.
• It is possible to force an element to inherit value from its parent
element by using “inherit” as the value of the properties.
• Example: The following rule will make all paragraphs inherit the background properties from their parents:
p { background: inherit; }
33

How CSS Rules Cascade?
• If there are two or more rules that apply to the same element, it is important to understand which will take precedence.
• Last Rule
• If a selector has two rules, the later of the two will take precedence.
• Specificity
• If one selector is more specific than the others, the more specific rule will take
precedence.
• e.g., p b { } is more specific than p { }. p#intro { } is more specific than p { }.
• Important
• We can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element/selector.
34

How CSS Rules Cascade
35

The Box Model

CSS Box Model
• In CSS, all HTML elements exist within an element box.
• There are four boxes for each element. • Content
• The innermost box contains the content of the element.
Top
• Padding
• A clear area around the content, which is transparent.
• Border
• Bordersprovideawaytovisuallyseparateelements.
• Margin
• A clear area outside the border, which helps differentiate one element from another. It is transparent.
Bottom
Left
Right
37

Margins
• The margin property controls the gap between boxes of adjacent elements.
• We can set the width of the 4 margins:
• margin-bottom, margin-left, margin-right, margin-top
• Or setting the four in one declaration
• margin: top, right, bottom, left
• E.g.,margin:25px50px75px100px;
38

Margins
• Collapsing margins
• If one box sits on top of another, margins are collapsed , which means the larger of the two margins will be used and the smaller will be disregarded.
• However, horizontal margins are never collapsed.
39

Borders
• You can put borders around all four sides of an element, or just one, two, or three of the sides.
• There are a few features we can specify for the borders • border-style
• solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden • border-width
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
• border-color • border-radius
• For setting the radius of a rounded corner
• border-image
• Give the URL of the image to use as a border
border-radius: 15px 50px 30px 5px;
We can find more information on CSS border at https://www.w3schools.com/css/css_border.asp
40

Borders
We also have the long-form for setting each of the borders, e.g.,
p{
border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
}
41

Padding
• The padding property allows you to specify how much space should appear between the content of an element and its border.
• Similar to margins, we can specify the padding of each side, • padding-top, padding-right, padding-bottom, padding-left
• Or setting all four in one declaration • E.g., padding: 25px 50px 75px 100px;
42

Content’s Width and Height
• The width and height properties specify the size of the element’s content area.
• Only block-level elements and non-text inline elements such as images have a width and height that you can specify.
• By default, inline elements are only as wide as they need to be to display their contents.
43

Width and Height – Issue 1
• By default, the width and the height refer to the size of the content area. So the total size of an element is equal to not only its content area, but also to the sum of its padding, borders, and margins.
div {
width: 200px;
height: 100px;
padding: 5px;
border: 2px solid black; margin: 10px;
• Example:
}
• The total width of the element is:
• 10px + 2px + 5px + 200px + 5px + 2px + 10px = 234px
• The total height of the element is:
• 10px + 2px + 5px + 100px + 5px + 2px + 10px = 134px
44

Width and Height – Issue 1
• There is another way of representing the size of an element.
• CSS3 introduces the box-sizing property. By setting box-sizing:
border-box, we can get a different measurement.
div {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 5px;
border: 2px solid black;
margin: 10px;
}
True element width = 10px + 200px + 10px = 220px True element height = 10px + 100px + 10px = 120px
45

Width and Height – Issue 2
} 100px
p{
background-color: silver;
}
p{
background-color: silver; width: 200px;
height: 100px;
}
46

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
Width and Height – Issue 2
overflow: visible;
(default)
The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Visible - allows the content to be rendered outside the box.
Hidden – clips the content and does not appear beyond the box.
Scroll - the scrollbars will always be there, even if the content fits in the box.
Auto - The auto value allows the browser to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit into the box.
overflow: hidden;
overflow: scroll;
overflow: auto;
47

More Controls for the
Developers
48

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
CSS At-rules
• At-rules are CSS statements that instructs CSS how to behave.
• They begin with an at sign, '@' character, followed by an identifier
• Identifiers are the defined keywords by the CSS specification.
• Examples: • @charset
• @import
• @namespace • @media
• @supports •:
•:
49

CSS At-rules
@charset
• Example:
• The @charset at-rule specifies the character encoding used in the
style sheet.
• It must be the first element in the style sheet; however, a character set that is placed on the HTTP header will override any @charset rule.
• This at-rule is useful when using non-ASCII characters in some CSS properties, like the content property.
@charset "UTF-8";
50

CSS At-rules
@import
• Examples:
• This rule instructs the stylesheet to request and include an external CSS file as if the contents of that file were right where that line is.
• These rules must precede all other types of rules, except @charset rules.
• Can include list of comma-separated media queries after the URL.
• If the browser does not support any these queries, it does not load the linked resource.
@import 'global.css';
@import url("global.css");
@import url("global.css") screen;
51

CSS At-rules
@supports • Example:
@supports (display: grid)
{
div {
display: grid;
} }
• A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
• This is called a feature query.
• Can use the 'not' operator, 'and' operator, and 'or' operator to form the condition.
@supports (display: table-cell) and (display: list-item) {...}
52

https://www.quackit.com/css/functions/
CSS Functions
• CSS functions are used as a value for various CSS properties. • e.g., background-color: rgb(255,0,0);
• Here are some example functions:
Function Description
attr() Returns the value of an attribute of the selected element
calc() Allows you to perform calculations to determine CSS property values
hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)
linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges)
rgb() Defines colors using the Red-Green-Blue model (RGB)
var() Inserts the value of a custom property
53

CSS Variables
• Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by developers that contain specific values to be reused throughout a document.
• We can declare a custom property using this notation
• --fancy-color: pink;
• The variable name must begin with two dashes (--) and is case sensitive
• To use the custom property, we use the var() CSS function • color: var(--fancy-color);
54

CSS Variables
• Variables in CSS should be declared within a CSS selector that defines its scope.
• For a global scope you can use either the :root or the body selector.
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
55

CSS Layout
Display, Visibility, Floats, Positioning

Normal Flow
• Normal flow refers to how the browser will normally display block-level elements and inline elements from left to right and from top to bottom.
• The HTML is displayed in the exact order in which it appears in the source code.
57

Display Property
• The main methods of achieving page layout in CSS are all values of the display property.
• Everything in normal flow has a value of display, which has a default setting.
• E.g., for

, its display property is set to block; for , is set to inline.
• We can change this default display behavior by changing the display property of the element.
58

https://www.w3schools.com/cssref/tryit.asp?filename=trycss _display
Display Property
• The values this property can take are:
• Inline - This causes a block-level element to act like an inline element.
• Block - This causes an inline element to act like a block-level element.
• Inline-block
• This causes a block-level element to flow like an inline element, but it can be sized using width and height and maintains its block integrity like a block box. Therefore, it won't be broken across paragraph lines like an inline box.
• None - This hides an element from the page. No space is allocated to this element and its decendants.
• Flex - This makes an element to use the Flexbox model and becomes a flex container.
• Grid - This makes an element to use the Grid model and becomes a grid container.
• .. ..
59

Visibility Property
• The visibility property specifies whether or not an element is visible.
• This property can take two values: • hidden
• This hides the element. • visible
• This shows the element.
• The hidden element still takes up space on the page.
60

Float Property
• The float property allows you to place the element as far to the left or right of the containing element and change it from normal flow.
• The surrounding content floats around the floated element.
• The float property has four possible values: • left — Floats the element to the left.
• right — Floats the element to the right.
• none — Specifies no floating at all. [default]
• inherit — Inherited from the element's parent.
61

Float Property
62

Placing Elements Side-by-side
• A lot of layouts place boxes next to each other. The float property is commonly used to achieve this.
• When elements are floated, the height of the boxes can affect where the following elements sit.
63

• Setting the height of the paragraphs to be the same height as the tallest paragraph would solve this issue.
• E.g., height: 250px;
• We can apply the clear property to specify on which sides of an element other floating elements are not allowed to touch.
• Possible values of clear property: • none, left, right, both
• E.g., set

paragraph 4 ...

with clear: left;
https://i.cs.hku.hk/~atctam/c3322/CSS/float-clear.html
Placing Elements Side-by-side
64

Position Property
• CSS has the following positioning schemes that allow you to control the layout of a page:
• Normal flow (static positioning)
• Relative positioning
• This moves an element relative to the location it would occupy in the normal flow. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
• Absolute positioning
• This positions the element in relation to its containing element. The space it would have occupied is
released. Other elements will flow into the released space. • Fixed positioning
• This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element.
• Stickypositioning
• This makes an element act like static positioning until it hits a defined offset from the viewport, at
which point it acts like fixed positioning relative to its nearest scrolling ancestor.
• You specify the positioning scheme using the position property in CSS.
65

Relative positioning

position: relative;

An element with position: relative; is positioned relative to its
normal position:

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

66

This div element has position: relative;



position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

This div element has position: relative;

This div element has position: absolute;

This element follows the previous absolutely positioned element.

67

Fixed Positioning



position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:

This div element has position: fixed;



68



Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
69

I am sticky!

Flexbox
• Provide a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
• Give the container (parent element) the ability to alter its items’ (children) width/height (and order) to best fill the available space
Container
item
item
item
item
item
70

Flex Container
• A Flexible Layout must have a parent element with the display property set to flex.
• Direct child elements(s) of the flexible container automatically becomes flexible items.
section { display: flex;
}
71

Flex-Direction Property
• Flexbox provides a property called flex-direction that specifies what direction the flexbox children (items) are laid out in.
main axis
• flex-direction: row
• [default] Stacks the flex items horizontally (from left to right).
• flex-direction: row-reverse
• Stacks the flex items horizontally (but from right to left).
cross axis
72

cross axis
Flex-Direction Property
• flex-direction: column
• Stacks the flex items vertically (from top to bottom). axis
main
• flex-direction: column-reverse
• Stacks the flex items vertically (but from bottom to top).
73

https://i.cs.hku.hk/~atctam/c3322/CSS/flex.html
Flexbox Initial Setting
• Items display in a row (the flex-direction property's default is row). • The items start from the left (start) edge of the main axis.
• The items do not stretch on the main dimension, but can shrink.
• The items will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to nowrap.
74

https://i.cs.hku.hk/~atctam/c3322/CSS/flex-wrap.html
Flex-Wrap Property
• By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed.
• flex-wrap: nowrap
• [default] Specifies that the flex items will not wrap.
• flex-wrap: wrap
• Specifies that the flex items will wrap.
• flex-wrap: wrap-reverse
• Specifies that the flex items will wrap if necessary, in reverse order.
75

Justify-Content Property
• This defines the alignment along the main axis. • justify-content: flex-start
• [default] Aligns the flex items at the beginning of the container. • justify-content: flex-end
• Aligns the flex items at the end of the container. • justify-content: center
• Aligns the flex items at the center of the container. • justify-content: space-between
• Displays the flex items with space between the lines. • justify-content: space-around
• Displays the flex items with space before, between, and after the lines.
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-justify.html
76

Align-Items Property
• This defines how flex items are laid out along the cross axis on the current line.
• align-items: stretch
• [default] Stretches the flex items to fill the container. • align-items: center
• Aligns the flex items in the middle of the container. • align-items: flex-start
• Aligns the flex items at the top of the container. • align-items: flex-end
• Aligns the flex items at the bottom of the container.
• align-items: baseline
• Aligns the flex items such as their baselines aligns.
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-align-item.html
77

Align-Content Property
• This aligns a flex container's lines within when there is extra space in the cross axis.
• align-content:stretch
• [default] Stretches the flex lines to take up the remaining space. • align-content:space-between
• Displays the flex lines with equal space between them. • align-content:space-around
• Displays the flex lines with space before, between, and after them • align-content:center
• Displays the flex lines in the middle of the container. • align-content:flex-start
• Displays the flex lines at the start of the container.
• align-content:flex-end
• Displays the flex lines at the end of the container.
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-align-content.html
78

Control on Flex Items
• The flex item properties are: • Order
• By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-order.html
• align-self
• Specifies the alignment for the selected item
inside the flexible container.
• Overrides the default alignment set by the container's align-items property.
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-align-self.html
https://i.cs.hku.hk/~atctam/c3322/CSS/flex-flex.html
• flex-grow
• Specifies how much a flex item will grow to occupy the remaining space relative to the rest of the flex items
• e.g., flex-grow: 1; • flex-shrink
• Specifies how much a flex item will shrink relatively
• flex-basis
• Specifies the initial length of a flex item
• flex
• Shorthand property for flex-grow, flex-shrink, and flex-basis
79

Responsive Web Design

Responsive Web Design
• “Responsive web design” refers to the idea that your website should display equally well in everything from widescreen monitors to mobile phones.
• The ultimate goal of a responsive site is that it has one codebase of HTML, CSS, and JavaScript that can then be displayed on any device that wants to view it.
81

Responsive Design
• There are four key components that make responsive design work. • Setting viewports via the tag
• Customizing CSS for different viewports using media queries • Scaling images to the viewport size
• Flexible layouts
82

Set the Viewport
• To fit standard websites onto small screens, mobile browsers render the page on a canvas called the viewport and then shrink that viewport down to fit the width of the screen (device width).
• For example, on iPhones, Mobile Safari sets the viewport width to 980 pixels, so a web page is rendered as though it were on a desktop browser window set to 980 pixels wide. But that rendering gets shrunk down to 320 pixels wide when the iPhone is in portrait orientation, cramming a lot of information into a tiny space.
83

Set the Viewport
• The web page can tell the mobile browser the viewport size to use via the viewport element.
• Add the following meta element to the head of the HTML document: • This line tells the browser to set
• The width of the viewport equal to the width of the device screen (width=device- width).
• The initial-scale to the zoom level to 1 (100%), means that the page will be rendered at the size determined by the width attribute, and will not be zoomed in or out .

84

Set the
Viewport
Page with the viewport set
85

Media Queries
• The other key component of RWD is CSS media queries.
• A media query is a way to apply style rules based on the medium
that is displaying the file.
• You can use these queries to look at the capabilities of the device, and then
define CSS rules to target that device.
This prevents older browsers that do not support media queries from applying the specified styles.
86

Media Queries
/* Mobile Styles */
@media only screen and (max-width: 400px) { ... }
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) { ... }
/* Desktop Styles */
@media only screen and (min-width: 961px) { ... }
You can also have different stylesheets for different media, like this: 87

Media Queries
• Browser features you can examine with Media Queries
Feature
Description
width
Width of the viewport
height
Height of the viewport
aspect-ratio
The ratio between the width and the height of the viewport
max-width
The maximum width of the display area, such as a browser window
min-width
The minimum width of the display area, such as a browser window
orientation
Whether the device is portrait or landscape
color
The number of bits per color
We can find more information on Media Queries at https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
88

RWD – How to choose breakpoints
• Contemporary responsive sites will typically provide CSS rules for phone displays first, then tablets, then desktop monitors, an approach called progressive enhancement, in which a design is adapted to progressively more advanced devices.
• Create breakpoints based on content, never on specific devices, products, or brands.
• Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary.
89

RWD – How to choose breakpoints
90

Making Images Responsive
• Images can be difficult to make responsive.
• How do we provide images with appropriate dimensions to large screens, taking advantage of the screen space, but not waste bandwidth by sending those huge images to devices with small screens?
• Two common ways to deal with:
• Set the image width to something flexible, and save the image in a large file
size so that it can flex to fit large and small screens.
• Change the images that display depending upon the device that is viewing it.
91

Making Images Responsive
• Set the image width to something flexible.
• Set the max-width property of an image to 100%, the image
img {
max-width: 100%;
height: auto;
}
will be responsive and scale up and down when resizing the screen, but never scale up to be larger than its original size.
• Different Images for Different Devices
• Use media queries to determine which version of the images
to load.
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 400px and larger: */
@media only screen and (min-width: 400px) { body {
background-image: url('img_flowers.jpg'); }
}
92

Flexible Layouts
• One of the main problems faced by web designers is that the size of the screen used to view the page can vary quite a bit. Satisfying different users of different devices can be difficult.
• Most designers use the following approaches to dealing with the problems of screen size.
• Liquid (fluid) layout
• A liquid layout uses relative units such as percentages and ems, rather than using fixed units
such as pixels. • Adaptive layout
• An adaptive layout uses fixed units, but using media queries to adaptively change the sizes when the viewport is at certain widths.
• Responsive layout
• A responsive layout uses using both relative units and media queries. It takes the best from both liquid and adaptive layouts.
93

Reading
• MDN Web Docs
• Introduction to CSS
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
• Introduction to CSS Layout
• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction
94

References
• Some slides are borrowed from the book:
• Fundamentals of Web Development by Randy Connolly and Ricardo Hoar,
published by Pearson.
• A Complete Guide to Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Responsive Design, No 10. of HTML & CSS Is Hard
• https://internetingishard.com/html-and-css/responsive-design/
95