03. Box Model + Useful Snippets

Introduction

Last week we went over some basic concepts of CSS and HTML. Using classes and ids and then "selecting" them via CSS. We additionally talked about dynamic selection methods like using spaces, the plus symbol (+) as well as "::nth-child()." We'll now look at some concepts within CSS. The box model, as well as units you can use in CSS.

Homework

Use snippets to create 3 html pages that link together
Add naturalistic commentary throughout the
Think of anything else you may want to emulate

The Box Model

Every element in HTML is a box.

Even a paragraph.

Even an image.

Even a heading.

Each box has four layers:

<!--
+---------------------------+
|        margin             |
|  +---------------------+  |
|  |      border         |  |
|  |  +---------------+  |  |
|  |  |    padding    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+
-->

1. Content

The actual text, image, or element inside.

2. Padding

Space inside the element, between content and border.

div 
{
  padding: 20px;
}

3. Border

The visible edge around the padding.

div 
{
  border: 2px solid black;
}

4. Margin

Space outside the element.

div
{
  margin: 40px;
}

Units in CSS

CSS uses many units. You should understand the difference between absolute and relative units.

Absolute Units (pixels)

div 
{
  width: 300px;
}

Pixels are predictable. They do not scale based on font size, and are based on the pixels of the display you are using.

Relative Units

These scale based on something else. That is to say, they are relative to another factor.

unit	what it does
em	scale element relative to the font size of the element’s parent. (em here comes from the "em square" of the font).
rem	scale relative to the font size of the root (`html`) element.
%	scale percentage-wise relative to the size of the parent element.
vw and vh	scale the element percentage-wise relative to the viewport. (vw is "viewport width" and vh is "viewport height")

Some Examples

Here the font size of a paragraph will be double the font size set in HTML

html 
{
  font-size: 16px;
}

p 
{
  font-size: 2rem; /* 32px */
}

here the div will be half as big as the element that contains it.

div 
{
  width: 50%;
}

Here the div will be the full height of the viewport and half of its width.

div
{
  width : 50vw;
  height: 100vh;
}

When to Use What?

Layout width → %, vw
Typography → rem
Fine control → px

If you are looking up code examples online, more contemporary examples will favor relative units as they scale to different environments (mobile, screen, etc.) more effectively, and dynamically.

How to Include Other Fonts

By default, your website uses system fonts. These tend to be considered "ugly" or at least they have a residue of "defaultness" based on our experience of the web. Presumably, you might want to use custom fonts. In order to do this, you must link or import them properly.

Option 1: Google Fonts (Easy Method)

When you look at Google Fonts, you'll find the option to link to the font. You just have to add it in your HTML <head>:

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

Then in CSS:

body 
{
  font-family: 'Inter', sans-serif;
}

Option 2: Local Font Files

If you download a .woff or .woff2 file. The below code assumes you have a folder called fonts and a font called "MyFont.woff2"

/* do this first */
@font-face 
{
  font-family: 'MyFont';
  src        : url('fonts/MyFont.woff2') format('woff2');
}

/* now you have access to "MyFont" 
throughout your css */
body 
{
  font-family: 'MyFont';
}

(Very Simple) CSS Animation

CSS can animate properties over time. You can do this by using transition and @keyframes

Transitions (Simplest)

button 
{
  background: black;
  color     : white;
  transition: background 0.3s ease;
}

button:hover 
{
  background: red;
}

When hovered, it smoothly changes.

Keyframe Animation

@keyframes float 
{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.box 
{
  animation: float 2s infinite ease-in-out;
}

This makes the element move up and down forever.

Absolute vs Relative vs Fixed Positioning

position: relative;

The element stays in the normal document flow, but you can nudge it using top, left, etc.

div 
{
  position: relative;
  top     : 10px;
}

It moves visually, but still takes up its original space.

position: absolute;

Removes the element from normal flow.

It positions relative to the nearest positioned ancestor.

.parent 
{
  position: relative;
}

.child 
{
  position: absolute;
  top     : 0;
  right   : 0;
}

If no parent has position set, it positions relative to the page.

position: fixed

Fixed positioned elements are relative to the window. For example the below code might be for a navigation element that is at the top left of the page, even if you scroll down.

nav
{
    position: fixed;
    top     : 0;
    left    : 0;
}

How to think about it

relative → “I exist in flow, but I can be adjusted.”
absolute → “I go to a specific location”
fixed → "I am stuck to a specific location."

Homework

Create (at least) three (3) linked HTML pages → Each page should link to the other two in some way. For example you might create a repeated
on each page, or have each page link in some interesting or novel way.
Use the snippets on this page to demonstrate your understanding → The pages should have the following:
- custom font (local or from Google Fonts)
- absolute or fixed-positioned elements (elements are by default relative)
- css (transition or keyframes) to animate or delay elements
- use different units for different contexts
Add conversational comments → In your CSS and/or HTML add comments throughout to separate elements, add visual "flare" to your code, and to explain what different sections do, especially if it is a new snippet you are trying. Try to give this some level of personality, in theory, ChatGPT might have trouble emulating effectively.

<!-- howdy partner! This here div has
 a class that I am using to give a 
 cool-as-all-getout stylized border -->

List any effects you'd like to achieve → Either through an example website or description. I will assume you have tried to look this up by some means and were unable to find it, the correct term, or get it to work.

I'd recommend using this to start making a version of your website code for the Remapping project. If you choose to do this, still make sure the code is copied to the folder for this specific homework.