# Session 04 - CSS, Part 2

Harvard Extension School
Fall 2021

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

### Topics

1. Anatomy of a CSS Rule
2. Box Model or Block Model
3. CSS Selectors
4. CSS Best Practices
5. CSS Rules and Specificity
6. CSS Colors
7. Lists
8. Fonts
9. CSS Flexbox and Grid
10. CSS Flexbox
11. Float

Session 04 - CSS, Part 2, slide1
Anatomy of a CSS Rule, slide2
CSS Mechanics - Binding Styles to Markup, slide3
Box Model or Block Model, slide4
Use "Inspect" to turn your browser into a web development tool!, slide5
CSS Selectors, slide6
Pseudo-Classes and Elements, slide7
Link Pseudo Classes, slide8
CSS Best Practices, slide9
CSS Rules and Specificity, slide10
CSS Selector Specificity, slide11
CSS Colors, slide12
RGB Color Space, slide13
HSL Color Space, slide14
Colorpicker, slide15
Colors — Exploring Colors and Themes and Palettes, slide16
Lists, slide17
Lists with different "markers", slide18
Lists that don't look like lists, slide19
Horizontal navigation: A more complete example, slide20
Horizontal Navigation - another example, slide21
Fonts, slide22
Font - Include through link element, slide23
Font Pairing, slide24
Font Resources, slide25
CSS Flexbox and Grid, slide26
CSS Flexbox, slide27
flex-basis, slide28
flex-grow and flex-shrink, slide29
Flex and Wrap, slide30
Flex and Simple Layouts, slide31
Float, slide32
Float, slide33
Float, slide34
Backgrounds - text replacement with an image, slide35

Presentation contains 35 slides

- img
- img
- img
- img
- img

## Anatomy of a CSS Rule

### CSS Rule

### Selector and Declarations

### Properties and Values

## CSS Mechanics - Binding Styles to Markup

Three ways to bind CSS rules to HTML markup:

- `style` attribute in element
- `<style>` element in HTML head
- External CSS document, through the `<link>` element in HTML head

## Box Model or Block Model

- margin
- border
- padding
- content

### A more detailed look:

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

## Use "Inspect" to turn your browser into a web development tool!

Example 4.1 - Margin, Padding, Border - Example 4.1<aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><p> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </p>aside { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; float: right; font-size: 16pt; } p { font-size: 18pt; line-height: 1.5; }

- Markup
- Style

     <aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania. </aside>
     <p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
     </p>

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

    aside {
            width: 33%;
            text-align: left;
            font-size: 0.75em;
            color: #006600;
            background-color: #fefecd;
            padding: 0.5em;
            margin: 0.75em;
            border-width: thin;
            border-style: dotted;
            border-color: #900;
            float: right;
            font-size: 16pt;
           }
    p {
           font-size: 18pt;
           line-height: 1.5;
         }

## CSS Selectors

- element, class, id

  -     p {/* style rules */}

  -     p.classname {/* style rules */}

  -     .classname {/* style rules */}

  -     #idname {/* style rules */}

- descendant

  -     thead th {/* style rules */}

- wildcard

  -     * {/* style rules */}

- pseudo-classes and pseudo-elements

  -     a:hover {/* style rules */}

  -     input:focus {/* style rules */}

  -     li::first-child {/* style rules */}

- attribute value

  -     input[type="submit"] {/* style rules */}

- child

  -     body > p {/* style rules */}

### CSS Comments

Note the use of comments in CSS -- they start with `/*` and end with `*/`. Comments can be on a single line or multi-line.

    p.vibrate {
            /* These paragraphs will vibrate off the page! */
            color: red;
            background-color: blue;
          }
          p.subtle {
            /* These paragraphs will
               be subtle and
               probably hard to read */
            color: white;
            background-color: gray;
          }

## Pseudo-Classes and Elements

CSS defines pseudo-classes and pseudo-elements.
Examples are `p::first-line`, `li:first-child`, and `input:focus`

Pseudo-Classes (single ":") | Pseudo-Elements (double "::")
--- | ---
first-child link visited hover active focus lang | first-line first-letter before after

## Link Pseudo Classes

- a:link
- a:visited
- a:hover
- a:active

