CSS Selectors

Type Selector

Class

ID

A Declaration is made up of a property and a value

(This is from a great resource: CSS Terms and Definitions by Louis Lazaris. I really need to start using the terms correctly!

This paragraph has a class assigned to it. The property-value pairs in this particular declaration block are: color: #ffffff; background-color: black; padding: 10px; font-size: 1.3rem; line-height: 2rem;

This paragraph uses an id selector. The property-value pairs are: color: #ffffff; background-color: green; padding: 30px; width: 50%;

Now we will add a button, even though I won't use buttons much. It will have a class named "big" with these declaration pairs: color: red; padding: 30px; background-color: black; font-size: 4rem; border-radius: 30px;

The button also has a cursor value of "grab" and a pseudo-element (?) of hover, with a background value of yellow.

Following the button is an input frame, with some properties assigned when you click on it.

Testing the border radius with a lower level H4

Next: Learn More!