CSS Properties & Flexbox

Tim Carlson
Winter 2024

View of the Day

  • Q & A (PollEv)

  • Quick Fonts Demo (code together!)

  • CSS Layouts (PollEv)

  • Flexbox Demo (code together!)

START WORKING ON
PROBLEM SET 03 EARLY!

It's a bigger problem set (3 problems!) and will take you longer than the previous one. Don't put it off and fall behind! Start tonight!

Updating Lecture Code

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

index.html

 

Lecture Demo starter

style.css

ugly web page

Q&A / "Review" Poll

https://pollev.com/timca

https://fonts.google.com/

It is also possible to specify an online font that the browser will download and display.

Fonts

Fonts are installed "per computer", so not every computer has the same fonts (which is why you set a default with font-family).

Fonts are installed "per computer", so not every computer has the same fonts (which is why you set a default with font-family).

p {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

Use this font

If first isn't available,
use this

If nothing else,
use this style of font-face

Font Units

All browsers have a "default" font size--generally 16px. We use relative font sizing in case of variations.

Note that units are "measurement units" (think: inches)

em relative to the parent font size By default 2em = 32px
But if the parent's font-size was 20px, then 2em = 40px
rem relative to the root (body's) font size of 16px 2rem = 32px usually
% relative to parent font size or dimension, can use for width or height if parent width is 300px,
then 50% = 150px
px absolute measurement (do not use for fonts) 16px = 16px

Inline vs. Block

You can use the display property to set whether an element is block or inline (or something else).
Choose elements based on semantics, not appearance!

How to pick a selector

Some heuristics

  1. Main rule: be as general as you can, but as specific as you need to be
  2. "Will this rule apply to all tags of this type?" if not, add a meaningful class to the element
  3. Are the elements in this part of the page different from others? Use a descendant selector
  4. Do you want to "call out" an element with style? Add a class
  5. Rules usually don't have more than 2-3 selectors
  6. Primarily use class names for styling, not id attributes
  7. You never need to add more specificity to an id selector

Box Model

Apply spacing to elements by manipulating the size of their "box".

AVOID USING
float AND position PROPERTIES!

Demo: Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Action Items!

  • Read: through Chapter 8

  • Project Proposal - we'll get feedback soon! 

  • Problem Set 03 due Friday!!

    • ​​​Don't wait on problem3 !

​

Next: Responsive Design & Media Queries

info340wi24-css-flexbox

By Tim Carlson

info340wi24-css-flexbox

  • 66

More from Tim Carlson