Use the "link-visited-hover-active" or "LVHA" ordering (some like to remember this by "LoVe HAte").

Example 4.2 - a pseudo-classes (link, visited, hover, active)) - Example 4.2<nav class="site"><ul><li><a href="#about-us">About Us</a></li><li><a href="#courses">Courses</a></li><li><a href="#registration">Registration</a></li><li><a href="#degrees-certificates">Degrees & Certificates</a></li><li><a href="#distance-education">Distance Education</a></li><li><a href="#exams-grades-policies">Exams, Grades, & Policies</a></li><li><a href="#resources">Resources</a></li><li><a href="#news-hub">News Hub</a></li></ul></nav>nav a:link { text-decoration: none; color: blue; background-color: white; } nav a:visited { text-decoration: none; color: #66f; /* lighter blue */ background-color: #ccc; /* grey */ } nav a:hover { text-decoration: none; color: white; background-color: blue; } nav a:active { text-decoration: underline; color: red; background-color: yellow; } /** Some tweaks to make the list look more like a sidebar navigation. Not important for to illustrate the a pseudo classes */ nav.site ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;} a {margin: 0.25em; padding: 0.25em; display: block;}

- Markup
- Style
- Screenshot

     <nav class="site">
       <ul>
         <li>
           <a href="#about-us">About Us       </a>
         </li>
         <li>
           <a href="#courses">Courses       </a>
         </li>
         <li>
           <a href="#registration">Registration       </a>
         </li>
         <li>
           <a href="#degrees-certificates">Degrees & Certificates       </a>
         </li>
         <li>
           <a href="#distance-education">Distance Education       </a>
         </li>
         <li>
           <a href="#exams-grades-policies">Exams, Grades, & Policies       </a>
         </li>
         <li>
           <a href="#resources">Resources       </a>
         </li>
         <li>
           <a href="#news-hub">News Hub       </a>
         </li>   </ul> </nav>

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

    nav a:link {
              text-decoration: none;
              color: blue;
              background-color: white;
              }
          nav a:visited {
              text-decoration: none;
              color: #66f;            /* lighter blue */
              background-color: #ccc; /* grey */
          }
          nav a:hover {
              text-decoration: none;
              color: white;
              background-color: blue;
          }
          nav a:active {
              text-decoration: underline;
              color: red;
              background-color: yellow;
          }
          /**
            Some tweaks to make the list
              look more like a sidebar
              navigation.  Not important for
              to illustrate the
              a pseudo classes
          */
          nav.site ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;}
          a {margin: 0.25em; padding: 0.25em; display: block;}

## CSS Best Practices

### Use semantic "class" and "id" values

You can choose `class` and `id` values when authoring your CSS and HTML. A good rule is to create "logical" `class` and `id` values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names | Poor Class Names
--- | ---
pageheader pagefooter globalnav gallery aside callout warn info error | blueborder rightcolumn rightnav thinborder redbold center

Choosing class and id names appropriately will help with:

- evolution
  Your `#rightnav` may very well become navigation positioned on the left side or the top.
  Your `.redbold` may very be changed to another color or background entirely.
- specificity and semantics
  If you have a `.dottedborder` class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

## CSS Rules and Specificity

See: Calculating a selector's specificity.

Image from Flickr user Cayusa, used under Creative Commons license.

### Stylesheet Origin

- author stylesheet
- reader (user) stylesheet
- browser (user agent) stylesheet

### Specificity of Selector

- style attribute
- count "id" attributes
- count number of other attributes ("class")
- count element names

### Order

- last occurence has higher specificity

  `@import`-ed stylesheets come before rules in the importing sheet.

## CSS Selector Specificity

Specificity is expressed in a form of a list of four numbers: `(a,b,c,d)`

1. inline style
2. id
3. class, pseudo-class and attributes
4. element and pseudo-elements

Start comparing at "a", if equal go to "b", etc.

              nav li {...}                     /* (0,0,0,2) */
              nav.primary {...}                /* (0,0,1,1) */
              nav.primary li {...}             /* (0,0,1,2) */
              nav.primary li:first-child {...} /* (0,0,2,2) */
              nav.primary li.getinfo {...}     /* (0,0,2,2) */
              #globalnav {...}                 /* (0,1,0,0) */

