CSS: R&R part 2

Welcome back!

Refreshing and revitalizing my CSS skills again this week! I'm here to share some more tips and tidbits I've learned with you all.

Attribute selector

I knew about the type selectors in CSS for ID, using a #, and class, using a . but I didn't know that you could select elements by their attributes. The attribute selector "matches and styles" elements with that attribute value. For example, if we wanted to select all the elements with the attribute value of 'checkbox' it would look like this:

[type = 'checkbox'] {
    margin: 10px;
}

Types of length: Absolute and Relative

Absolute

Absolute measurements are based on physical measurements, such as inches (in) or milimenters (mm). However, just as absolute measurements in the physical world are not as absolute as they may seem, so it is for computers based on the resolution of the screen. Thankfully, you don't have to be Einstein to understand or use absolute measurements. Just know that it's an approximation based on psychical units of measurement.

Relative

Relative units, like em or rem, are relative to another length. Em is relative to font size, but there are others that are relative to the view port. If you are using em, it will be sized relative to the parent elements font size.

Class declaration: Order matters!

In my first R&R post I wrote about how you could assign two different classes to the same element but simply adding a space between the names when you declare the class on that element in the HTML. In CSS, more specific rules will take precedence over less specific ones if there is more than style applied to it.

So what happens when you have two classes on one element telling the code to styles it in two different ways? It will override the first one that you have in the CSS for the last one you had listed in the CSS. Whichever name you declared first in the HTML doesn't matter though.

Thanks again for stopping by to read! Hope this helps! Till next time!