HTML and CSS Refresher Challenges

Inheritance in CSS

In CSS, inheritance controls what happens when no value is specified for a property or element. Inheritance will cause the element to inherit the value or property of whichever element is placed above it in terms of hierarchy. Properties like color, font-size, font-family, etc are inherited. When no value is given for a non-inherited property, the property gets assigned the initial or default value. An example of a non-inherited property can be background-image, border, etc.

Specificity in CSS

Specificity in CSS is the set of rules or score applied to CSS selectors in order to assign styles to an element. Specificity is determined by the number of each selector type. It only applies when an element is targetted by multiple CSS declarations. When deciding which styles to apply to an element, if the specificity for that element is high, then the browser will most likely choose the CSS declarations given for that element. A multiple selector is a sequence of simple selectors which are not separated by a combinator and represents simultaneous conditions instead of combined conditions and a compound selector selects the combined results of all specified selectors.

ID and Class Attributes

The ID attribute is a unique attribute applied to an element. IDs can only be applied to one element. It is used in CSS by using the # symbol followed by id. The class attribute is used to classify multiple class names for an element. Classes can be applied to multiple elements. This is used in CSS by using the "." symbol followed by the class name.