And for a fun take on CSS Specificity, take a look at CSS SpeciFISHity

## CSS Colors

### Name

Some 'original' color names in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

There are also Extended Color Keywords for CSS3, which are the same as SVG 1.0 colors (SVG is a type of image file format).

See also: CSS Tricks: Named Colors and Hex Equivalents

But, in general, avoid colors for real work!

## RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

- decimal numbers (0 to 255)
- hexadecimal numbers (00 to ff)
- percentages (0 to 100%)

The following are all equivalent ways of defining a shade of (Tennessee) orange:

rgb(255,130,0) rgb(100%,51%,0%) #ff8200 ff = hexadecimal value for red 82 = hexadecimal value for green 00 = hexadecimal value for blue |

Select Color:
Hex value:

## HSL Color Space

Hue, Saturation, Lightness (HSL) is another way to specify color value. It is based on a cylindrical model of color.

- Hue - 0 to 360. Degrees on the color wheel
  - 0 = red
    120 = green
    240 = blue
- Saturation 0% to 100%. Intensity of the color.

  Experiment with different Saturation and Lightness variations

- Lightness 0% to 100%. Relative degree of white (>50% to 100%) or black (0% to < 50%) mixed in with the color.

  Experiment with different Saturation and Lightness variations

For more information see:

- CSS3 Color - HSL examples
- Wikipedia: HSL and HSV

In CSS3, you can use HSL values (e.g. `hsl(29,100%,66%)`)

### Same Color, Expressed differently

