Home / Schedule / Week 3 / Monday, 6/1

CSS essentials: selectors · cascade · properties

Topic Slides

CSS Essentials Foundation Reading AI-Generated Code AI Track

Agenda Slides Open fullscreen ↗

← Wednesday, 5/27 Wednesday, 6/3 →

Post-Class Notes

TL;DR

We started CSS: how selectors find elements and how the cascade decides which rule wins when two of them collide. Prefer an external stylesheet, set your defaults on body and let them inherit, and use DevTools to inspect and experiment live. When you ask AI for styling, be specific about color, size, and font, because a vague request gives you a vague result.

What we covered
  • CSS controls how a page looks. You write a selector to find elements, then a rule set in curly braces where each rule is property: value;. For example, h1 { color: red; }
  • There are three ways to add CSS. External (a separate .css file linked with <link rel="stylesheet" href="css/styles.css">) is recommended because it keeps content and styling apart and lets every page share one consistent look. Internal (a <style> block in <head>) and inline (a style attribute) also work, but inline is a quick hack to avoid
  • The cascade decides which rule wins. Specificity goes from low to high: element, then class or pseudo-class, then ID, then inline. When two rules have the same specificity, the one written later in the file wins. This is why external versus internal does not have a fixed priority; placement is what matters
  • Selectors you now know: element (h1), ID (#about, only one per page), class (.card, reusable on many elements), pseudo-class (:hover, :focus), and descendant (nav a for links inside a nav)
  • Set defaults once on body (like font-family) and the rest of the page inherits them. Then override only the specific parts you want to look different
  • DevTools is your CSS debugger: right-click an element, Inspect, read its styles, and edit live to experiment. You can copy the selector and hand it to AI when you want help changing one specific part
  • When you ask AI for CSS, be specific. Name the color, the size, the font. "Make it better" tells AI nothing, so it gives you an average look. Knowing CSS is what lets you describe exactly what you want
  • Keep all images in an images/ folder and link them with a relative path like images/photo.jpg, so they never break when your site goes live. This is a requirement, not a suggestion

To do before Wednesday (6/3):

  1. Finish the in-class exercise: create css/styles.css, link it from about-me.html, and write some CSS by hand first (try an element, an ID, a class, and a :hover). Then do a second version with AI
  2. Practice reading AI's CSS: be specific in your prompt (name the color, size, and font, not just "make it better"), read every rule it generates, and change something so you understand it. Ask AI to explain anything that is unclear
  3. Keep your MP1 moving. Turn your client conversation into a proposal, then a PRD. Come ready to share who your client is and what they want
  4. On your personal website, move the CSS into an external .css file and make your pages look consistent
  5. Start logs/wk03.md: what you built, what you learned, questions you still have, and how you used AI
  6. Wednesday 6/3: box model, Flexbox, and a first round of MP1 mid-project demos. Bring something to show