CSS: R&R part 2

Sarah St. Timmerman — Sat, 06 Jun 2020 20:39:32 +0000

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!

CSS: Refresh, revitalize

Sarah St. Timmerman — Tue, 02 Jun 2020 17:38:18 +0000

Coding bootcamp was a great experience for me. I learned a lot in a very short amount of time. A twelve week crash course on all things Web Dev. But bootcamps are just that, fast, furious and intense. No matter how good the program, there's no way to retain all the information at such a breakneck speed.

My next step as a junior web developer is going back over the information that I learned, refreshing and revitalizing it to sharpen my skills. I'm going through the CSS courses on freecodecamp.com and in the next few blog posts I'm going to be explaining some of things I am learning for the first time as well as the things I needed to refresher on. Hopefully it will help you as well.

Back to basics:

I've been dabbling with BEM and Tailwind, but for some reason I had forgotten that in basic CSS you can give things two separate class names simply by adding a space. I do have a tendency to get ahead of myself sometimes, so I really shouldn't be so surprised.

We definitely talked about padding, margin and border, and I've been manipulating them. I'll be honest though, I did need to remind myself the differences between padding and margin. Padding is the space around the element, as if your element buddy was wearing a fluffy marshmallow jacket. Margin is the space between that element, other elements and the border of the element it is contained in. For examples sake, we'll have at least a six foot distance between each element for proper social distancing.

Negative margins were completely new to me. I created my entire portfolio website by hand writing my CSS but I did not know about this. Changing a margin to a negative number makes the element larger. Neat!

Hope this helps! Until next time, folks!

DEV Community: Sarah St. Timmerman