Example 4.3 - Background Color - Example 4.3<div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(100%,66%,33%) </div><div style="background-color: #ffa854; padding: 1em; margin: 1em; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>#ffa854 </div><div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(255,168,84) </div><div style="background-color: hsl(29,100%,66%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>hsl(29,100%,66%) </div>

- Markup
- Display

     <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    rgb(100%,66%,33%)
     </div>
     <div style="background-color: #ffa854; padding: 1em; margin: 1em; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    #ffa854
     </div>
     <div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    rgb(255,168,84)
     </div>
     <div style="background-color: hsl(29,100%,66%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    hsl(29,100%,66%)
     </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(100%,66%,33%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
#ffa854
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(255,168,84)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
hsl(29,100%,66%)

## Colorpicker

- MDN Color picker tool
- iro.js Demo
- DIY - `<input type="color" />`
Color Picker

Select Color:
Hex value:

### Colorzilla

Colorzilla - colorpicker browser extension

## Colors — Exploring Colors and Themes and Palettes

- Adobe Color CC
  - Explore Color Themes
- coolors by Fabrizio Bianchi
- Paletton.com
- WebFX Color Schemes

## Lists

- list-style-type
  - disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
- list-style-image
- list-style-position
- list-style
  a shorthand property

### Ordered List

An ordered list (data from: http://fs.ncaa.org/Docs/stats/m_basketball_RB/2020/Coaches.pdf):

Example 4.4 - Ordered List: default - Example 4.4<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ol><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ol>

- Markup
- Display

     <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
     <ol>
       <li>Mark Few
       </li>
       <li>Roy Williams
       </li>
       <li>John Calipari
       </li>
       <li>Mike Krzyzewski
       </li>
       <li>Bill Self
       </li>
       <li>Sean Miller
       </li>
       <li>Tony Bennett
       </li>
       <li>Ray Harper
       </li>
       <li>Tom Izzo
       </li>
       <li>Bruce Pearl
       </li>
     </ol>

Winningest Active Coaches, Division I NCAA Men's Basketball

1. Mark Few
2. Roy Williams
3. John Calipari
4. Mike Krzyzewski
5. Bill Self
6. Sean Miller
7. Tony Bennett
8. Ray Harper
9. Tom Izzo
10. Bruce Pearl

### Ordered List

An ordered list:

Example 4.5 - Ordered List: upper-roman - Example 4.5<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ol class="basketball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ol>ol.basketball { list-style: upper-roman; }

- Markup
- Style
- Display

     <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
     <ol class="basketball">
       <li>Mark Few
       </li>
       <li>Roy Williams
       </li>
       <li>John Calipari
       </li>
       <li>Mike Krzyzewski
       </li>
       <li>Bill Self
       </li>
       <li>Sean Miller
       </li>
       <li>Tony Bennett
       </li>
       <li>Ray Harper
       </li>
       <li>Tom Izzo
       </li>
       <li>Bruce Pearl
       </li>
     </ol>

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

    ol.basketball {
         list-style: upper-roman;
      }

Winningest Active Coaches, Division I NCAA Men's Basketball

1. Mark Few
2. Roy Williams
3. John Calipari
4. Mike Krzyzewski
5. Bill Self
6. Sean Miller
7. Tony Bennett
8. Ray Harper
9. Tom Izzo
10. Bruce Pearl

## Lists with different "markers"

### Content defined in CSS

An unordered list controlled by CSS, using "li:before":

Example 4.6 - List with unicode symbol before - Example 4.6<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="bball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ul>ul.bball { list-style: none; } ul.bball li:before { content: '🏀 '; }

- Markup
- Style
- Display

     <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
     <ul class="bball">
       <li>Mark Few
       </li>
       <li>Roy Williams
       </li>
       <li>John Calipari
       </li>
       <li>Mike Krzyzewski
       </li>
       <li>Bill Self
       </li>
       <li>Sean Miller
       </li>
       <li>Tony Bennett
       </li>
       <li>Ray Harper
       </li>
       <li>Tom Izzo
       </li>
       <li>Bruce Pearl
       </li> </ul>

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

    ul.bball { list-style: none; }
        ul.bball li:before {
            content: '🏀   ';
        }

Winningest Active Coaches, Division I NCAA Men's Basketball

- Mark Few
- Roy Williams
- John Calipari
- Mike Krzyzewski
- Bill Self
- Sean Miller
- Tony Bennett
- Ray Harper
- Tom Izzo
- Bruce Pearl

### An image

And now, let's add a basketball icon as a list bullet (image is at images/basketball-icon25.png,

An unordered list controlled by CSS:

Example 4.7 - List with images as bullets - Example 4.7<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="basketball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Sean Miller</li><li>Tony Bennett</li><li>Ray Harper</li><li>Tom Izzo</li><li>Bruce Pearl</li></ul>ul.basketball { list-style-image: url('http://cscie12.dce.harvard.edu/resources/images/basketball-icon25.png'); }

- Markup
- Style
- Display

     <strong>Winningest Active Coaches, Division I NCAA Men's Basketball </strong>
     <ul class="basketball">
       <li>Mark Few
       </li>
       <li>Roy Williams
       </li>
       <li>John Calipari
       </li>
       <li>Mike Krzyzewski
       </li>
       <li>Bill Self
       </li>
       <li>Sean Miller
       </li>
       <li>Tony Bennett
       </li>
       <li>Ray Harper
       </li>
       <li>Tom Izzo
       </li>
       <li>Bruce Pearl
       </li> </ul>

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

    ul.basketball {
          list-style-image: url('images/basketball-icon25.png');
      }

Winningest Active Coaches, Division I NCAA Men's Basketball

- Mark Few
- Roy Williams
- John Calipari
- Mike Krzyzewski
- Bill Self
- Sean Miller
- Tony Bennett
- Ray Harper
- Tom Izzo
- Bruce Pearl

## Lists that don't look like lists

Key points:

- remove list styling
- change from "block" to "inline" display

`ul { list-style: none; }`
`li { display: inline; }`

### list-style: none

Example 4.8 - list-style: none; - Example 4.8<ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; }

- Markup
- Style
- Screenshot

     <ul id="extglobalnav">
       <li>About
       </li>
       <li>Calendar
       </li>
       <li>Courses
       </li>
       <li>Contact Us
       </li>
       <li>Faculty Directory
       </li>
       <li>Login
       </li> </ul>

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

    ul#extglobalnav {
        list-style: none;
      }

### li {display: inline;}

Example 4.9 - list-style: none; - Example 4.9<ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; padding-left: 0; } ul#extglobalnav li { display: inline; padding-left: 2em; }

