Focusing Your CSS Selectors Beyond Styling Individual Elements/Tags

What if multiple elements (tags) have the same style? Combine their style rules!

Style Multiple Elements with the Same Rule Apply same styles to several elements Just separate them with comma’s

What if some, but not all, properties are the same between elements?

Example h1 and p both blue only p right-aligned p will pick up a collected set of its rules from both locations Style shared properties together first Then style differences separately later

Is there a way to make elements have a particular style only if they are surrounded by other elements? Descendent Selectors

Selecting only tags that are children of another tag A descendent selector can be used to select tags only if they are children of another tag Select only b tags that are children of h1 tags Only the <h1> <b> content is red Left-most selector is parent

Can I make the style of an element change when I move my mouse over it? :hover

Selecting tags based on actions and conditions A pseudo-selector is a modifier added to select a tag only under certain conditions When mouse hovers over em element

Adding the class attribute. What if I only want some of the copies of the same element to have different styles? Adding the class attribute.

Applying Style ONLY to certain tags Create a class Precede name with a . Can apply only to certain tags Class names should be all or mostly lowercase and contain no spaces