CSS: The Basics

🗓️ Today’s topics

• Styling HTML with CSS
• CSS syntax: selectors, properties, values; shorthand properties
• Working with color, text and font properties, and backgrounds
• The box model, margin, and padding
• Units of measurement

✅ TODO today

Between classes:

Begin working on your dog adoption website. 🐕

You won’t be able to do all of it at once. Start with the html, adding in classes for your elements. Think about how to group your elements together so you can apply styles effectively to groups of things.

🎯 Weekend Project: Build a Dog Adoption website

Link to the assignment invitation

This assignment is due on Monday, July18, at 9:00 am.

🔖 Resources

Getting Started

• MDN CSS Basics
• CSS-Tricks Getting Started with HTML & CSS
• Rachel Andrew: How to Learn CSS

CSS Selectors & Properties

• CSS Diner -> This goes into a LOT of depth.
• MDN CSS Selectors
• MDN CSS Reference for Property Names
• Hacks for dealing with specificity

Box Model

• The Box Model in CSS
• How Box Sizing Works

⭐️ EXTRA/TMI

• A Look Back at the History of CSS
• 58 bytes of css to look great nearly everywhere
• Coolors Color Palette Generator

🦉 Code & Notes

• CSS Basics notes
• Example from class