- Markup
- Style
- Screenshot

     <ul id="extglobalnav">
       <li>About
       </li>
       <li>Calendar
       </li>
       <li>Courses
       </li>
       <li>Contact Us
       </li>
       <li>Faculty Directory
       </li>
       <li>Login
       </li> </ul>

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

    ul#extglobalnav {
        list-style: none;
        padding-left: 0;
      }
      ul#extglobalnav li {
        display: inline;
        padding-left: 2em;
      }

## Horizontal navigation: A more complete example

Example 4.10 - list-style: none; - Example 4.10<nav><ul id="extglobalnav"><li><a href="#">About</a></li><li><a href="#">Calendar</a></li><li><a href="#">For Degree Candidates</a></li><li><a href="#">Courses</a></li><li><a href="#">Faculty Directory</a></li><li class="login"><a href="#">Login</a></li></ul></nav>#extglobalnav { list-style: none; padding-left: 0; float: right; margin-right: 2em; font-family: Arial Narrow, sans-serif; } #extglobalnav li { display: inline; padding-left: 2em; font-weight: bold; } #extglobalnav a:link, #extglobalnav a:visited, #extglobalnav a:active { color: #4d84c4; text-decoration: none; } #extglobalnav a:hover { text-decoration: underline; color: #990000; } #extglobalnav li.login { padding: 0.3em 1em; border: 3px solid #4d84c4; margin-left: 2em; }

- Markup
- Style
- Screenshot

     <nav>
       <ul id="extglobalnav">
         <li>
           <a href="#">About       </a>
         </li>
         <li>
           <a href="#">Calendar       </a>
         </li>
         <li>
           <a href="#">For Degree Candidates       </a>
         </li>
         <li>
           <a href="#">Courses       </a>
         </li>
         <li>
           <a href="#">Faculty Directory       </a>
         </li>
         <li class="login">
           <a href="#">Login       </a>
         </li>   </ul> </nav>

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

    #extglobalnav {
       list-style: none;
       padding-left: 0;
       float: right;
       margin-right: 2em;
       font-family: Arial Narrow, sans-serif;
      }
      #extglobalnav li {
       display: inline;
       padding-left: 2em;
       font-weight: bold;
      }
      #extglobalnav a:link,
      #extglobalnav a:visited,

      #extglobalnav a:active
      {
        color: #4d84c4;
        text-decoration: none;
      }
      #extglobalnav a:hover {
        text-decoration: underline;
        color: #990000;
      }
      #extglobalnav li.login {
        padding: 0.3em 1em;
        border: 3px solid #4d84c4;
        margin-left: 2em;
      }

## Horizontal Navigation - another example

Key points:

- remove list styling
- change from "block" to "inline" (or "inline-block") display

Example 4.11 - simple list - Example 4.11<ul><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>

- Markup
- Display

     <ul>
       <li>Academics
       </li>
       <li>Tuition and Enrollment
       </li>
       <li>Resources and Policies
       </li>
       <li>Inside Extension
       </li> </ul>

- Academics
- Tuition and Enrollment
- Resources and Policies
- Inside Extension

Example 4.12 - inline list items - Example 4.12<nav><ul id="extnav"><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul></nav>ul#extnav { list-style: none; } ul#extnav li { display: inline-block; }

- Markup
- Style
- Screenshot

     <nav>
       <ul id="extnav">
         <li>Academics
         </li>
         <li>Tuition and Enrollment
         </li>
         <li>Resources and Policies
         </li>
         <li>Inside Extension
         </li>   </ul> </nav>

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

    ul#extnav {
      list-style: none;
    }
    ul#extnav li {
      display: inline-block;
    }

Note the labeling of the current area of the site the user is in with the "active" class.

Example 4.13 - Inline List Items - Example 4.13<nav><ul id="extnav"><li><a href="#">Academics</a></li><li class="active"><a href="#">Tuition and Enrollment</a></li><li><a href="#">Resources and Policies</a></li><li><a href="#">Inside Extension</a></li></ul></nav>* { background-color: white; } ul#extnav { list-style: none; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #1e1e1e; background-color: white; margin-top: 1em; } ul#extnav li { display: inline; margin: 0; padding: 0; } ul#extnav a { padding: 0.5em; margin-right: 0; background-color: white; border-right: 1px solid black; } ul#extnav li:last-child a { border-style: none; } ul#extnav a:link, ul#extnav a:visited { color: black; text-decoration: none; } ul#extnav a:hover { color: #a51c30; text-decoration: underline; } ul#extnav .active { background-color: #f5f5f8;} ul#extnav .active a:link, ul#extnav .active a:visited, ul#extnav .active a:hover, ul#extnav .active a:active { background-color: #f5f5f8; color: #a51c30; text-decoration: none; }

