6.S082 Lecture 6 Foundational Concepts of CSS

Follow along at designftw.mit.edu/go/slides

CSS beyond the browser?

Topics for today

Document flow & the box model

In CSS, every element is a box

A lot of CSS is about how these boxes are painted, and how they affect other boxes

Lorem Ipsum dolor sit amet
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor
Lorem Ipsum
ad minim veniam
ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
velit esse cillum dolore
consectetur adipiscing elit, sed do eiusmod tempor incididunt
Excepteur sint occaecat cupidatat non proident

First view:

  • What difference do you notice between the rendering of p and strong besides bold face?
  • What if we add backgrounds or borders to them? What additional differences do you notice?

Second view:

  • Can we change these differences by applying CSS? Let's inspect to find out!

Block elements

  • Laid out top to bottom*
  • Line break before and after
  • Box as wide as available space (extrinsic)
  • Box as tall as all contents (wrapped)
  • Text wrapping inside box
Lorem Ipsum dolor sit amet
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline elements

  • Laid out left to right*
  • Inline with surrounding text
  • Box as wide as all contents (intrinsic)
  • Box as tall as one line
  • Text wrapping by box fragmentation
velit esse cillum dolore
consectetur adipiscing elit
sed do eiusmod tempor incididunt
Excepteur sint occaecat cupidatat non proident

First view:

  • We can use width and height to change the default dimensions.
  • We can use padding to add spacing between the content and edge of a box.
  • We can use border to add a border around the element.
  • Note that width and height behave differently wrt text wrapping

Second view:

  • Highlight all the things! What happens if we add our highlight class to the inline elements?

Third view:

The Box Model
  • padding controls the spacing from the element’s content to its edge. margin specifies the spacing from the element’s edge to the elements around it, and can be negative to bring the element closer to other elements instead of farther. border allows you to specify a visible border. It’s placed outside the padding.
  • Padding & border widths are added to width and height, not subtracted from it.
  • What happens when we specify a width of 100%?
  • You can change that with box-sizing: border-box
  • You can use the browser developer tools to inspect the box model, via the "Computed" tab in the Elements panel.
  • Each element has a content box, a padding box, a border box and a margin box that are delimited by the corresponding areas.
  • Can you guess why the property for corner rounding is called border-radius?

More block vs inline

Block elements

We can set width, height, margin-top, margin-bottom via CSS

Inline elements

CSS width, height, margin-top, margin-bottom have no effect.

Switching box models

  • Why would switching box models be useful? Let's look at an example.
  • We want this input to have a width of 100%. However, because width merely sets content width, the entire element ends up being larger than the viewport.
  • We could fix that by manually calculating the width (via calc(100% - 20px - 16px)), but why not let the browser do it for us?

Wait a second… How was that on the same line and had a width?!
🤔🤔🤯

Block elements

  • Laid out top to bottom*
  • Line break before and after
  • Box as wide as all available space
  • Box as tall as all contents (wrapped)
  • Text wrapping inside box
  • We can set width, height, margin
Lorem Ipsum dolor sit amet
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline elements

  • Laid out left to right*
  • Inline with surrounding text
  • Box as wide as all contents
  • Box as tall as one line
  • Text wrapping by box fragmentation
  • width, height, margin have no effect.
velit esse cillum dolore
consectetur adipiscing elit
sed do eiusmod tempor incididunt
Excepteur sint occaecat cupidatat non proident

Inline-block elements

  • Laid out top to bottom*
  • Line break before and after
  • Box as wide as all available space
  • Box as tall as all contents (wrapped)
  • Text wrapping inside box
  • We can set width, height, margin
  • Laid out left to right*
  • Inline with surrounding text
  • Box as wide as all contents
  • Box as tall as one line
  • Text wrapping by box fragmentation
  • width, height, margin have no effect.
velit esse cillum dolore
Lorem Ipsum dolor sit amet
consectetur adipiscing elit
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
sed do eiusmod tempor incididunt
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non proident
How does width and text wrapping work in an inline-block container? Let's find out!

