I really hope my response doesn't receive negative feedback due to the faulty HTML code.
Upon reviewing the information about "using style sheets and attribute selectors," my initial thought was that it may not be achievable unless the instructors are willing to utilize the outdated align attribute on the p tags. Although unconventional, if this is the case, one could employ p[align="left"] and p[align="right"] as attribute selectors.
However, I also noticed a requirement to format h2 tags based on their font-size, which CSS alone cannot accomplish. Unless they introduce another attribute like size.
The attribute size is valid for input and select tags but nowhere else. Are they considering using this or perhaps adding a nonexistent font-size attribute? Given the nature of school assignments, anything is possible...
Despite the invalid HTML, these examples prove functional. Nevertheless, the correctness of this approach remains uncertain. It would be greatly appreciated if you could share your instructor's solution once it becomes available. :)
p[align="left"] {
color: blue;
}
p[align="right"] {
color: green;
}
h2[size="16px"] {
background-color: #363636;
color: yellow;
}
h2[font-size="16px"] {
background-color: #363636;
color: yellow;
}
<div>
<p>Text formatting</p>
<p align="left">Text formatting</p>
<p align="right">Text formatting</p>
<h2>Text formatting</h2>
<h2 size="16px">Text formatting</h2>
<h2 font-size="16px">Text formatting</h2>
</div>