Unit 2 - Lesson 9 - Challenge A - Height and Width Attributes - Inline styling?

Does anyone have any insight into why inline styling is introduced in this challenge? It’s my understanding that inline styling is not best practice, so I’m wondering why the challenge doesn’t just have a CSS component. CSS was introduced to style text in lesson 6, so with enough hints, I think they could figure out width and height. I tell my kids not to even look at this challenge, but of course, they do, and it confuses them from that point forward.

Hi @ssindelar,

I understand your frustration. There are many ways to assign height and width (and any property) that it can be confusing and seem like there should only be one way. There are rules that can help guide the decision so I hope I help clear this up to help see why this lesson exists as it does.

Height and width in the image tag is not really an inline style. They are attributes of the of the image or img tag. They are referenced in code.org documentation and listed on the attributes table on the w3schools page.. Although it is good practice to assign all your pictures the same height and width and therefore use a style or even a class if you have different height and widths for some images, you may need an image to be completely different from the style so you need to place the attributes in the tag itself.

FYI - an inline style is one of the 3 ways you can specify style for an element and for height and width in an image it would look like:


This lesson might be a good time to bring up specificity if your kids ask questions about which method is best to assign properties. If you have the same attributes referenced for an element such as height and width in a style sheet and height and width in an element tag, the one that is more specific will take precedence.

From the page linked above:
All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

CSDiscoveries is intended to just introduce HTML and CSS so cascading style and specificity isn’t really included in any lesson but if kids recognize that there are multiple options, it is something that may lead to a good discussion.

I hope this helped clarify the topic,

Thanks, Michelle. My middle school students tend to be concrete learners at this stage so I’m trying to focus on structure in the HTML file and styling in the CSS file. They have no trouble utilizing classes to call out specific images in the later lessons, so I’m going to save the “three ways one can specify a style” for their later course work. My complete beginner kiddos are looking for consistency in order to feel successful.