- Markup
- Style
- Screenshot

     <nav>
       <ul id="extnav">
         <li>
           <a href="#">Academics       </a>
         </li>
         <li class="active">
           <a href="#">Tuition and Enrollment       </a>
         </li>
         <li>
           <a href="#">Resources and Policies       </a>
         </li>
         <li>
           <a href="#">Inside Extension       </a>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example13.css"/>

In example13.css

    * {
      background-color: white;
    }

    ul#extnav {
      list-style: none;
      font-weight: bold;
      font-family: Arial, Verdana, Helvetica, sans-serif;
      color: #1e1e1e;
      background-color: white;
      margin-top: 1em;
    }

    ul#extnav li {
      display: inline;
      margin: 0;
      padding: 0;
    }
    ul#extnav a {
      padding: 0.5em;
      margin-right: 0;
      background-color: white;
      border-right: 1px solid black;
    }
    ul#extnav li:last-child a {
      border-style: none;
    }
    ul#extnav a:link,
    ul#extnav a:visited {
      color: black;
      text-decoration: none;
    }

    ul#extnav a:hover {
      color: #a51c30;
      text-decoration: underline;
    }
    ul#extnav .active {  background-color: #f5f5f8;}
    ul#extnav .active a:link,
    ul#extnav .active a:visited,
    ul#extnav .active a:hover,
    ul#extnav .active a:active {
      background-color: #f5f5f8;
      color: #a51c30;
      text-decoration: none;
    }

## Fonts

- MDN: Fundamental text and font styling

### 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:

- Rely on system fonts
- Use web fonts to deliver font definition as part of the resources loaded by a page
  - load the font definition
  - use in "font-family" CSS property

Note:

- hosted fonts or our fonts
- multiple ways of loading fonts
  - `link` element in `head` of HTML ← use this!
  - `@import` or `@font-face` in CSS

## 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.

- Webfont through "link" element - Cabin Sketch

Note that we are having using two Google Fonts -- Cabin Sketch and Cabin.

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

Our 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;
    }

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 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.

## Font Resources

Finding or exploring fonts:

- Google Fonts
- Adobe Typekit
- Font Squirrel
- typography.com webfonts

## CSS Flexbox and Grid

### Flexbox

- One primary axis
- Basic layouts
- Easier than "Grid"

### Grid

- Two axes
- Layouts and more complex layouts
- Overlapping items

## CSS Flexbox

- MDN: Basic Concepts of Flexbox
- CSS Tricks: A complete Guide to Flexbox

### Container and Items

1. Set up your flex container
2. Set the "flex" properties on the items within your container

Example 4.14 - Flex - Example 4.14<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>#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; }

- Markup
- Style
- Display

     <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;
    }

1
2
3
4
5

## flex-basis

Example 4.15 - Flex - Example 4.15<div id="f4container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f4container { display: flex; } .box1 { flex-basis: 15%; background-color: lightpink; } .box2 { flex-basis: 25%; background-color: lightsteelblue; } .box3 { flex-basis: 50%; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f4container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
     </div>

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

    #f4container {
      display: flex;
    }
    .box1 {
      flex-basis: 15%;
      background-color: lightpink;
    }
    .box2 {
      flex-basis: 25%;
      background-color: lightsteelblue;
    }
    .box3 {
      flex-basis: 50%;
      background-color: wheat;
    }
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3

## flex-grow and flex-shrink

Example 4.16 - Flex - Example 4.16<div id="f5container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div> #f5container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; background-color: lightpink; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; background-color: lightsteelblue; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f5container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
     </div>

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

    #f5container {
      display: flex;
    }
    .box1 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 200px;
      background-color: lightpink;
    }
    .box2 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 100px;
      background-color: lightsteelblue;
    }
    .box3 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 500px;
      background-color: wheat;
    }
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3