First view:

  • Is image a block or inline element? Or maybe inline-block?
  • We can set width, height, margin, although they are not entirely independent
  • If we inspect, it's inline (?!?) What's going on?

Second view:

  • object-fit and object-position help us adjust how the object contained within the replaced element should be positioned.

Image elements

Replaced elements

Examples

Block elements

div h1 h2 h3 h4 h5 h6 p body html

Inline elements

a span strong em mark code cite abbr

Inline-block elements

button input textarea select

Replaced elements

img video audio iframe canvas option object embed
  • All consecutive whitespace in HTML is collapsed to a single space
  • This allows us to format our code nicely without worrying that our whitespace will be rendered, but sometimes we actually want to render more than one consecutive space!
  • The CSS white-space property changes white space processing rules.
  • Even elements like head or style are boxes too!
  • They just have display: none from the User Agent stylesheet, which hides the element and removes it from normal flow.
  • Same with elements with the hidden attribute
  • You can apply display: none to elements you want to hide.

Values & Units

width: 400px;

width: 50%;

width: 400px;

width: 400px;

<length>

Read more about lengths

<length> units

cap ch em ex ic lh rem rlh vh vw vi vb vmin vmax px cm mm Q in pc pt

<length> units

  • Some useful units are:
    • % refers to a different thing depending on the property. Look it up on a case-by-case basis!
    • em is relative the current font size
    • rem is relative to the current font size of the html element
    • ch represents the width of the "0" glyph in the current font. This is useful in monospaced fonts where every character has the same width.
    • vw is a percentage of the viewport width (100vw = viewport width)
    • vh is a percentage of the viewport height (100vh = viewport height)
  • Font-relative units are useful in making components that scale by changing one property (the font-size).
  • Viewport-relative units are useful in making layouts that scale nicely with the viewport size.

Second view:

  • width: 100% makes the button as wide as the viewport. But clearly, font-size: 100% resolves to a different length?!

A pixel is not always a pixel

CSS pixels != device pixels

An inch is not always an inch

on screens, 1in = 96px

Interested in digging in? Here are the definitions from the specification.
  • Viewport scalable units allow us to scale text to the viewport size.
  • calc allows us to perform calculations with different units. The type returned depends on the units that participate in the calculation.
  • min, clamp and max allow us to create upper and lower bounds for our values, and can participate in calc() expressions too.
  • All these functions can of course be combined, e.g. min can be used inside calc and vice versa.
  • Note that unlike Python or most other programming languages, these calculations are re-evaluated every time anything changes (e.g. the viewport or font size)

width: 50%;

Percentages

Each property defines whether percentages are allowed and what they represent

margin-left: 10%;

margin-top: 10%;

border: .3em dotted steelblue;

outline: .3em auto steelblue;

margin: auto;

overflow: auto;

Lorem Ipsum dolor sit amet

Other datatypes

opacity: [num];

transform: rotate([angle]deg);

background-color: hsl([hue], 100%, 40%);

background-image:
url(img/chocolate-mousse.png)
linear-gradient(gold [stop]%, teal);

Shorthands & Longhands

How do these different properties for border interact? What happens if we apply them on the same element?

Shorthands & Longhands

A shorthand is a CSS property that represents multiple other properties, its longhands

border: .3em dotted steelblue;

border: dotted .3em steelblue;

border: steelblue .3em dotted;

Longhands can be shorthands too

Longhands can belong to multiple shorthands

Often they evolve over time

CSS 1 CSS 2.1 CSS Backgrounds & Borders Level 3 CSS Backgrounds & Borders Level 4

Naming is not always consistent

What happens if we swap the order of these two declarations? Why??

⚠️

A shorthand always sets all of its longhands, whether values have been provided for them or not

padding: .2em .5em .1em .5em;

Top
Right
Bottom
Left
🕐

background: url(foo.png) 50% 50% / 100% auto no-repeat gold;

background: gold no-repeat 50% 50% / 100% auto url(foo.png);

Topics for next week