HTML and CSS Refresher Challenges

Inheritance in CSS

CSS has a thing called inheritance. This is when some styles are automatically passed on to "children" from a parent element. For example, if you set a text color or font for the entire site, all headings and paragraphs inside will immediately pick up these settings. But this does not work for everything: frames, indents, or block sizes are not inherited this way - they have to be written separately for each element. In general, inheritance makes life easier, because you do not need to repeat the same thing a hundred times.

Specificity in CSS

Specificity is a kind of “who is cooler” system between styles. If several rules apply to one element, CSS chooses the one with the highest priority. The “strongest” are usually ids, then come classes, and the weakest are regular tag selectors.

ID and Class Attributes

ID is like a passport, each element can have only one and unique. Classes are like labels, you can hang as many of them as you want and on anyone. In real work, classes are almost always used, because it is convenient to style a bunch of elements at once with one label. And ID is left for special cases - like "this block is special."