## Flex and Wrap

Example 4.17 - Flex Wrap - Example 4.17<div id="f6container"><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 class="box box6">6</div></div>#f6container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: linen; border: thin solid black; } .box1, .box2, .box3, .box4, .box5, .box6 { flex-grow: 0; flex-shrink: 0; flex-basis: 28%; box-sizing: border-box; margin: 1rem 0; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box6 { background-color: turquoise;} .box { padding: 2em; border: medium solid black; }

- Markup
- Style
- Display

     <div id="f6container">
       <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 class="box box6">6
       </div>
     </div>

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

    #f6container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      background-color: linen;
      border: thin solid black;
    }
    .box1, .box2, .box3, .box4, .box5, .box6 {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 28%;
      box-sizing: border-box;
      margin: 1rem 0;
    }
    .box1 { background-color: lightpink;}
    .box2 { background-color: lightsteelblue;}
    .box3 { background-color: wheat;}
    .box4 { background-color: plum;}
    .box5 { background-color: palegreen;}
    .box6 { background-color: turquoise;}
    .box {
      padding: 2em;
      border: medium solid black;
    }

1
2
3
4
5
6

## Flex and Simple Layouts

- Layout with Flex - 1
- Layout with Flex - 2

## Float

Float takes the block out of the flow of the containing block and moves it (right or left) within the containing block.

Example 4.18 - Margin, Padding, Border - Example 4.18<aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><p> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </p>aside { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; float: right; font-size: 16pt; } p { font-size: 18pt; line-height: 1.5; }

- Markup
- Style

     <aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania. </aside>
     <p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
     </p>

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

    aside {
            width: 33%;
            text-align: left;
            font-size: 0.75em;
            color: #006600;
            background-color: #fefecd;
            padding: 0.5em;
            margin: 0.75em;
            border-width: thin;
            border-style: dotted;
            border-color: #900;
            float: right;
            font-size: 16pt;
           }
    p {
           font-size: 18pt;
           line-height: 1.5;
         }

## Float

Example 4.19 - float: none; - Example 4.19<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: none; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

     <p>
       <img src="images/777-t-1.jpg" alt="777"/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
     </p>

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

    img {
      float: none;
      border: thin dotted black;
      padding: 5px;
      }

Example 4.20 - float: right; - Example 4.20<p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: right; clear: none; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

     <p>
       <img src="images/777-t-1.jpg" alt="777"/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
     </p>

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

    img {
      float: right;
      clear: none;
      border: thin dotted black;
      padding: 5px;
      }

## Float

### Float: right

Example 4.21 - float: right; - Example 4.21<div><aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</aside><p> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </p></div>aside { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }

- Markup
- Style

     <div>
       <aside>Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.   </aside>
       <p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
       </p>
     </div>

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

    aside {
            float: right;
            width: 33%;
            text-align: left;
            font-size: 0.75em;
            color: #006600;
            background-color: #fefecd;
            padding: 0.5em;
            margin: 0.75em;
            border-width: thin;
            border-style: dotted;
            border-color: #900;
           }
    body {
            font-size: large;
            line-height: 1.5;
         }

### Float: left

Example 4.22 - float: left; - Example 4.22<div><div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.</div><div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div></div>.about { float: left; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background-color: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }

- Markup
- Style

     <div>
       <div class="about">Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence was ratified by the Continental Congress on July 4 in Philadelphia, Pennsylvania.
       </div>
       <div>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
       </div>
     </div>

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

    .about {
            float: left;
            width: 33%;
            text-align: left;
            font-size: 0.75em;
            color: #006600;
            background-color: #fefecd;
            padding: 0.5em;
            margin: 0.75em;
            border-width: thin;
            border-style: dotted;
            border-color: #900;
           }
    body {
            font-size: large;
            line-height: 1.5;
         }

## Backgrounds - text replacement with an image

Sometimes a wordmark and logo are the title or banner.

Use background-image and then a negative indent to remove the text from the visual part of the page.

h1 text replacement with an images

    h1 {
      height: 200px;
      width: 250px;
      text-indent: -3000px;
      border: solid 1px #000;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('images/wordmark.png');
    }