7 Core CSS concepts every web developer should know
It’s no secret by now that nobody knows how CSS works exactly, especially when you’re first starting with CSS. It can be hard to figure out why an element is positioned in a certain place, or why that element has a red color despite using important to overwrite it.
In this article, I’ll be covering core CSS concepts that will help you figure out what’s going on (even if a little).
Note that this article is not for CSS veterans, there aren’t any mind-blowing features or anything of the sort, it’s only covering the very core concepts of CSS.
1. Display
Have you ever tried placing two divs next to each other but the other div ends up on a separate line? Or try placing a link on a separate line but other elements end up next to it somehow? I’ve got you covered! With the display property, you can control how an element is displayed on the page. While a lot of websites are using flexbox and grid (which I will not be covering, since this is a beginner guide), you’ll definitely come across a website still using old display properties for their layout.
1.1 Display Block
Block elements take 100% of the available space by default and do not allow any elements to be placed on the same line, even if you reduce the width (shown in the image above) the element size will be reduced but it still doesn’t allow another element to be placed next to it. Most HTML elements are block elements by default.
1.2 Display Inline-Block
Inline-Block elements allow other non-block elements to be placed next to them, and will only push other elements to the next line if there’s no space left for said elements.
1.3 Display Inline
Inline elements are similar to inline-block in the sense that they allow other elements to be placed next to them, however, the dimensions (width and height) of inline elements can’t be changed, their dimensions are determined by their content (text and padding).
Note: you can use the <br> element to break the line after an inline/inline-block element
2. The box model
In HTML, everything is a box (yes even circles, triangles, etc. are just cut boxes). But how do these boxes work? How is empty space added inside the box? How about outside the box? What even is “The Box”?
Note: this is assuming that the following code block is in the used CSS file, it’s so popular that you don’t even need to know what happens if it’s not there. And if you’re not using it in your projects, you should :)
* {
box-sizing: border-box;
}“The Box” is basically the building blocks of HTML elements, it consists of four main blocks: Margin, Border, Padding, and Content
2.1 Margin
The margin adds empty space between the selected elements and all elements around it, and it does not affect the size of the element’s content. Now for a neat little secret, starting from the outer edge of the border, margin-top pushes the selected element downwards and doesn’t move other elements, while margin-bottom keeps said element in place and push other elements downwards. margin-left pushes the selected element to the right and doesn’t move other elements, while margin-right keeps said element in place and push other elements to the right. While it may sound confusing at first, it works like that because HTML is rendered from top to bottom, left to right. I highly recommend playing around with the margin in the dev tools to have a better understanding of how it works exactly.
Now for the groundbreaking question: Let’s say I have two block elements — A and B, A is on top of B— what happens if I add margin-bottom: 15px; to A and margin-top: 10px; to B?
If you thought that they’d be 25px apart, I’m sorry to inform you that you were wrong. Why? Because Margin Collapsing! Basically, if you have two margins with opposing directions, only the bigger margin will be rendered (15px in this case) and the other will be ignored. So in our case, A and B would be only 15px apart.
I know that’s a lot to digest, but I promise the other properties are not as complicated.
2.2 Border
The border defines what the edges of the element will look like, it also takes away the content and pushes the content inwards. So if we have an element that is 100x100px, adding a 10px border will leave us with 90x90px of content.
2.3 Padding
The padding adds empty space — Not white space, meaning that if the element has a background color it will not be affected — within the element’s border, takes away from the content size, and pushes it inwards. Using the same example as above, having a 10px border and 10px padding would leave us with 80x80px of content.
2.4 Content
The content is basically the space left after the calculation of the padding and border. It is where text or images or child HTML elements will start appearing in the selected element.
3. Position
I know that you’ve tried giving top: 50px; to your element and wondered why the heck it’s not moving, we’ve all been there. This is why we need to talk about the position property, which allows you to control where your element will be positioned.
3.1 Static
All HTML elements are position: static; by default. Meaning that you can’t use top, left, right, bottom properties to move them around, they can still be moved around using margin, flexbox, etc. but in some cases, you just want to nudge that element a little bit to the right without moving elements around it, which is why position: relative; is coming up next.
3.2 Relative
Ok but relative to what? position: relative; means that the element will be placed relative to its original position, while — unlike margin — not moving any of the other elements around it. By using relative you can now use top, left, right, and bottom properties to reposition your element.
3.3 Absolute
I recommend that you read the following sentence 10 times because it’s quite confusing at first. position: absolute; positions the selected element relative to the closest non- position: static; parent (if there’s no such element it’s placed relative to the body), and takes the element out of the HTML flow which results in the element floating on top of other elements. You should absolutely only use this property when creating something that needs to float on top of other elements like a popup or close button, usually, the less you use said property the better.
3.4 Fixed
position: fixed; is similar to absolute in the sense that it makes the element float on top of other elements. However, it’s always placed relative to the body and will stay where it was positioned even if you scroll the page.
4. Selector Specificity
As much as I would like to discuss this topic, there are already a thousand articles written about it and I don’t have much to add, one of my favorites is the Official MDN Documentation. TL: DR; you should use classes most of the time to style your elements and avoid using !important as much as possible. However, I will discuss how to understand which selector has higher specificity directly from the dev tools in the debugging section.
5. Inheritance
Some CSS attributes — font-size, font-family, and color to name a few — are inherited from their closest parent if and only if they are not specified for a given element.
Consider the following HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>If we give the grand-parent div color: red; both the parent and child divs will have a red text color considering that said divs have no color attribute specified. In case either of them has a color specified, it will overwrite the inheritance, and no, adding !important on the grand-parent will not overwrite its children’s color in said case. Again, I will discuss more on how to find which attributes are inherited in the debugging section.
6. z-index Stack
I too wish that z-index was as simple as whichever element has a higher z-index will be displayed on top, but that’s not how it works.
Again, consider the following HTML
<div class="sibling-1 parent">
<div class="child"></div>
</div>
<div class="sibling-2">
</div>Considering that sibling-1 has z-index: 10; and sibling-2 has z-index: 20; In that case, sibling-2 will be on top of sibling-1 which is great! Now, consider that child has z-index: 30; In that case, it will not be displayed on top of sibling-2 because its parent (sibling-1) has less z-index. So z-index only works for sibling elements, a child element cannot be displayed on top of its parent’s sibling if said sibling has a higher z-index than the parent. You could probably do some voodoo magic with position: absolute; and all that but it’s not recommended because it makes maintaining your layout near impossible. If you want an element to be always on top of other elements, it is recommended that you append it directly to the body.
7. Debugging
While debugging isn’t a part of CSS, you can use the dev tools to help you understand what’s going on. I’m using Chrome for the following examples, I haven’t tried other browsers but I believe they do have a similar interface (whatever you do, do not use internet explorer. Let die already.)
Since you’ve gotten this far, I’m assuming you know how to open the dev tools so I’ll skip that part.
Open the Elements tab and select the element you want to inspect from there.
7.1 Box Model
At the very bottom of the Styles tab, you can see different parts of the box model and what area they’re covering by hovering over them and the corresponding part of the element will be highlighted.
7.2 Computed Styles
Right next to the Styles tab there’s the Computed tab, where you can see all the different CSS properties applied to the selected element. For example, if your element has a red color despite not specifying any, you can click on the arrow icon to see where that style is coming from, it could be either inherited or accidentally given by another selector.
If a property is dimmed (like height and width in this example) it is most likely because flexbox or grid are being used to specify the said property (feel free to check the Layout tab in this case, as mentioned before I will not be covering those subjects).
You will most likely come across properties which you don’t know how they function (user-select for example), in that case, Google is your best friend. You need to find out what that property does to understand what kind of effect it is having on your element.
7.3 Selector Specificity
In the Styles tab, you can see all selectors which are targeting your selected element, in the following example, a span was given color from 5 different selectors. The reason blue is not crossed out is that it has the highest specificity. So the higher the specificity of the selector is, the higher it will be placed on the list (!important breaks that rule of course.)
Final Thoughts
“The best way to learn CSS is the hard way” — Me
I hope you’ve learned something useful while reading this article, the best advice I can give for CSS beginners and those who have trouble with CSS is to design anything that comes to mind with CSS, experiment, see what works and doesn’t work, and of course, Google.
Good luck on your journey.
If you’d like to hear more or have any suggestions, feel free to comment or contact me on Linkedin
