1 of 23

CSS Wrap-Up

CSCI 344: Advanced Web Technologies

Spring 2023

1

2 of 23

Announcements

  1. Tutorial 3: due tonight
  2. HW2: due next Monday at 11:59PM
  3. Tip for learning Flex & Grid:
    1. Spend 30 mins on the games (CSS Grid Garden & Flexbox Froggy)
    2. Then apply what you learned to the Tutorial exercises
  4. We’ll be starting JavaScript on Wednesday
    • I’ve curated are a bunch of reference materials for you to consult. We’ll process these in the coming weeks!

2

3 of 23

Outline

  • Intro to media queries (for mobile layouts)
  • Fixed positioning
  • Wave extension for testing accessibility
  • Approach to tackling HW2 layout

3

4 of 23

Outline

  • Intro to media queries (for mobile layouts)
  • Fixed positioning
  • Wave extension for testing accessibility
  • Approach to tackling HW2 layout

4

5 of 23

Using Media Queries

Media queries allow you to set CSS style rules based on the type of media and the device dimensions of the viewport. Example:

6 of 23

“Turning On” Media Queries in your HTML

In order to make sure that media queries are honored, you need to include a meta tag in the <head></head> of your html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7 of 23

Approach

  1. Create all of your CSS style blocks as you normally would.
  2. Then, if there are any styles that you would like to take precedence when the screen becomes smaller, put those styles inside a media query.

7

8 of 23

Practice: 01-media-query

8

Tablet or Mobile

Desktop

9 of 23

Practice: 02-media-query-with-grid

​

9

10 of 23

Practice: 02-media-query-with-grid

​

10

11 of 23

Practice: 02-media-query-with-grid

​

11

12 of 23

12

13 of 23

Outline

  • Intro to media queries (for mobile layouts)
  • Fixed positioning
  • Wave extension for testing accessibility
  • Approach to tackling HW2 layout

13

14 of 23

“Fixing” areas of your interface

If you want to fix an area of your HTML page – say, a navigation bar or side panel – you will use: position: fixed; A few notes:

  1. If you set the position to fixed, you also have to set some additional rules to specify the dimensions and location of your HTML element, including:
    1. top
    2. left
    3. width
  2. Setting a fixed position excludes the HTML element from the regular flow of the web page.
    • Other elements will be occluded by the fixed element.
    • To fix, set a margin to shift remaining elements

14

15 of 23

Exercises

Open 03-fixed positioning, and update the CSS as follows:

  • The header should be fixed to the top and span the entire width of the screen.
  • The main region should not be occluded by the navigation bar.
  • Bonus [practice with flex / grid]:
    • within the header, the logo should be positioned to the left and the navigation section should be positioned to the right.

15

16 of 23

Outline

  • Intro to media queries (for mobile layouts)
  • Fixed positioning
  • Wave extension for testing accessibility
  • Approach to tackling HW2 layout

16

17 of 23

Wave Extension

One of your tasks for HW2 is to do some basic accessibility checks. One way to do this is to install the Wave browser extension

  • See the course accessibility resources. A few good articles to get you started:
  • Demo (course website)

17

18 of 23

Outline

  • Intro to media queries (for mobile layouts)
  • Fixed positioning
  • Wave extension for testing accessibility
  • Approach to tackling HW2 layout

18

19 of 23

19

20 of 23

20

header

main

​

​

​

​

​

​

​

​

​

​

​

​

​

​

section

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Aside

21 of 23

21

22 of 23

22

body

main

header

nav

h1

aside

.news-feed

  • Green sections are fixed layouts
  • News feed needs some margin so the content isn’t occluded

23 of 23

Approach to tackling HW2 Layout

High-level approach

  1. Fix the top-level header and aside elements using position: fixed;
  2. Give the main panel a right margin (e.g., margin-right: 40vw;).
  3. In the mobile view, hide the aside (display: none;) and unset the margin from the main panel (e.g., margin-right: 0;).
  4. Style child elements as usual using flex / grid.

23