5 CSS concepts you MUST know

Hey, Bryan here! Welcome to my newsletter. Each week I publish content to help you get to the next level in your career. Here we talk about coding, from what a programming language is to how to become an outstanding tech lead. If you have questions, don’t agree with something, or just want to say “Hi!” don’t hesitate to send me a message ❤️

---

Do you agree CSS is awesomely hard? yeah we all think the same, but it shouldn’t be that way! everything it’s going to be different once you master the fundamental concepts around CSS, those concepts would help you understand why and how the browser renders the elements on the screen.

Clarification: Knowing CSS wouldn’t make you better at creating beautiful pages. It would help you convert the designer's work into web pages efficiently.

Box model

CSS treats all elements like boxes. The browser would determine the width & height of the box by computing the props (Content box, Padding box, Border box & Margin box). As shown in the following image

https://www.w3.org/TR/CSS2/box.html

The browsers apply user agent stylesheets to each HTML element. For instance, most of the elements have a style of display: block; meanwhile, the <span> have a display: inline;

Every box would be rendered based on what display property value has, for instance, when using the “inline” box, all box properties except the border would be ignored.

Interview Question: What is the difference between a div and a span?

Answer: by default the user agent renders the div using the display as a “block” meanwhile the span is rendered using “inline” and most box properties have no effect in an “inline” box.

Selectors

Selectors are used to “select” the element(s) you want to apply the style. There are many selectors, the most commons are:

• Element Selector: p

• Class selector: .some-class-name

• Id selector: #unique-id

• Data attribute: [data-key='some-value']

You are capable of nesting selectors, for instance:

In the previous snippet, the browser would get all elements that have a “div” and one of the parent element has an id of “unique-id”.

🚨 The browsers read the selectors from right to left! 🚨

Here you can check the full list of selectors!

Cascading

It’s possible to have different CSS selectors applied to the same element. So there are four rules that determine what CSS would be applied.

For instance, do you know what background color is going to be used?

If you don’t know the answer, don’t worry. Here is all you need to know about cascading!

First, it’s what’s the selector order and position in the source code, the answer for the previous example it’s blue because the latest appearance predominates.

Secondly, we have the CSS specificity, but we have an entire section to cover it.

Third, it’s the origin of the styles

Image from (https://web.dev/learn/css/the-cascade/)

And lastly, the !important rule that would overwrite more specific selectors.

Specificity

Each selector has a scoring, and based on it the browsers determine which one has higher relevance. But, a picture is worth a thousand words, so here you can check the score for the different selectors. (Image borrowed, the source is in the caption)

Image from (http://www.standardista.com/css3/css-specificity/)

Layout

The main goal of learning about layouts it’s to know how to arrange the different boxes on the screen. By default, the browser arranges the boxes from top to bottom, left to right, but you’re capable to change the behavior.

We briefly talked about the display property and the values “block” and “inline”. Besides those two, we have “inline-block” that lets multiple elements be in the same line, without breaking the content in a “new line”.

And more recently Flexbox and grids are at your disposal, the key difference between the two of them is that Flexbox lets you arrange boxes only in one axis, either horizontally or vertically. Meanwhile, grids let you arrange the boxes in multi-axis.

You can learn Flexbox here (it’s a game! 🎮🔥)

You can learn Grid here (can you guess it? oh yeah, it’s another game)

There are two more ways to change how the elements are arranged on the page: by using floats, and as the words said, you can either float the element on the left or right side of other content.

The other option is by using positioning. All elements are default positioned “relative” to their parent element. But you can use other values like “absolute” that lets you move the box around by using (top, right, bottom, left) properties, where the box would be moved based on the closes ancestor with relative positioning if the browser doesn’t find one relative element it would use the body element.

Lastly, have you ever visited a site where you scroll down and the header sticks at the top? The CSS that handles that behavior is a fixed positioning that would always display the box even if you scroll throughout the page.

Conclusion

I bet you still think that CSS is hard, but the key takeaway for you should be to learn the fundamentals, once you have a good understanding of how things work, you would easily develop, take decisions and solve problems because you know why things are behaving in a certain way.

You could apply this advice to everything in your career. If you want to learn something in depth let me know in the comments.