HTML and CSS / Week 3

This week, we’re focusing more on CSS, the differences between tag-based and class-based styling.

Project for this week: https://glitch.com/~watertown-summer-programming-week-3

Homework for next week:

  • Style your website entirely using CSS Classes
  • Optional if you have additional time:
    • Build a website that hosts both img1 and img2 and explains the difference between tag-based and class-based styling

Links:

5 Comments Add yours

  1. Cindy says:

    Jan,
    Hi-a couple of questions/thoughts/observations:
    a)I notice that if you style with a class you have to still enter the “class = …” every time you want to use it; can’t I just define a class style for h1 and then have it apply to all h1s in my document?
    b) I assume you can do class styling to use on an image (for instance to set size, borders, etc.) what is the syntax for putting “class =…” within the ?
    Thanks!
    Cindy

    1. Jan says:

      Hi Cindy,

      These are great questions! Here are my answers:

      a) If these styles should apply to all H1’s on the website, I recommend to style the tag in CSS like this:

      h1 {
      font-family: Arial;
      color: green;
      }

      This applies the font-family and color to all H1’s on the website. Classes come in handy if there are certain H1’s or tags that should look different from the website.

      b) Good question! Here’s how you do it: .

  2. Cindy says:

    Never mind on the image styling question…I got that to work.

  3. Cindy says:

    Okay, clearly I shouldn’t use the comment sheet–I will stop after this comment. I think I have tag and class backwards in my mind. If I style the TAG, then it applies to everything for that tag and I don’t have to keep assigning it (e.g. h1 or h2); if I use a class, then it only applies when I stick it specifically in there. Seem counter-intuitive to me, but is that now correct?

    1. Jan says:

      That’s correct!

Leave a Reply