CSS


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_fall2022/03_CSS/

Class page:http://johnguerra.co/classes/webDevelopment_fall_2022/

What did we learn last time?

Readings discussion

  • questions?

Random Questions

  • How do you style a class?
  • How do you style a class only inside a link?
  • What should you use id or class?
  • How do you style an element inline?
  • Why would you add a rgba after a rgb property?
  • What is Google Fonts?

When to use pxs, ems and %?

  • pxs fixed. Not dependent on screen size.
  • ems Relative to font-size. Good for fonts on responsive designs.
  • % Relative to height/width. Good for divs on responsive designs.

Margins

Z-index

Doesn't work with SVG 😞

Gradients

Search online for generators. e.g. Colorzilla gradient editor

Group Exercise

Let's continue visualizing tweets collected for the class

Exercise

Improve the HTML of your homepage with some CSS

  • Share your results

Required Readings Next session