HTML and CSS Refresher Challenge

Inheritance in CSS

CSS saves web designers time by allowing some properties to be inherited when the child element has no specified value. For example, if a paragraph contains emphasized text and the paragraph's font color is set to red, the emphasized text will inherit the red font color. Imagine if web designers had to input a font color for the paragraph and two emphasized phrases in this paragraph! It would be slow, annoying work.

Some properties are not inherited from the parent because they would cause a mess. For example, if the emphasized text above could inherit the border around these paragraphs, you would have borders within borders!

To have an element inherit a non-inherited property, you can input the value "inherit." For example, I added "inherit" to the em's border property around this emphasized text.

Specificity in CSS

Specificity is an algorithm that calculates which CSS declaration is the winner when a conflict occurs. The more specific selector wins! The selectors in order from strongest to weakest are ID, Class, and Element.

A compound selector specifies an element by naming its multiple, simultaneous IDs and/or Classes. Compound selectors precisely target the element you want to style when the same element is used multiple times on a page.

Multiple selectors paint with a wider brush. They help web designers apply the same style to different elements. To create a multiple selector, separate the elements with a comma, such as "h1, h2, h3."

ID and Class Attributes

To style a single, unique element on a page, use an ID! You can only use an ID once per page on a website. In the stylesheet, the ID starts with a hashtag or pound sign.

To apply styles to multiple elements, use a Class! You can use a Class multiple times on a page. In the stylesheet, the Class has a leading period.

It helps to plan out your IDs and Classes while sketching your mock-ups so you can code them into your HTML file before starting on your stylesheet. Give the IDs and Classes simple names that are easy to remember and identify.