Session 05 - CSS, Part 3

Harvard Extension School  
Fall 2024

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. CSS Flexbox
  2. CSS Flexbox
  3. CSS Flexbox
  4. Working an Example
  5. Continuing an Example - Solar System
  6. A new example: WebAIM
  7. Fonts
  8. Flex and Simple Layouts
  9. CSS remedy, normalize, and reset

Session 05 - CSS, Part 3, slide1
CSS Flexbox, slide2
CSS Flexbox, slide3
CSS Flexbox, slide4
Working an Example, slide5
Some Notes about the Example, slide6
Continuing an Example - Solar System, slide7
A new example: WebAIM, slide8
Fonts, slide9
Font - Include through link element, slide10
Font Resources, slide11
Flex and Simple Layouts, slide12
CSS remedy, normalize, and reset, slide13

Presentation contains 13 slides

CSS Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

When to use it: Building simple page or content layouts without having use float or positioning.

CSS Flexbox

Flexbox

CSS Flexbox

Container and Items

  1. Set up your flex container and properties of the container.
  2. Set the "flex" properties on the items within your container.
Example 4.1 - Flex - Example 4.1
 
 <div id="f3container">
   <div class="box box1">1
   </div>
   <div class="box box2">2
   </div>
   <div class="box box3">3
   </div>
   <div class="box box4">4
   </div>
   <div class="box box5">5
   </div>
 </div>

In style element (<style>) within head element: 

#f3container {
  display: flex;
}
.box1, .box2, .box3, .box4, .box5 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 5em;
}
.box1 { background-color: lightpink;}
.box2 { background-color: lightsteelblue;}
.box3 { background-color: wheat;}
.box4 { background-color: plum;}
.box5 { background-color: palegreen;}
.box {
  padding: 2em;
  border: medium solid black;
  width: 3em;
}

Working an Example

solarsystem

Some Notes about the Example

Continuing an Example - Solar System

Example, continued

A new example: WebAIM

WebAIM - Web Accessibility in Mind

webaim screenshot

Fonts

font-family

CSS font-family property takes a comma-separated list of fonts,
and should always end with a generic font-family (e.g. serif, sans-serif, monospace).

body {
font-family: 'Merriweather Regular', 'Times New Roman', serif;
}

How are fonts defined?

Two approaches with fonts:

Note:

Font - Include through link element

Using a link element to include CSS with @font-face definitions is how some font hosting services recommend including their fonts. Google Fonts does this.

The server delivering the fonts does browser detection and delivers the CSS file with the appropriate font format.

Note that we are having using two Google Fonts -- Cabin Sketch and Cabin. And we also link to our own stylesheet (demo.css).

<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&amp;family=Cabin:wght@400;700&amp;display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="demo.css" />

Our CSS in demo.css:

h1,h2,h3,h4,h5,h6 {
font-family:"Cabin Sketch", sans-serif;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 2em;
}

body {
font-family: Cabin, serif;
}

web font

Note that nothing magical is going on here -- Google is simply returning CSS that uses @font-face with the font format appropriate for the browser making the request.

/* latin */
@font-face {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(https://fonts.gstatic.com/s/cabinsketch/v14/QGYpz_kZZAGCONcK2A4bGOj8mNhNy_r-Kw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Cabin Sketch Bold'), local('CabinSketch-Bold'), url(https://fonts.gstatic.com/s/cabinsketch/v14/QGY2z_kZZAGCONcK2A4bGOj0I_1Y5tjzAYOcFg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Font Resources

See Typefaces page on course site: Font Deck Cards - Typefaces

Finding or exploring fonts:

Font Pairing

Try some professional advice on font pairing (a web search on "font pairing" will get you started.)
Start with a font for headings and another font for body.

Flex and Simple Layouts

CSS remedy, normalize, and reset

Sometimes default browser behavior helps, sometimes it gets in the way. Three approaches are:

Three approaches:

Examples